我的自定義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>© All rights reserved 2016</li>
</ul>
</div>
</footer>
</body>
</html>
你可以分享你的網站的任何機會呢?提供的代碼在運行時堅持到底部。 –
Hello Eliezer!這是網站http://aprendiendo-a.com非常感謝您檢查出來,並試圖幫助我:) – Karenpfarah