On 12/12/05, Bernat Lleonart <[EMAIL PROTECTED]> wrote:
>
> Hola,
>
> Tengo este html:
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd";>
> <html>
> <head>
> <title>...</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> <style type="text/css">
> #container {
> width: 770px;
> margin-left: auto;
> margin-right: auto;
> }
>
> #header {
> padding: 0;
> margin: 0;
> background-color: silver;
> height: 215px;
> }
>
> #content {
> margin-left: 150px;
> margin-right: 178px;
> padding-left: 40px;
> padding-right: 30px;
> background-color: #ccc;
> }
>
> #left {
> float: left;
> width: 150px;
> margin: 0;
> padding: 0;
> background-color: rgb(235, 235, 235);
> }
>
> #right {
> float: right;
> width: 178px;
> margin: 0;
> padding: 0;
> background-color: rgb(235, 235, 235);
> }
>
> #footer {
> clear: both;
> height: 25px;
> padding: 0;
> margin: 0;
> background-color: rgb(213, 219, 225);
> }
> </style>
> </head>
> <body>
> <div id="container">
> <div id="header">
> <h1>header</h1>
> </div>
>
> <div id="left">
> <p>left</p>
> </div>
>
> <div id="right">
> <p>right</p>
> </div>
>
> <div id="content">
> <p>El ministro de Asuntos Exteriores, Miguel Angel
> Moratinos, ha
> asegurado hoy que el Gobierno no tuvo conocimiento de un vuelo de la
> CIA que hizo escala en Barcelona a finales de octubre, con destino a
> la república caucásica de Azerbaiyán. "De este avión, que parece ser
> que llegó en el mes de octubre, no teníamos noticia en mi
> comparecencia de noviembre y por eso no informé", ha explicado
> Moratinos a su llegada a un consejo de la UE en Bruselas.</p>
> </div>
>
> <div id="footer">
> <p>footer</p>
> </div>
> </div>
> </body>
> </html>
>
>
>
>
> Y no sé por qué me aparece un espacio en blanco por encima del div
> "content", y por encima del "footer".
> Por otro lado, sería posible mantener esta estructura sin tener que
> poner márgenes a la izquierda y a la derecha del div "content"?
Pues no sé, si te refieres a que el #content no se meta por debajo de #left
y #right... pues sí, al #content le das un overflow: hidden y santas
pascuas, te puedes olvidar de los márgenes laterales.
Esto para los navegadores, a IE además le tendrás que dar el height: 1% y
deshacerte del molesto bug "IE Three Pixel Text-Jog" con unos sabios
márgenes negativos en cada contenedor lateral.
La cosa quedaría así:
#content {
padding-left: 40px;
padding-right: 30px;
background-color: #ccc;
overflow: hidden;
_height: 1%;
}
#left {
float: left;
width: 150px;
margin: 0;
_margin-right: -3px;
padding: 0;
background-color: rgb(235, 235, 235);
}
#right {
float: right;
width: 178px;
margin: 0;
_margin-left: -3px;
padding: 0;
background-color: rgb(235, 235, 235);
}
Evidentemente, las propiedades que tienen antepuesto un guión bajo son
UNICAMENTE para IE y más específicamente para IE/Win. Si quieres que no
interfieran con IE/Mac tendrás que utilizar el "Backslash Hack" para
ocultárselo, pero eso ya te lo dejo a ti ;)
Por cierto, no lo pruebes en Opera 7.5 que no churrufla, afortunadamente la
última versión, que además es gratis sí que lo traga. Si quieres algo que le
guste a Opera 7.5 puedes probar con display: table.
Lamento lo inconcluso y precipitado de esta respuesta, pero es que es eso,
precipitada porque me tengo que ir corriendo.
Un saludo, David Merino.
Muchas gracias.
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
