Hola,
llevo 5 años diseñando con tablas y hoy (un poco tarde al parecer..) he decido de una vez dejarlas de lado y adentrarme al mundo de los divs, que es lo más usado hoy en la web 2.0 por su accesibilidad y usabilidad, al parecer..
Resulta que no logro acostumbrarme bien, y tengo el siguiente problema..
Normalmente para hacer una pagina que conste de un encabezado, contenido y un pie comienzo por hacer una tabla con tres filas, y luego dentro de cada fila voy rellenando los contenidos.
Esta vez estoy haciendo lo mismo, pero con divs, y el resultado ha sido bastante bueno, pero
el problema aparece con el pie de la página, que se ve debajo del menu, no entiendo por qué (screenshot mas abajo)..
Les adjunto el código:
index.html (solo adjunto partes necesarias..)
Código HTML:
<body>
<div id="strike">
<div id="pagina">
<div id="cabecera" class="clearfix"><img src="images/layout/header.jpg" width="945" height="135" /></div>
<div id="izq" class="clearfix">
<div id="h-logo"><img src="images/layout/h-logo.jpg" /></div>
<div id="menu-fondo">
contenido menu..
</div>
</div>
<div id="der" class="clearfix">
<div id="bdy-banner"></div>
<div id="bdy-breadcrumb"></div>
<div id="bdy-contenido">contenido</div>
</div>
</div>
</div>
<div id="pie" class="clearfix">
<div id="pie-text" class="clearfix">texto del pie</div>
</div>
</body>
El código CSS es el siguiente:
Código:
body {
margin: 0;
font-family: Trebuchet MS;
font-size: 11px;
color: #DDDDDD;
background: #000000;
}
img {
border: 0;
}
/* ClearFix */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* Estructura */
#strike {
width: 100%;
background: url(images/layout/bg.jpg) no-repeat;
}
#pagina {
width: 945px;
margin: auto;
}
#der {
width:744px;
float:right;
}
#bdy-banner {
background: url(images/layout/bdy-banner.jpg);
padding: 26px 133px 13px 143px;
height: 60px;
}
#bdy-breadcrumb {
background: url(images/layout/bdy-breadcrumb.jpg);
padding: 5px 20px;
height: 17px;
}
#bdy-contenido {
background: url(images/layout/bdy.jpg);
padding: 5px 14px 5px 10px;
height: 60px;
}
#izq {
float: left;
width: 201px;
}
#menu-fondo {
background: url(images/layout/menu.jpg) no-repeat #FFFFFF;
padding: 11px 20px;
}
#menu ul ul li h2 {
margin: 0;
padding: 0;
}
#menu h2 {
font-size: 1.2em;
}
#pie {
position: static;
width: 100%;
background-color:#000000;
border-top: 3px solid #2c2c2c;
color: #CCCCCC;
}
#pie-text {
margin: auto;
width: 945px;
padding: 7px 0;
}
He tomado un screenshot de lo que me muestra dreamweaver como previsualización:
Gracias de antemano,
José A. Carvallo