I'm having a huge issue with my custom Wordpress theme. I've done a lot of research but it doesn't seem to get fixed. My footer does not stay in the bottom of the page, it even floats mid page in posts and statics pages. I've tried everything out there but nothing seems to work. I've also noticed that this is very common problem that can have many causes so I don't really know what's going on here. I've checked and re-checked my code but I don't know where's the error. Also, my footer has a huge blank space above it in the homepage, I've tried applying bottom and top margins but nothing works.
I attached the code and some screenshots! Please help me, thank you very much!
http://ift.tt/2hLOLLA http://ift.tt/2iwVNTp
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%;
height: 100px;
position:absolute;
bottom:0;
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>
Aucun commentaire:
Enregistrer un commentaire