Foros del Web » Creando para Internet » CSS »

Ayuda para centrar capas

Estas en el tema de Ayuda para centrar capas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/02/2009, 15:25
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Ayuda para centrar capas

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?
  #2 (permalink)  
Antiguo 08/02/2009, 15:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Ayuda para centrar capas

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 09/02/2009, 13:46
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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;
}
  #4 (permalink)  
Antiguo 10/02/2009, 04:30
 
Fecha de Ingreso: diciembre-2007
Mensajes: 29
Antigüedad: 16 años, 3 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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>
  #5 (permalink)  
Antiguo 10/02/2009, 09:00
Avatar de Hogo  
Fecha de Ingreso: febrero-2008
Ubicación: Asturias
Mensajes: 29
Antigüedad: 16 años, 1 mes
Puntos: 3
Respuesta: Ayuda para centrar capas

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.
  #6 (permalink)  
Antiguo 10/02/2009, 17:36
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Ayuda para centrar capas

Cita:
Iniciado por Acelsp Ver Mensaje

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.

  #7 (permalink)  
Antiguo 11/02/2009, 15:17
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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.
  #8 (permalink)  
Antiguo 11/02/2009, 17:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

¿Puedes hacer un dibujo de lo que quieres conseguir?
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 11/02/2009, 18:10
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 5 meses
Puntos: 10
Respuesta: Ayuda para centrar capas

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
  #10 (permalink)  
Antiguo 11/02/2009, 18:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

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:
<style type="text/css">
* { margin:0px; padding:0px;}
html, body, #container, #sidebar, #main {height: 100%;}
body {text-align: center;
color: #fff;
font-family: sans-serif;
font-size: 12pt;
}
#container {position: relative;
width: 750px;
margin: 0px auto;
overflow: hidden;
text-align: left;
background-color: #ff00ff;
border: #000 1px solid;
}
#header {position:relative;
width: 750px;
height: 230px;
background-color: #ff0000;
}
#sidebar {width: 204px;
position: absolute;
top: 230px;
left: 0px;
float: left;
background-color: #aa8a8d;
}
#sidebarOpciones {width: 204px;
height: 162px;
background-color: #00cc00;
}
#sidebarCuerpo {width: 204px;
height: 100px;
}
#sidebarContacto {width: 204px;
height: 117px;
background-color: #484848;
}
#main {position:absolute;
top: 230px;
left: 162px;
float: right;
width: 100%;
margin: 0px 20px 20px 0px;
padding: 0px;
background-color: #000fff;
}
#footer {clear: both;}
</style>
Vamos, sólo esas dos pequeñas puntualizaciones, porque por lo demás está resuelto muy bien
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 11/02/2009, 18:33
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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.

Última edición por Acelsp; 11/02/2009 a las 18:40
  #12 (permalink)  
Antiguo 11/02/2009, 18:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

¿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.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 11/02/2009, 18:45
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 5 meses
Puntos: 10
Respuesta: Ayuda para centrar capas

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
  #14 (permalink)  
Antiguo 11/02/2009, 18:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

Cita:
Iniciado por ssclamp Ver Mensaje
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á).
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 11/02/2009, 19:07
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 5 meses
Puntos: 10
Respuesta: Ayuda para centrar capas

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
  #16 (permalink)  
Antiguo 11/02/2009, 19:09
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 5 meses
Puntos: 10
Respuesta: Ayuda para centrar capas

Ok, Mikmoro, de acuerdo.

Saludos
  #17 (permalink)  
Antiguo 12/02/2009, 15:12
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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.
  #18 (permalink)  
Antiguo 12/02/2009, 16:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

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.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 12/02/2009, 17:04
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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.
  #20 (permalink)  
Antiguo 12/02/2009, 17:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

Cita:
Iniciado por Acelsp Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 23/02/2009, 16:50
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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.
  #22 (permalink)  
Antiguo 23/02/2009, 17:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

Cita:
Iniciado por Acelsp Ver Mensaje
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?
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 23/02/2009 a las 17:07
  #23 (permalink)  
Antiguo 23/02/2009, 18:09
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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?
  #24 (permalink)  
Antiguo 24/02/2009, 06:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Ayuda para centrar capas

¿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).
__________________
Visita mi nueva web idplus.org
  #25 (permalink)  
Antiguo 10/03/2009, 17:14
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Ayuda para centrar capas

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.
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 00:01.