Ayuda para centrar capas

Acelsp · #1 (**permalink**) 08/02/2009, 15:25

Estoy haciendo el tipico diseño con capas en css del estilo: container principal y dentro: capa header centrada, capa menu opciones float left, capa main float right, capa pie clear both.

El problema que tengo es que quiero que la página me ocupe todo el alto del navegador. Para ello pongo height: 100% tanto en html, como en body y container. Hasta aqui todo bien. Cuando tengo el problema es cuando quiero que el menu de opciones me ocupe el 100% en su height, lo que provoca que se "desborde" por abajo justamente el mismo tamaño de la cabecera. Que casualidad, no?

Alguien sabe como se arregla esto?

jomaruro · #2 (**permalink**) 08/02/2009, 15:48

Hola:

Sería conveniente que pusieras tu código, tanto el CSS como el HTML, para poder ver dónde está el error.

Saludos.

Acelsp · #3 (**permalink**) 09/02/2009, 13:46

Pues aqui pongo mi codigo por si alguien me puede ayudar:

Código:

<div id="container">
	<!-- CABECERA -->
		<div id="header"></div>
	<!-- FIN CABECERA -->
			
	<!-- MENU OPCIONES -->
		<div id="sidebar">
			<div id="sidebarOpciones"></div>
			<div id="sidebarCuerpo"></div>
			<div id="sidebarContacto"></div>
		</div>
	<!-- FIN MENU OPCIONES -->
					
	<!-- CUERPO -->
	<div id="main"></div>
	<!-- FIN CUERPO -->
				
	<!-- PIE -->
		<div id="footer"></div>
	<!-- FIN PIE -->
			
</div>

Código:

html {
	height: 100%;
}

body {
	text-align: center;
	margin: 0px;
	height: 100%;
	color: #fff;
	font-family: sans-serif;
	font-size: 12pt;
	background: url(Images/Back.jpg) top left;
}

#container {
	width: 750px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	background-color: #8c8a8d;
	border: #000000 1px solid;
}

#header {
	background: url(Images/Cabecera.jpg) top left no-repeat;
	width: 750px;
	height: 230px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 204px;
                height: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
                background-color: #aa8a8d;
}

#sidebarOpciones {
	width: 204px;
	height: 162px;
	margin: 0px;
	padding: 0px;
}

#sidebarCuerpo {
	width: 204px;
	/*height: 100%;*/
                background: url(Images/LeftBack.jpg) repeat top left;
	margin: 0px;
	padding: 0px;
}

#sidebarContacto {
	width: 204px;
                background: url(Images/ContactInfo.jpg) no-repeat top left;
	height: 117px;
	margin: 0px;
	padding: 0px;
}

#main {
	float: right;
	width: 526px;
	height: 100%;
	margin: 0px 20px 20px 0px;
	padding: 0px;
}

#footer {
	clear: both;
	margin: 0px;
	padding: 0px;
}

tetsuo_256 · #4 (**permalink**) 10/02/2009, 04:30

Prueba con esto:

Código:

#container {
	left: 50%;
	position: absolute;
	height: 100%;
	width: 750px; /*Le ponemos el valor del ancho*/
	margin-left: -375px; /*Restamos la mitad de ancho para centrarlo horizontalmente*/
}

Código:

<div id="container">
	<!-- CABECERA -->
		<div id="header"></div>
	<!-- FIN CABECERA -->
			
	<!-- MENU OPCIONES -->
		<div id="sidebar">
			<div id="sidebarOpciones"></div>
			<div id="sidebarCuerpo"></div>
			<div id="sidebarContacto"></div>
		</div>
	<!-- FIN MENU OPCIONES -->
					
	<!-- CUERPO -->
	<div id="main"></div>
	<!-- FIN CUERPO -->
				
	<!-- PIE -->
		<div id="footer"></div>
	<!-- FIN PIE -->
</div>

Hogo · #5 (**permalink**) 10/02/2009, 09:00

Yo optaria por contener toda la web en un div con el ancho total q tendrá la web, y un alto automatico, a ese div le pones margin:0 auto; y se te centrará en el medio de la página. Y dentro, maquetas tranquilo con position relative o absolute.

jomaruro · #6 (**permalink**) 10/02/2009, 17:36

Cita:

Iniciado por Acelsp

Código:

html {
	height: 100%;
}

body {
	text-align: center;
	margin: 0px;
	height: 100%;
	color: #fff;
	font-family: sans-serif;
	font-size: 12pt;
	background: url(Images/Back.jpg) top left;
}

#container {
	width: 750px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	background-color: #8c8a8d;
	border: #000000 1px solid;
}

#header {
	background: url(Images/Cabecera.jpg) top left no-repeat;
	width: 750px;
	height: 230px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 204px;
        /* height: 100%; */
	float: left;
	margin: 0px;
	padding: 0px;
        background-color: #aa8a8d;
}

#sidebarOpciones {
	width: 204px;
	height: 162px;
	margin: 0px;
	padding: 0px;
}

#sidebarCuerpo {
	width: 204px;
	/*height: 100%;*/
        background: url(Images/LeftBack.jpg) repeat top left;
	margin: 0px;
	padding: 0px;
}

#sidebarContacto {
	width: 204px;
        background: url(Images/ContactInfo.jpg) no-repeat top left;
	height: 117px;
	margin: 0px;
	padding: 0px;
}

#main {
	float: right;
	width: 526px;
	/* height: 100%; */
	margin: 0px 20px 20px 0px;
	padding: 0px;
}

#footer {
	clear: both;
	margin: 0px;
	padding: 0px;
}

Prueba poniendo como comentarios los height:100% que te remarco en rojo, a mi en Firefox me funciona pero no tengo las imágenes.

Saludos.

Acelsp · #7 (**permalink**) 11/02/2009, 15:17

Os agradezco vuestra ayuda, pero no me ha funcionado ninguna de las soluciones que me proponéis. La solución de tetsuo_256 me lo deja todo igual que lo tenía. Lo de Hogo ya lo había probado con anterioridad sin éxito. Lo único que medio se aproxima es lo que comenta jomaruro, pero de ese modo me alarga la capa del pie, y yo la que quiero que alargue es la capa main.

Alguna otra idea? Es que ya no se que hacer.

Mikmoro · #8 (**permalink**) 11/02/2009, 17:31

¿Puedes hacer un dibujo de lo que quieres conseguir?

ssclamp · #9 (**permalink**) 11/02/2009, 18:10

No estoy seguro de lo que necesitas (comparto la duda con Mikmoro) pero si es este esquema

este código te lo construye:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de distribución</title>
<style type="text/css">
* {
	margin:0px; padding:0px;
}
html {
	height: 100%;
}
body {
	text-align: center;
	margin: 0px;
	height: 100%;
	color: #fff;
	font-family: sans-serif;
	font-size: 12pt;
}
#container {
	position: relative;
	top: 0px;
	left: 0px;
	width: 750px;
	height: 100%;
	margin: 0px auto;
	overflow: hidden;
	text-align: left;
	background-color: #ff00ff;
	border: #000000 1px solid;
}
#header {
	position:relative;
	top:0px;
	left: 0px;
	width: 750px;
	height: 230px;
	margin: 0px;
	padding: 0px;
	background-color: #ff0000;
}
#sidebar {
	width: 204px;
	position: absolute;
	top: 230px;
	left: 0px;
    height: 100%;
	float: left;
	margin: 0px;
	padding: 0px;
    background-color: #aa8a8d;
}
#sidebarOpciones {
	width: 204px;
	height: 162px;
	margin: 0px;
	padding: 0px;
	background-color: #00cc00;
}
#sidebarCuerpo {
	width: 204px;
	height: 100px;
	margin: 0px;
	padding: 0px;
}
#sidebarContacto {
	width: 204px;
	height: 117px;
	margin: 0px;
	padding: 0px;
	background-color: #484848;
}
#main {
	position:absolute;
	top: 230px;
	left: 162px;
	float: right;
	width: 100%;
	height: 100%;
	margin: 0px 20px 20px 0px;
	padding: 0px;
	background-color: #000fff;
}
#footer {
	clear: both;
	margin: 0px;
	padding: 0px;
}
</style>
</head>

<body>
<div id="container">
	<!-- CABECERA -->
		<div id="header">header</div>
	<!-- FIN CABECERA -->
			
	<!-- MENU OPCIONES -->
		<div id="sidebar">
			<div id="sidebarOpciones">sidebar-opciones</div>
			<div id="sidebarCuerpo">sidebar-cuerpo</div>
			<div id="sidebarContacto">sidebar-contacto</div>
		</div>
	<!-- FIN MENU OPCIONES -->
					
	<!-- CUERPO -->
	<div id="main">main</div>
	<!-- FIN CUERPO -->
				
	<!-- PIE -->
		<div id="footer">footer</div>
	<!-- FIN PIE -->
			
</div>
</body>

</html>

Saludos

Mikmoro · #10 (**permalink**) 11/02/2009, 18:30

Ah, pues si es así perfecto.
En ese caso un par de detalles:

1.- no pongas acentos en el title, o en IE6 la página desaparece por completo.
2.- el código CSS está muy bien, aunque lo podemos economizar bastante:

Cita:

Vamos, sólo esas dos pequeñas puntualizaciones, porque por lo demás está resuelto muy bien

Acelsp · #11 (**permalink**) 11/02/2009, 18:33

Lo que quiero hacer exactamente es la plantilla de la imagen, dividida en las capas sombreadas, de modo que las capas main y sidebar crezcan con el texto, manteniendo siempre un minimo del alto del navegador. Esta es la imagen:

img187.imageshack.us/my.php?image=plantillalj0.jpg (pegar en el navegador para ver)

EDITO: Mientras escribia estas lineas me habeis puesto el anterior ejemplo. Quiero hacer exactamente lo que se ve en la imagen de ssclamp, pero añadiendo el pie de página al final, y que las capas sidebar-cuerpo y main crezcan conforme el contenido del main aumente, y siempre que como mínimo ocupe el alto del navegador.

No he probado el ejemplo aun. En cuanto lo haga os comento que tal.

Gracias de nuevo por el interés.

Mikmoro · #12 (**permalink**) 11/02/2009, 18:40

¿Habías mencionado ya eso de "las capas main y sidebar crezcan con el texto, manteniendo siempre un minimo del alto del navegador" en algún momento? Quizá me lo he saltado.

ssclamp · #13 (**permalink**) 11/02/2009, 18:45

Mik, gracias por recordarme lo de los acentos, esto sólo lo hice de forma rápida para intentar dar una solución (aplicable también a lo de arreglar el css: era una prueba rápida pensada para que el usuario lo adapte y lo "recree" a su necesidad)

Saludos

Mikmoro · #14 (**permalink**) 11/02/2009, 18:54

Cita:

Iniciado por ssclamp

Mik, gracias por recordarme lo de los acentos, esto sólo lo hice de forma rápida para intentar dar una solución (aplicable también a lo de arreglar el css: era una prueba rápida pensada para que el usuario lo adapte y lo "recree" a su necesidad)

Saludos

Ah, sí, yo si uso el código de muestra del usuario que consulta no lo suelo optimizar en absoluto sino corregir el error sobre su propio código sin más, pero como en este caso me he puesto a mirarlo un poco, si iba a quedar ya como una buena solución, mejor algo más limpio y económico

Acelsp: con esa nueva aportación del 100% como mínimo, mira a ver si este ejemplo te sirve de orientación (el pie siempre abajo, como mínimo al 100% de la pantalla y crezca la columna que crezca, la otra también lo hará).

ssclamp · #15 (**permalink**) 11/02/2009, 19:07

Acelsp, el pie lo añades sustituyendo en el css el valor del footer por este:

#footer {
position:absolute;
left:0px;
bottom:0px;
width: 100%;
height: 40px;
background-color: #ffff00;
}

Saludos

ssclamp · #16 (**permalink**) 11/02/2009, 19:09

Ok, Mikmoro, de acuerdo.

Saludos

Acelsp · #17 (**permalink**) 12/02/2009, 15:12

UUUYYYY!!! Ya está casi a punto. Ahora lo que pasa es que el texto del main se pierde por el margen derecho, además de que ha perdido todo el formato de párrafos.

Os agradezco muchisimo vuestra ayuda. Para que os hagais una idea real, si no os importa, os mando el enlace de la web por privado para que podais ver como se está quedando y de paso echarle un vistazo al código.

Mikmoro · #18 (**permalink**) 12/02/2009, 16:40

Creo que si limpias este selector y lo dejas así:

Cita:

#main {height:100%;
margin:0px 20px 20px 204px;
padding:0px;
}

irá todo bien.

Puede que los párrafos hayan perdido el formato porque no hay ninguna declaración para ellos en la CSS.

Acelsp · #19 (**permalink**) 12/02/2009, 17:04

Pues de este modo sí que se queda todo totalmente centrado. Solo me falta solucionar el problema de los párrafos. Como puede ser que antes entre cada <p></p> me mostrara correctamente los párrafos y ahora no? Como se declaran para que vuelvan a aparecer como antes?

Tengo una duda. Lo he comprobado tanto en IE como en firefox, y en ambos el container parece ocupar un poco más del 100%. De hecho me aparece el scroll a la derecha, cuando no debería. Se puede impedir esto o incluso poner un pequeño margen arriba y abajo del container?

EDITO: Me he dado cuenta de un fallo. Dentro de la capa sidebar, la última subcapa llamada sidebarcontacto no aparece en la página. Se ve que se pierde por debajo.

Mikmoro · #20 (**permalink**) 12/02/2009, 17:17

Cita:

Iniciado por Acelsp

Pues de este modo sí que se queda todo totalmente centrado. Solo me falta solucionar el problema de los párrafos. Como puede ser que antes entre cada <p></p> me mostrara correctamente los párrafos y ahora no? Como se declaran para que vuelvan a aparecer como antes?

Pues no puedo saber cómo lo tenías antes, pero ya te he dicho que en la CSS no veo ninguna referencia al elemento "p".

Cita:

Iniciado por Acelsp

Tengo una duda. Lo he comprobado tanto en IE como en firefox, y en ambos el container parece ocupar un poco más del 100%. De hecho me aparece el scroll a la derecha, cuando no debería. Se puede impedir esto o incluso poner un pequeño margen arriba y abajo del container?

En el div principal (<div id="container">), 100% + borde de un px = 100%+ 2px = scroll vertical forzoso. Lógico, ¿no? Pon 94% en lugar de 100 (no en todas).

Cita:

Iniciado por Acelsp

EDITO: Me he dado cuenta de un fallo. Dentro de la capa sidebar, la última subcapa llamada sidebarcontacto no aparece en la página. Se ve que se pierde por debajo.

Esto ya no sé, porque el código de la solución era de ssclamp

Acelsp · #21 (**permalink**) 23/02/2009, 16:50

Retomo este tema, ya que afortunadamente se han solucionado los problemas de la web.

He estado mirando ejemplos por google y he encontrado uno que me ha ayudado muchísimo y casi lo tengo terminado. Este es el código:

Código:

body {
	text-align: center;
	margin: 0px;
	height: 100%;
	color: #fff;
	font-family: sans-serif;
	font-size: 12pt;
	background: url(Images/Back.jpg) top left;
}

#container {
	position: absolute;
	width: 750px;
	height: 100%;
	margin: 0px auto;
	margin-left:-375px;
	left: 50%;
	top: 0px;
	text-align: left;
	background: url(Images/Fondo.jpg) top left;
	border: #000000 1px solid;
	border-width:0px 1px 0px 1px;
}

#header {
	background: url(Images/Cabecera.jpg) top left no-repeat;
	width: 750px;
	height: 231px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 204px;
	float: left;
	margin: 0px;
	padding: 0px;
}

#main {
	float: left;
	width: 526px;
	margin: 0px 20px 20px 0px;
	padding: 0px;
}

#footer {
	clear: left;
	margin: 0px;
	padding: 0px;
	width: 750px;
	height: 26px;
	position:absolute;
	left:0px;
	bottom:0px;
	background: url(Images/BottomBarBack.gif) top left no-repeat;
}

Como decía, casi lo tengo. Mi único problema ahora es que si el main tiene demasiado texto se sale por abajo. Es decir, ya he conseguido alinear el pie a la parte de abajo, pero no consigo hacerlo crecer con el texto.

Creo que estoy a punto de terminarlo. Agradezco cualquier ayuda.

Mikmoro · #22 (**permalink**) 23/02/2009, 17:02

Cita:

Iniciado por Acelsp

Mi único problema ahora es que si el main tiene demasiado texto se sale por abajo. Es decir, ya he conseguido alinear el pie a la parte de abajo, pero no consigo hacerlo crecer con el texto.

Pero eso estaba ya resuelto en el ejemplo que te puse en el mensaje número 14 del hilo, ¿no?

Acelsp · #23 (**permalink**) 23/02/2009, 18:09

Usando la información del ejemplo que me comentas, en el que la principal diferencia es que el footer está fuera del container, consigo el mismo resultado que antes: me sale todo bien, pero al crecer el main se me desborda por abajo.

Código:

html {
	height: 100%;
}

body {
	text-align: center;
	margin: 0px;
	height: 100%;
	color: #fff;
	font-family: sans-serif;
	font-size: 12pt;
	background: url(Images/Back.jpg) top left;
}

#container {
	width: 750px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	background: url(Images/Fondo.jpg) top left;
	border: #000000 1px solid;
	border-width:0px 1px 0px 1px;
}

#header {
	background: url(Images/Cabecera.jpg) top left no-repeat;
	width: 750px;
	height: 231px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 204px;
	float: left;
	margin: 0px;
	padding: 0px;
}

#main {
	float: left;
	width: 526px;
	margin: 0px 20px 20px 0px;
	padding: 0px;
}

#footer {
	clear: left;
	margin: 0px;
	padding: 0px;
	width: 750px;
	height: 26px;
	background: url(Images/BottomBarBack.gif) top left no-repeat;
	margin-top: -26px;
}

Estoy desesperado con esto. Creo que la maquetación con CSS es demasiado complicada. Me estoy planteando maquetar con tablas y si no valida, pues mala suerte. Me aconsejais cambiarme a tablas?

Mikmoro · #24 (**permalink**) 24/02/2009, 06:24

¿Pero has visto que en el ejemplo eso no ocurre? pue entonces será algo que no estás tratando bien, ¿no? vamos, digo yo. Hazlo con detenimiento. Y si no, pon el código HTML y CSS que estás usando para intentarlo, a ver si alguien ve dónde está el problema (o un enlace donde verlo).

Acelsp · #25 (**permalink**) 10/03/2009, 17:14

Quería decir que gracias a la ayuda recibida en este foro, y en especial a Mikmoro ya he conseguido lo que quería. Tenías razón Mikmoro, tenía que mirar ese ejemplo con más detalle.

Por si a alguien le pudiera servir, pongo aqui los trucos que me han hecho conseguir lo que quería:
- En el container no puede faltar: min-height:100%; y height: auto!important; Que además también me ha servido para descubrir la utilidad de !important para el maldito IE6, y encima valida sin problemas en la w3c.
- El pie debe ir fuera del container con un margin-top negativo.
- Como consecuencia de que el pie vaya fuera del container, hay que incluir una capa corte con un clear al final del container y dentro de este.

Espero que esto pueda servirle a mucha gente. Gracias de nuevo por la ayuda.