El ejemplo que he puesto es una versión reducida al mínimo de una
plantilla de un gestor de contenidos y se supone que el ancho es
variable dentro de unos límites. De todas formas, me valdría dejarlo
fijo, lo probaré. También puedo usar otras soluciones como flotarlo
todo o añadir un elemento que limpie los flotantes. Pero sobre todo lo
que me interesa es saber si este comportamiento de Opera tal y como
está el código es normal y si tiene fácil solución. En caso contrario
el usar el método de overflow:hidden para limpiar flotantes perdería
toda su efectividad.
Gracias.
El 11/02/09, Ignacio Ricci escribió:
> Probaste agregarle un ancho al contenedor aparte de overflow hidden?
>
> 2009/2/10 Daniel Navarro
>
>> Tengo un problema de diseño que no logro resolver para Opera. Estoy usando
>> Opera 9.63 en WinVista 32bits.
>>
>> Cuando un elemento contiene flotantes en su interior, éstos pueden
>> sobresalir de los límites de su contenedor. Una solución que se puede
>> adoptar para que el contenedor se ensanche con los flotantes consiste en
>> establecer la propiedad clear:both a algún elemento dentro del contenedor
>> que esté detrás de los flotantes. Si no se dispone de ninguno, se puede se
>> colocar de forma artificial en el código html, bien directamente (ej. > style="clear:both">, bien mediante el pseudoelemento :after en las css.
>>
>> Existen otros métodos como se explica en
>> http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
>>
>> En el ejemplo que más abajo os muestro, estoy usando el método de Paul
>> O'Brien que consiste en establecer overflow:auto en el contenedor. También
>> vale overflow:hidden.
>>
>> Sin embargo, en cuanto establezco esta declaración Opera calcula de forma
>> diferente los márgenes y el contenido se estrecha demasiado. Podéis probar
>> a
>> incluir o no overflow:hidden para ver su efecto.
>>
>> Por último, aunque no es de mi agrado, he intentado usar el hack para
>> Opera
>> html:first-child #contenido {
>>margin: 0;
>> }
>> pero no funciona ¿?
>>
>> ¿alguna idea?
>>
>>
>> *CÓDIGO HTML*
>>
>> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
>> http://www.w3.org/1999/xhtml"; xml:lang="es-ES" lang="es-ES">
>>
>>
>> Problema Opera
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> Problema en Opera 9 con overflow:hidden
>> El div#content, con fondo rojizo, debe de extenderse para incluir a los
>> dos
>> párrafos flotantes.
>> Para ello, se ha establecido overflow: hidden.
>> Se ha dejado espacio para las barras laterales estableciendo margin: 0
>> 250px;
>>
>>
>> Párrafo flotante a la izquierda
>>
>>
>>
>> Párrafo flotante a la derecha
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> *CSS*
>>
>> /* Anula rellenos y márgenes predeterminados del navegador */
>> * {
>> padding: 0;
>> margin: 0;
>> }
>>
>> #content {
>> overflow: hidden; /* Declaración con la que se produce el problema en
>> Opera */
>> margin: 0 220px; /* espacio para alojar las barras laterales.
>> Opera lo calcula mal si se establece overflow:hidden
>> */
>> background-color: #fcc;
>> border: 2px solid red;
>> }
>>
>> html:first-child #content {
>> margin: 0; /* Este hack para Opera no funciona ¿por qué? */
>> }
>>
>>
>> p#p1 {
>> float: left;
>> width: 250px;
>> height: 400px;
>> background-color: #ccf;
>> }
>>
>> p#p2 {
>> float: right;
>> width: 250px;
>> height: 400px;
>> background-color: #cfc;
>> }
>>
>>
>> #bar1 {
>> float: left;
>> width: 200px;
>> height: 100px;
>> background: #eee;
>> }
>>
>>
>> #bar2 {
>> float: right;
>> width: 200px;
>> height: 100px;
>> background: #eee;
>> }
>>
>>
>>
>> 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://lists.ovillo.org/mailman/listinfo/ovillo
>>
>
>
>
> --
> ↓ Ignacio Ricci
> www.ignacioricci.com
> ___
> 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://lists.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://lists.ovillo.org/mailman/listinfo/ovillo
Probaste agregarle un ancho al contenedor aparte de overflow hidden?
2009/2/10 Daniel Navarro
> Tengo un problema de diseño que no logro resolver para Opera. Estoy usando
> Opera 9.63 en WinVista 32bits.
>
> Cuando un elemento contiene flotantes en su interior, éstos pueden
> sobresalir de los límites de su contenedor. Una solución que se puede
> adoptar para que el contenedor se ensanche con los flotantes consiste en
> establecer la propiedad clear:both a algún elemento dentro del contenedor
> que esté detrás de los flotantes. Si no se dispone de ninguno, se puede se
> colocar de forma artificial en el código html, bien directamente (ej. style="clear:both">, bien mediante el pseudoelemento :after en las css.
>
> Existen otros métodos como se explica en
> http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
>
> En el ejemplo que más abajo os muestro, estoy usando el método de Paul
> O'Brien que consiste en establecer overflow:auto en el contenedor. También
> vale overflow:hidden.
>
> Sin embargo, en cuanto establezco esta declaración Opera calcula de forma
> diferente los márgenes y el contenido se estrecha demasiado. Podéis probar
> a
> incluir o no overflow:hidden para ver su efecto.
>
> Por último, aunque no es de mi agrado, he intentado usar el hack para Opera
> html:first-child #contenido {
>margin: 0;
> }
> pero no funciona ¿?
>
> ¿alguna idea?
>
>
> *CÓDIGO HTML*
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> http://www.w3.org/1999/xhtml"; xml:lang="es-ES" lang="es-ES">
>
>
> Problema Opera
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> Problema en Opera 9 con overflow:hidden
> El div#content, con fondo rojizo, debe de extenderse para incluir a los dos
> párrafos flotantes.
> Para ello, se ha establecido overflow: hidden.
> Se ha dejado espacio para las barras laterales estableciendo margin: 0
> 250px;
>
>
> Párrafo flotante a la izquierda
>
>
>
> Párrafo flotante a la derecha
>
>
>
>
>
>
>
>
>
> *CSS*
>
> /* Anula rellenos y márgenes predeterminados del navegador */
> * {
> padding: 0;
> margin: 0;
> }
>
> #content {
> overflow: hidden; /* Declaración con la que se produce el problema en
> Opera */
> margin: 0 220px; /* espacio para alojar las barras laterales.
> Opera lo calcula mal si se establece overflow:hidden
> */
> background-color: #fcc;
> border: 2px solid red;
> }
>
> html:first-child #content {
> margin: 0; /* Este hack para Opera no funciona ¿por qué? */
> }
>
>
> p#p1 {
> float: left;
> width: 250px;
> height: 400px;
> background-color: #ccf;
> }
>
> p#p2 {
> float: right;
> width: 250px;
> height: 400px;
> background-color: #cfc;
> }
>
>
> #bar1 {
> float: left;
> width: 200px;
> height: 100px;
> background: #eee;
> }
>
>
> #bar2 {
> float: right;
> width: 200px;
> height: 100px;
> background: #eee;
> }
>
>
>
> 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://lists.ovillo.org/mailman/listinfo/ovillo
>
--
↓ Ignacio Ricci
www.ignacioricci.com
___
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://lists.ovillo.org/mailman/listinfo/ovillo
Tengo un problema de diseño que no logro resolver para Opera. Estoy usando
Opera 9.63 en WinVista 32bits.
Cuando un elemento contiene flotantes en su interior, éstos pueden
sobresalir de los límites de su contenedor. Una solución que se puede
adoptar para que el contenedor se ensanche con los flotantes consiste en
establecer la propiedad clear:both a algún elemento dentro del contenedor
que esté detrás de los flotantes. Si no se dispone de ninguno, se puede se
colocar de forma artificial en el código html, bien directamente (ej. , bien mediante el pseudoelemento :after en las css.
Existen otros métodos como se explica en
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
En el ejemplo que más abajo os muestro, estoy usando el método de Paul
O'Brien que consiste en establecer overflow:auto en el contenedor. También
vale overflow:hidden.
Sin embargo, en cuanto establezco esta declaración Opera calcula de forma
diferente los márgenes y el contenido se estrecha demasiado. Podéis probar a
incluir o no overflow:hidden para ver su efecto.
Por último, aunque no es de mi agrado, he intentado usar el hack para Opera
html:first-child #contenido {
margin: 0;
}
pero no funciona ¿?
¿alguna idea?
*CÓDIGO HTML*
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="es-ES" lang="es-ES">
Problema Opera
Problema en Opera 9 con overflow:hidden
El div#content, con fondo rojizo, debe de extenderse para incluir a los dos
párrafos flotantes.
Para ello, se ha establecido overflow: hidden.
Se ha dejado espacio para las barras laterales estableciendo margin: 0
250px;
Párrafo flotante a la izquierda
Párrafo flotante a la derecha
*CSS*
/* Anula rellenos y márgenes predeterminados del navegador */
* {
padding: 0;
margin: 0;
}
#content {
overflow: hidden; /* Declaración con la que se produce el problema en
Opera */
margin: 0 220px; /* espacio para alojar las barras laterales.
Opera lo calcula mal si se establece overflow:hidden
*/
background-color: #fcc;
border: 2px solid red;
}
html:first-child #content {
margin: 0; /* Este hack para Opera no funciona ¿por qué? */
}
p#p1 {
float: left;
width: 250px;
height: 400px;
background-color: #ccf;
}
p#p2 {
float: right;
width: 250px;
height: 400px;
background-color: #cfc;
}
#bar1 {
float: left;
width: 200px;
height: 100px;
background: #eee;
}
#bar2 {
float: right;
width: 200px;
height: 100px;
background: #eee;
}
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://lists.ovillo.org/mailman/listinfo/ovillo
