Hola amigos necesito hacer una pagina que se divida en 6 secciones
con un header y un footer
he aqui la idea
bueno ya he echo la mayor parte pues mi problema es
que al dividir la pantalla en 6 no se ajusta al navegador aparecen las imagenes mas abajo les dejo unas he aqui los problemas
este es mi codigo css con el que divido la pagina y el pie de pagina
Código:
#izquierda2{
content:url(../img/01.jpg);
width:33%;
display:inline-block;
height:49.5%;
background-color:blue;
}
#centro2{
float: left;
width: 33%;
margin: 0px 0px 0px 0px;
content:url(../img/02.jpg);
font: 12pt Verdana;
text-align: justify;
}
#derecha2{
float: left;
width: 33%;
margin: 0px 0px 0px 0px;
content:url(../img/03.jpg);
font: 10pt Verdana;
text-align: center;
}
#izquierda3{
content:url(../img/04.jpg);
width:33%;
display:inline-block;
height:49.5%;
background-color:blue;
}
#centro3{
float: left;
width: 33%;
height: 50%;
content:url(../img/05.jpg);
font: 10pt Verdana;
text-align: center;
}
#derecha3{
float: left;
width: 33%;
margin: 0px 0px 0px 0px;
content:url(../img/06.jpg);
font: 10pt Verdana;
text-align: center;
}
#pie2{
position: relative;
margin-top: -50px; /* altura en px del footer con valor negativo */
height: 50px; /* Altura del Footer en px*/
clear: both;
background: #286af0;
text-align: center;
color: #FFFFFF;
}
y mi codigo html
Código HTML:
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#" class="current">Sistemas</a></li>
<li><a href="#">Equipos</a></li>
<li><a href="#">Cámaras</a></li>
<li><a href="#">Redes</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<div id="izquierda2">
</div>
<div id="centro2">
</div>
<div id="derecha2">
</div>
<div id="izquierda3">
</div>
<div id="centro3">
</div>
<div id="derecha3">
</div>
<div id="pie2">
© loquesea.com<br>
Ancho 100%<br>
Fuente: Verdana, 8 pt, centrada.</div></div>
</body> Espero me ayuden a resolve el problema gracias saludos