Foros del Web » Creando para Internet » CSS »

problema maquetando ¡¡help meee!!

Estas en el tema de problema maquetando ¡¡help meee!! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/06/2008, 10:17
 
Fecha de Ingreso: marzo-2006
Mensajes: 13
Antigüedad: 11 años, 8 meses
Puntos: 0
problema maquetando ¡¡help meee!!

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
  #2 (permalink)  
Antiguo 09/06/2008, 12:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema maquetando ¡¡help meee!!

Te has explicado perfectamente (que todas las explicaciones fueran así).

A ver si esto se parece a lo que quieres hacer:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>roverol</title>
<style type="text/css" media="screen">
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 {
border:8px solid green;
margin:0px;
padding:0px;
height: 89%;
}
#menu4 {
float: left;
background-color:#FFA888;
border:2px solid blue;
position:relative; top:0px;
margin:0px;
width:150px;
height:100%;
}
#principal {
border:1px solid #3407FF;
background-color:#55FFAD;
margin:0px;
padding:0px;
height:100%;
}
#secundario {
border:1px solid #3407FF;
float: right;
background-color:#99A888;
margin:0px;
padding:0px;
width:200px;
height:100%;
}
</style>
</head>
<div id="contenido">

<div id="cabecera">
CABECERA
</div>

<div id="contenedor">
<div id="secundario">
SECUNDARIO
</div>
<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>
<div id="pie">
PIE
</div>
</div>
</body>
</html>
Mikel.
  #3 (permalink)  
Antiguo 09/06/2008, 12:51
 
Fecha de Ingreso: junio-2008
Mensajes: 93
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: problema maquetando ¡¡help meee!!

Al #menu4 no le has puesto height:100%; No sé si los otros dos te funcionan, por lo que dices parece que no. Has probado a poner en lugar de height, min-height, para decirle al div la altura mínima que debe tener?

Un truco para la altura es ponerle un padding gigante, del estilo padding-bottom: 30000px; y un margin negativo equivalente, margin-bottom: -30000px; así se adaptará al div contenedor. No es muy ortodoxo pero funciona.
  #4 (permalink)  
Antiguo 10/06/2008, 02:35
 
Fecha de Ingreso: marzo-2006
Mensajes: 13
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: problema maquetando ¡¡help meee!!

Gracias por contestar tan rapidamente.
Lo que queria que resultara es exactamente lo que ha puesto Mikmoro lo he probado y funciona.

Tengo que probar lo que me comenta Wing para ver otra opcion

lo que si he cambiado de lo que me comenta Mikmoro es el width de la capa menu4 y secundario para que se ajuste al ancho de la page

Gracias de nuevo y como se suele decir ya me puedo acostar hoy que he aprendido una cosa nueva jeje

saludos

rOV
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:21.