Distribuir 3 capas 1 con ancho fijo y las otras variable

Ruyman · #1 (**permalink**) 28/01/2008, 05:32

Lo que quiero hacer parece sencillo pero ahora mismo no logro dar con la solución y tal vez no sea tan sencillo o yo me lo estoy planteando mal.

Básicamente lo que quiero es que dentro de una capa contenedora meter 3 capas, una que iría al centro y con un ancho fijo (en esa va a ir una imagen estática), una capa a la izquierda y la otra a la derecha con ancho variable y una imagen de fondo que se repite que será la continuación de la que esta centrada. El ancho de las capas laterales deben ocupar todo el espacio libre por ambos lados.

Lo único que he conseguido es que las tres capas estén en la misma linea, ocupando su posición y centrar la capa central, pero no se como darle el ancho adecuado a las capas laterales. ¿se puede hacer? ¿hay otras alternativas?

Resumo el código para que se vea mejor.

Código HTML:

<div id="cabcontenedor">

<div id="cabeceraizq">&nbsp;</div>

<div id="cabeceracen">
<img src="logo.jpg" />
</div>
				 
<div id="cabeceradrc">&nbsp;</div>

</div>

CSS

Código:

div#cabcontenedor{
width:100%;
}

div#cabeceraizq{
height:143px;
float:left;
}

div#cabeceracen{
width:780px;
height:143px;
position:absolute;
left:50%;
margin-left:-390px;//con esto centro el div
}

div.cabeceradrc{
height:143px;
float:right;
}

Gracias ;)

metacortex · #2 (**permalink**) 28/01/2008, 07:00

1) Si vas a tener un contenedor con un ancho al 100% mejor no tengas nada. Los navegadores toman el 100% por defecto.

2) En tu código hay un mal manejo de IDs y clases. En el CSS colocas clases y en el HTML IDs.

3) El ancho fijo para tu sección central provocará que las columnas se desajusten apenas la ventana cambie de tamaño. La solución es aplicarle también un ancho relativo y overflow: hidden para que tu imagen se oculte en la capa. Aquí está el código arreglado:

Código:

div#cabcontenedor{
	/* Nada */
}

div#cabeceraizq {
	width: 10%;
	height:143px;
	float:left;
}

div#cabeceracen {
	width:80%;
	overflow: hidden;
	height:143px;
	background: url(logo.jpg) left top #efefef no-repeat;
	float: left;
}

div.cabeceradrc {
	width: 10%;
	height:143px;
	float:left;
}

Para IE:

Código HTML:

<!--[if lte IE 6]>
<style type="text/css">
div#cabeceracen {
	width:79%;
}
</style>
<![endif]-->

Y tu estructura queda casi igual

Código HTML:

<div id="cabcontenedor">
  <div id="cabeceraizq"></div>
  <div id="cabeceracen"></div>
  <div class="cabeceradrc"></div>
</div>

Ruyman · #3 (**permalink**) 28/01/2008, 10:12

Muchas gracias metacortex aunque no me sirve, por varios motivos, por ejemplo si el 80% de la capa central no diera para mostrar todo el logo, no lo mostaría, o en el caso de que ese 80% fuera mas grande que el logo pues ya dejaría ese espacio en blanco.
El problema con los ids y las clases fue porque en mi código lo tenia como clases y al pasarlo aquí me di cuenta que lo debería haber puesto como ids y lo corregí pero solo en el html

De todas formas tus indicaciones me sirvieron de pista y al final la solución era fácil, posicione de manera absoluta y con z-index, a las dos capas laterales les pues el mismo z-index y con el 50% de ancho cada una, y por último puse la capa central que lleva el logo con un z-index mayor, o sea encima de las anteriores, y centrada.

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=iso-8859-1" />
<title>3divs</title>
<style>
div#cabcontenedor{
	/* Nada */
}

div#cabeceraizq {
	width: 50%;
	height:143px;
	position:absolute;
	background:#9900FF;
	z-index:1;
}

div#cabeceracen {
	height:143px;
	position:absolute;
	z-index:10;
	left:50%;
	margin-left:-390px;/*Este valor es la mitad del ancho de logo.jpg y es para centrarlo*/
	
}

div#cabeceradrc {
	width: 50%;
	height:143px;
	background:#006633;
	position:absolute;
	right:0;
	z-index:1;
}
</style>
</head>

<body>

<div id="cabcontenedor">
  <div id="cabeceraizq"></div>
  <div id="cabeceracen"><img src="logo.jpg" /></div>
  <div id="cabeceradrc"></div>
</div>

</body>
</html>

Saludos ;)

metacortex · #4 (**permalink**) 28/01/2008, 10:32

El problema con el posicionamiento absoluto es que el resto del contenido no respeta la ubicación de esas capas (se "monta" encima de ellas), a menos que las encierres en un contenedor, lo cual me parece trabajar doble para conseguir el mismo objetivo.

Creo que en tu caso específico (cabecera de 3 columnas, las 2 exteriores con ancho relativo) convendría colocar todos los anchos relativos, o todos los anchos fijos.

Cita:

si el 80% de la capa central no diera para mostrar todo el logo, no lo mostaría

Cuestión de adaptar el diseño a tus necesidades y no al contrario ¿Es el logo lo que mide 780px o es una imagen de cabecera que a su vez incluye el logo? Existen muchas formas de adaptar ese aspecto sin perder la estética.

Cita:

o en el caso de que ese 80% fuera mas grande que el logo pues ya dejaría ese espacio en blanco.

Por eso la info que puse del fondo en tu CSS:

background: url(logo.jpg) left top #efefef no-repeat;

Ese hexadecimal es el color que va a tener el fondo en caso de que la imagen se haga insuficiente. Con un degradado desde la imagen hacia ese u otro color de tu gusto es suficiente para compensar y que aún siga luciendo excelente.

Saludos.

Ruyman · #5 (**permalink**) 28/01/2008, 12:54

Al principio no entendía a que te referías cuando me decías el problema del posicionamiento absoluto, hasta que lo probé en la web de verdad, jeje.

El problema es que es un diseño continuo, y además en el medio en realidad lo que va es un flash, puse una imagen en principio por simplificar el código.

No termino de ver los problemas de hacerlo tal como lo dije, de momento lo he montado así y veo que va bien, lo del posicionamiento lo solucioné como dijiste incluyéndolo dentro de otro, pero me gustaría saber si puede tener algún problema.

Adjunto una muestra del diseño, la lineas negras las puse para que vea donde se divide y la parte central no esta terminada.