Colocar capas (ayudadme porfavor)

SubZero_mb · #1 (**permalink**) 23/11/2006, 16:23

Estoy ya deseperado, acabo de empezar con las capas en vez de cn las tipicas tablas de diseño, y ya no se k hacer xo no consigo cuadrar el diseño. el codigo es este:

Código:

<html>
<head>
<style type="text/css">
#contenedor{
	text-align: left;
	width: 960px;
	margin: auto;
	background-color: #000000;
} 
#cuerpo{
	margin: 0 0 0 0px;
	color: #54627d;
} 
#lateral{
	margin: 0 0 0 0px;
	background-color: #FFFF00;
	float:left;
	width: 190px;
	height: 340px;
} 
#otrolado{
	margin: 0 0 0 0px;
	width: 10px;
	float: right;
	height: 340px;
	background-color: #FF0000;
} 
#principal{
	margin: 0 0 0 190px;
	background-color: #aaaaff;
	width: 760px;
}  
</style>
</head>

<body>
<div id="contenedor"> 
    <div id="cuerpo"> 
       <div id="lateral"> 
       </div> 
       <div id="otrolado"> 
       </div> 
      <div id="principal">
<br><br><br>hola
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
       </div> 
  </div> 
</div> 
</body>
</html>

Podeis probar el codigo aqui, copiarlo o pegarlo en el area de la izq y podeis ver el resultado a la derecha.

Mi problema es que quiero que la capa principal (en color azul) este entre las capas laterales, xo no hay manera, siempre va para abajo :(

Por favor echadme una mano. Muxas gracias

Mikmoro · #2 (**permalink**) 23/11/2006, 17:14

Perdona pero no he debido entender tu cuestión. Yo veo la capa azul entre las otras, en el centro y alineada arriba y abajo. Supongo que es que no he entendido qué es lo que quieres conseguir.
Mikel.

SubZero_mb · #3 (**permalink**) 23/11/2006, 17:20

Es justo eso, xo ese resutado solo lo he visto en el opera, en donde se ve perfectamente, sinembargo en el explorer o en el link k os puse se ve la capa principal justo debajo de las laterales.

Mikmoro · #4 (**permalink**) 23/11/2006, 17:44

El código que has mandado en Firefox se ve como tú querías.
Si quieres que el tamaño vertical sea estático, prueba este código:

Código:

<html>
<head>
  <style type="text/css">
#contenedor { margin: auto;
text-align: left;
width: 960px;
height: 420px;
background-color: rgb(0, 0, 0);
}
#cuerpo { margin: 0pt 0pt 0pt 0px;
color: rgb(84, 98, 125);
}
#lateral { margin: 0pt 0pt 0pt 0px;
background-color: rgb(255, 255, 0);
float: left;
width: 190px;
height: 340px;
}
#otrolado { margin: 0pt 0pt 0pt 0px;
width: 10px;
float: right;
height: 340px;
background-color: rgb(255, 0, 0);
}
#principal { margin: 0pt 0pt 0pt 0px;
background-color: rgb(170, 170, 255);
width: 760px;
float: left;
height: 420px;
}
  </style>
  <title></title>
</head>
<body>
<div id="contenedor">
<div id="cuerpo">
<div id="lateral"> </div>
<div id="otrolado"> </div>
<div id="principal"><br />
<br />
<br />
hola
</div>
</div>
</div>
</body>
</html>

Sólo he añadido un height de 420px en las capas contendor y principal, y más importante, float: left; en la capa principal. Se ve bien tanto en IE como FF.

Si quieres que el alto sea dinámico según tu contenido, habrá que buscar otra cosa compatible a los navegadores.
Mikel.

SubZero_mb · #5 (**permalink**) 23/11/2006, 19:57

Joe tio muxisimas gracias, esta perfecto!! Lo veo bien tanto en explorer como en opera y ya me has dicho tu k tb en firefox. Efectivamente kiero k el alto sea dinamico, k crezca si el tamaño de lo k tiene dentro aumenta, xo en el diseño k m has dado funciona, aumenta la capa contenedora con el crecimiento de la principal. De nuevo muxisimas gracias

Mikmoro · #6 (**permalink**) 24/11/2006, 00:41

Me alegro de que sea lo que necesitas, pero recuerda una cosa: el coñazo de la distinta interpretación de las CSS por los distintos navegadores no acaba nunca, y siempre será prudente que te asegures cómo se ve, porque en este caso concreto, por ejemplo, en Firefox la capa no crece, al tener un height determinado. SI quieres que vaya bien en FF, deberás crecer las dos capas si tu contenido sobrepasa su tamaño.
Hasta otra.
Mikel.

SubZero_mb · #7 (**permalink**) 24/11/2006, 09:38

Joe pues es verdad, esto es una p..a mierda. Muxo rollo de la accesibilidad y las ventajas de usar capas, y yo lo unico k veo son inconvenientes. Cada navegador muestra el contenido como le da la gana.Kedara muy chulo l codigo sin todos esos table y td tr.... xo de k te vale si siempre vamos estar con el miedo de k no se vea bien en otro navegador?? Si alguien mas puede ayudarme se lo agradeceria porque dentro de la capa principal va un include y cada vez tiene un alto diferente asi k no puedo definir los altos de las capas. Sino lo consigo me da que vuelvo con las tablas y esta. Muchas gracias Mikel.

Mikmoro · #8 (**permalink**) 24/11/2006, 13:22

Pues mira, me he picado y creo que he encontrado una solución al asunto de que la altura sea dinámica. Mira este código.

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
#contenedor { margin: auto;
width: 960px;
background-color: rgb(0, 0, 0);
}
#cuerpo { margin: auto;
width: 960px;
color: rgb(84, 98, 125);
background-color: rgb(0, 0, 0);
}
#lateral { margin: 0pt 0pt 0pt 0px;
background-color: rgb(255, 255, 0);
float: left;
width: 190px;
height: 340px;
}
#otrolado { margin: 0pt 0pt 0pt 0px;
width: 10px;
height: 340px;
background-color: rgb(255, 0, 0);
position: relative;
float: right;
}
#principal { margin: -340px 10px 0pt 190px;
background-color: rgb(170, 170, 255);
width: 760px;
}
.clear {
clear: both;
}
  </style>
  <title>111</title>
</head>
<body>
<div id="cuerpo">
<div id="lateral"></div>
<div id="otrolado"></div>
<br class="clear" />
<div id="principal"><br />
<br />
<br />
<br />
hola
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</body>
</html>

Lo que he hecho ha sido hacer una nueva clase (clear) para meterle un corte al div central y luego mandarlo arriba dándole un margen negativo igual al tamaño de los otros divs. Funciona bien en firefox y IE.

Como dices, qué coñazo el asunto de los navegadores. ¿Para qué demonios está el W3C?

Por cierto: yo no tengo ningún problema en maquetar con tablas. No sé si es moda, que es mucho peor o lo que sea, pero siempre lo he hecho y funciona en general de maravilla.
Mikel.

SubZero_mb · #9 (**permalink**) 24/11/2006, 15:33

Joe maxo te mereces el cielo jejejej. Pues si funciona en IE, en firefox (he acabado instalandolo para hacer comprobaciones) y en Opera, ya paso de probar mas navegadores k me da miedo jejeje
Pues si tio, yo tb he diseñado toda la vida en tablas y me va muy bien, pero primero me llama la atencion lo limpio k keda el codigo y lo separado k keda todo y en segundo estoy keriendo hacer un sitio de servicios de blogs gratuitos y keria hacerlo lo mejor posible, y como tu dices las capas estan de moda. De nuevo muxas gracias