Capas con float

falonpla · #1 (**permalink**) 29/01/2007, 13:19

Estoy con mi primera página hecha con capas y css, me ha salido mejor de lo que esperaba, pero tengo un problema, pego el código para que me ayudeis:

XHTML:

<body>
<div id="envoltorio">
<div id="cabecera">
</div>
<div id="botonera">
</div>
<div id="contenedor">
<div id=izda>
</div>
<div id=decha>
</div>
<div id=centro>
</div>
</div>
<div id="pie">
<p>pie de pagina</p>
</div>
</div>
</body>

CSS:

body {background-color:#FFCC66; text-align:center; margin:0px}

img {border:none;}

#envoltorio {width:756px; margin:0px auto; border-left:5px solid #000000; border-right:5px solid #000000; background-color:#FFFFFF;}

#cabecera {width:756px; height:157px; background-image:url(fondocab.png)}

#botonera {width:756px; height:56px;}

#contenedor{width:756px; margin:0px auto; background-color:#FFFFFF}

#izda{width:189; height:500px; float:left; background-color:#CCCCCC}

#decha{width:180; height:500px; float:right; background-color:#CCCCCC}

#centro{margin-left:189px; margin-right:180px; height:500px}

#pie {clear:both; text-align:center}

El problema lo tengo con las capas "izda" y "dcha", que no se me visualizan, abro el archivo en dreamweaver para ver donde han ido las capas y se han convertido en dos barritas sin ancho, cada una en su margen respectivo, la capa "centro" aparece posicionada correctamente. Decirme que hago mal por favor, lo puse así tomando otra página como ejemplo, en la que se ve correctamente. Gracias.

MikiBroki · #2 (**permalink**) 29/01/2007, 14:12

Te faltan las comillas en url, por lo demás a no ser que tengas algo raro por otro lado lo veo bien:

Código:

<html>
<body style="background-color:#FFCC66; text-align:center; margin:0px">
	
	<div id="envoltorio" style="{width:756px; margin:0px auto; border-left:5px solid #000000; border-right:5px solid #000000; background-color:#FFFFFF;">

		<div id="cabecera" style="width:756px; height:157px; background-image:url('fondocab.png')">cabecera</div>

		<div id="botonera" style="width:756px; height:56px;">
		</div>

		<div id="contenedor" style="width:756px; margin:0px auto; background-color:#FFFFFF">
			<div id=izda style="width:189; height:500px; float:left; background-color:#CCCCCC">izquierda</div>
			<div id=decha style="width:180; height:500px; float:right; background-color:#CCCCCC">derecha</div>
			<div id=centro style="margin-left:189px; margin-right:180px; height:500px">centro</div>		
		</div>

		<div id="pie" style="clear:both; text-align:center">pie de pagina</p></div>

	</div>
	
</body>
</html>

falonpla · #3 (**permalink**) 29/01/2007, 14:54

Pues si me dices que está bien, ya si que me has acabado de rayar, por que la página no se ve bien ni con el explorer ni con el firefox. Como veis le he dado un gris de fondo a las capas "izda" y "decha", pero en el navegador aparece toda la capa "contenedor" en blanco. Como ya he dicho antes, si abro el html con el dreamweaver, se ve la capa "centro" bien dibujada dentro de la capa "contenedor", pero las capas izquierda y derecha es como si estuvieran aplastadas contra sus respectivos bordes. No entiendo que para. Gracias por contestar.

MikiBroki · #4 (**permalink**) 29/01/2007, 15:19

copiando y pegando el código que te he pasado no lo ves bien en el navegador ??

falonpla · #5 (**permalink**) 29/01/2007, 16:03

Con el que has puesto tu si, pero por qué con el mío no????
Lo que quiero es tener por un lado el xhtml y por otro el css.

Mikmoro · #6 (**permalink**) 29/01/2007, 17:13

Te falta el punto y coma de cerrar de la mayoría de los estilos:

body {background-color:#FFCC66; text-align:center; margin:0px;}

img {border:none;}

#envoltorio {width:756px; margin:0px auto; border-left:5px solid #000000; border-right:5px solid #000000; background-color:#FFFFFF;}

#cabecera {width:756px; height:157px; background-image:url(fondocab.png);}

#botonera {width:756px; height:56px;}

#contenedor{width:756px; margin:0px auto; background-color:#FFFFFF;}

#izda{width:189; height:500px; float:left; background-color:#CCCCCC;}

#decha{width:180; height:500px; float:right; background-color:#CCCCCC;}

#centro{margin-left:189px; margin-right:180px; height:500px;}

#pie {clear:both; text-align:center;}

Pruébalo así a ver qué pasa.

Mikel.