2017-01-03 85 views
0

我的自定義Wordpress主題有一個巨大的問題。 我做了很多研究,但似乎並沒有得到修復。 我的頁腳不會停留在頁面的底部,它甚至會在帖子和靜態頁面的中間頁面浮動。 我已經嘗試了一切,但似乎沒有工作。我也注意到這是一個很常見的問題,可能有很多原因,所以我不知道這裏發生了什麼。我檢查並重新檢查了我的代碼,但我不知道錯誤在哪裏。 此外,我的頁腳在主頁上方有一個巨大的空白區域,我嘗試過應用底部和頂部邊距,但沒有任何效果。WordPress的主題 - 我的頁腳不留在底部

我附上了代碼和一些截圖! 請幫助我,非常感謝!

http://www.screencast.com/t/1uTrUy6t26z http://screencast.com/t/ASOXPY0G

body{ 
 
    font-family: DINCond; 
 
    margin: 0; 
 
    position: relative; 
 
} 
 

 
.wrapper{ 
 
    
 
    width: 100%; 
 
    max-width: 1180px; 
 
    padding:0; 
 
    margin: 0 auto; 
 
} 
 

 
h1.banner{ 
 
    background-image: url(images/nuevo-banner_01.jpg); 
 
    background-repeat: no-repeat; 
 
    text-indent: -10000px; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
header nav{ 
 
    float:right; 
 
} 
 

 
header nav h2{ 
 
    text-indent: -10000px; 
 
    height: 0; 
 
    margin: 0; 
 
} 
 

 

 
header nav li{ 
 
    float: left; 
 
    list-style-type: none; 
 
    margin: 10px; 
 
    position:relative; 
 
     top: -398px; 
 
    left: -287px; 
 
} 
 

 
header nav li a{ 
 
    
 
    text-decoration: none; 
 
    color: #baa383; 
 
    font-size: 18px; 
 
} 
 

 
#section-menu ul{ 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
#first-column{ 
 
    
 
    position: relative; 
 
    top: -23px; 
 
    left: -50px; 
 
    padding: 0; 
 
    margin: 30px; 
 
} 
 

 
#first-column li{ 
 
    
 
    margin: 0 0 20px 0; 
 
    width: 100% 
 
} 
 

 
#second-column{ 
 
    
 
    position: relative; 
 
    right: -320px; 
 
    top: -533px 
 
     
 
} 
 

 
#second-column li{ 
 
    
 
    margin: 0 0 20px 0; 
 
    width: 100%; 
 
} 
 

 
#third-column li{ 
 
    
 
    position: relative; 
 
    right: -730px; 
 
    top: -1034px; 
 
    padding: 0; 
 
    margin: 0 -65px; 
 
    width: 100%; 
 
} 
 

 
#banner-inferior{ 
 
    
 
    position: relative; 
 
    top: -1030px; 
 
    padding: 0; 
 
    width: 100%; 
 
    
 
} 
 

 

 
footer{ 
 
    
 
    width:100%; 
 
\t height: 100px; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t left:0; 
 
    display: block; 
 
} 
 

 
#redes{ 
 
    
 
    float:left; 
 
    position: relative; 
 
    top: -35px; 
 
    
 
} 
 

 
#redes li{ 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    position: relative; 
 
    left: 50px; 
 
} 
 

 
h3.redes{ 
 
    
 
    position: relative; 
 
    top: -100px; 
 
} 
 

 
.comment-meta{ 
 
    
 
    position: relative; 
 
} 
 

 
footer ul{ 
 
    
 
    list-style-type: none !important; 
 
    font-size: 25px; 
 
    float: right; 
 
    
 
} 
 

 
footer li{ 
 
    
 
    text-align: center !important; 
 
} 
 

 
#post-content{ 
 
    
 
    float:left; 
 
    width: 70%; 
 
    clear: both; 
 
} 
 

 
#sidebar{ 
 
    
 
    float:right; 
 
    width: 26%; 
 
    padding: 1%; 
 
    background: #ffffff; 
 
} 
 

 
#sidebar li{ 
 
    list-style-type: none; 
 
    margin-left: -40px; 
 
    position: relative; 
 
    left: -20px; 
 
} 
 

 

 
.comment-list{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
}
<html> 
 

 
<head> 
 
    <title>Aprende A</title> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 
    
 
<body> 
 
    
 
    <header> 
 
     <div class="wrapper"> 
 
      
 
      <h1 class="banner">Aprende A</h1> 
 
      <nav> 
 
      <h2>Main Navigation</h2> 
 
       <ul> 
 
       <li><a href="">Inicio</a></li> 
 
       <li><a href="">Productividad</a></li> 
 
       <li><a href="">Finanzas Personales</a></li> 
 
       <li><a href="">Salud</a></li> 
 
       <li><a href="">Otros</a></li> 
 
       <li><a href="">Contacto</a></li> 
 
       </ul> 
 
        
 
      </nav> 
 
     
 
     </div> 
 
     
 
    </header> 
 
    
 
    <!--Start of homepage content--> 
 
    
 
    <div class="wrapper"> 
 
     <section id="section-menu"> 
 
      
 
      <section id="first-column"> 
 
      <ul> 
 
      <li><a href=""><img src="images/images/baner-frase-inferior_04.jpg"></a></li> 
 
      <li><a href=""><img src="images/newsletter.jpg"></a></li> 
 
      </ul> 
 
      </section> 
 
      
 
      <section id="second-column"> 
 
      <ul> 
 
      <li><a href=""><img src="images/images/categorias_06.jpg"></a></li> 
 
      <li><a href=""><img src="images/images/novedades_15.jpg"></a></li> 
 
      </ul> 
 
      </section> 
 
      
 
      <section id="third-column"> 
 
      <ul> 
 
      <li><a href=""><img src="images/images/populares_09.jpg"></a></li> 
 
      </ul> 
 
      </section> 
 
      
 
      <section id="banner-inferior"> 
 
       
 
      <img src="images/images/populares_19.jpg"> 
 
      
 
      </section> 
 
     
 
     </section> 
 
    </div> 
 
    
 
    <!--End of homepage content--> 
 
    
 
    <footer> 
 
    
 
     <div class="wrapper"> 
 
      
 
      <div id="redes"> 
 
       <ul> 
 
      <li>Síguenos en nuestras redes sociales</li> 
 
      <li><a href=""><img src="images/instagram.png"></a></li> 
 
       <li><a href=""><img src="images/facebook.png"></a>a></li> 
 
      </ul> 
 
        </div> 
 
      <ul> 
 
      <li><img src="images/library.png"></li> 
 
      <li>Aprendiendo A</li> 
 
      <li>&copy; All rights reserved 2016</li> 
 
      </ul> 
 
         
 
     </div> 
 
     
 
    </footer> 
 
     
 
    </body> 
 
</html>

+0

你可以分享你的網站的任何機會呢?提供的代碼在運行時堅持到底部。 –

+0

Hello Eliezer!這是網站http://aprendiendo-a.com非常感謝您檢查出來,並試圖幫助我:) – Karenpfarah

回答

0

我期待到你的代碼,但現在有一個問題與您的facebook.png一個錨標記,顯示

<a>a> //take a> away 
+0

我認爲你有不適合你的CSS語法我會創建一個頁腳,你可以在一瞬間操縱。 – Anthony

+0

你好安東尼!Thabk你的觀察,但我不認爲這影響的頁腳:(我仍然得到同樣的問題,我會等待這個頁腳創建,我相信它會有幫助:)謝謝非常! – Karenpfarah

0

您的頁腳的CSS代碼是position:absolute。只有當你知道你在做什麼時,你才應該使用絕對位置。

看看你的代碼:

footer { 
    width:100%; 
    height: 100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    display: block; 
} 

你可以看這是從底部,從左至右零個像素遠離零個像素了,但在絕對位置。只要您滾動頁面,頁腳就會隨滾動一起移動,這就是您在99.999%的情況下不希望用於頁腳的內容。它也負責您的首頁上的空白空間。

嘗試,而不是:

footer { 
    position:fixed; 
} 

...如果你想頁腳粘在底部,但始終是可見的,或者嘗試

footer { 
     position:inherit; 
    } 

...的通常行爲。

瞭解更多關於position屬性在這裏:http://www.w3schools.com/css/css_positioning.asp

順便說一句:請認識到,這樣的問題是不太可能得到很好的回答,你貼了很多unessecary代碼(閱讀更多關於如何創建a Minimal, Complete and Verifiable example)。

+0

Hello Blackbam!謝謝你的解釋和你的幫助。我嘗試過,但是當我上下滾動時知道頁腳移動。 我試過一切,但沒有任何作品。 – Karenpfarah

+0

嘗試位置:繼承或位置:相對。這可能是你想要的嗎?並刪除底部:0;並留下:0;它可能不是你想要的... – Blackbam

0

嘗試改變這個CSS:

#redes{ 
float:left; 
position: relative; 
top: -35px; 
} 

到:

#redes{ 
float:left; 
position: relative; 
top: -35px; 
}