Hola gente llevo poco tiempo o casi ninguno con esto de la maquetacion he mirado el foro por arriba y por abajo y no consigo darle forma a lo siguiente:
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>
CSS asociado 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%;
}
En fin he buscado por toda la web y no consigo solucionarlo alguna idea
Un saludo y gracias de antemano
rOV