como una imagen vale mas que 1000 palabras os muestro donde quiero llegar
bueno he estado intentando poner la imagen a la que quiero llegar pero como no tengo 30 mensajes no puedo ponerla directamente aqui asi que intentare explicarlo detalladamente
se trataria de:
una capa CONTENEDORA que contendria toda la web
dentro de CONTENEDORA tenemos tres capas mas
CABECERA
CUERPO
PIE
dentro de CABECERA el tipico banner de la WEB tendria el 100% del ancho y el 10% de alto de CONTENEDORA es decir todo el ancho de la page y como suponeis iria en la parte superior de la page
dentro de PIE tendria el 100% del ancho y el 10% de alto de CONTENEDORA para poner publi o cualquier cosa
y en medio de todo esto iria CUERPO que es donde tengo el problema
CUERPO tendria que ocupar el 80% restante de CONTENEDORA
y dentro de CUERPO tendria otras tres capas
MENU PRINCIPAL SECUNDARIO
aqui esta el problema yo quiero que
MENU ancho 20% de CUERPO
PRINCIPAL ancho 60% de CUERPO
SECUNDARIO ancho 20% de CUERPO
esta horizontalmente no verticales como CABECERA CUERPO Y PIE ¿OK?
el alto de estas capas quiero que sea el mismo que CUERPO y no lo marque el contenido de cada una de ellas
ahora mismo se me queda distinto porque
MENU tiene 4 opciones verticales
PRINCIPAL tiene 2 lineas
SECUNDARIO tiene 1 linea
le he puesto borde a cada una de ellas para ver como va la cosa pero nada de nada
no consigo que el height y la suma de los tres width de ellas sea el mismo que todo el tamaño de la capa CUERPO
espero haberme explicado mas o menos bien imaginaros que es una page con tres bandas horizontales y la banda central de estas tres esta dividida en tres bandas verticales
Pagina HTML
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <link rel="stylesheet" type="text/css" href="estilo3.css" title="default" /> <title> Titulo </title> </head> <body> <div id="contenido"> <div id="cabecera"> CABECERA </div> <div id="contenedor"> <div id="menu4"> <ul> <li ><a href=''>Opcion 1</a></li> <li ><a href=''>Opcion 2</a></li> <li ><a href=''>Opcion 3</a></li> <li ><a href=''>Opcion 4</a></li> <li ><a href=''>Opcion 5</a></li> <li ><a href=''>Opcion 6</a></li> <li ><a href=''>Opcion 7</a></li> </ul> </div> <div id="principal"> PRINCIPAL </div> <div id="secundario"> SECUNDARIO </div> </div> <div id="pie"> PIE </div> </div> </body> </html>
Código HTML:
body,html{
height:95%;
width:98%;
}
#contenido {
position:absolute;
border:10px solid #340711;
width:100%;
height:100%;
}
#cabecera {
position:relative; top:0px;
border:2px solid red;
}
#pie {
position:absolute; bottom:0px;
width:100%;
clear: both;
background-color:#77A888;
border:1px solid red;
}
#contenedor {
position:absolute;
border:8px solid green;
margin:0px;
padding:0px;
}
#menu4 {
float: left;
background-color:#FFA888;
border:2px solid blue;
position:relative; top:0px;
margin:0px;
width:150px;
}
#principal {
border:1px solid #3407FF;
float: left;
background-color:#55FFAD;
position:relative; top:0px;
margin:0px;
padding:0px;
width:450px;
height:100%;
}
#secundario {
border:1px solid #3407FF;
float: left;
background-color:#99A888;
position:relative; top:0px;
margin:0px;
padding:0px;
width:200px;
height:100%;
}
Un saludo y gracias de antemano
rOV
