Re: [Ovillo] Problemas con float/clear
Si no pones overflow: auto, no se verá bien en ningún navegador sobre osx (mac). Probado en firefox, mozilla, y safari... Thanks, los problemas de no tener un mac a mano para probar ;-) ___ 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
Re: [Ovillo] Problemas con float/clear
Hola a todos. Os cuento el problema a ver si me podeis echar un cable. Se trata que cuando haces un clear, este afecta no al elemento que flota en la capa contendora sino que afecta a otros elementos anteriores que estuvieran flotando. Os pongo mejor un ejemplo: http://www.rebollosablon.es/pruebas/columnas.htm Al tener una maquetación a 3 columnas con la col izquierda con float left, si en la columna central tengo un contenido que también lleva un float left y quiero luego introducir un clear, este clear me afecta no sólo al contedido de la columna central si no que me afecta a la columna izquierda. En el ejemplo se ve claro. ¿Hay alguna manera de restringir el clear a su elemento con float mas próximo?? Saludos y gracias. Juan Rebollo Hola Sí esa es una cagadilla del clear que a veces me vuelve loca. En el caso que presentas, lo más sencillo parece meter cada contenido que flota en un div al que asignas overflow: auto; Así te olvidas de clears, los contenidos quedan bien colocados, y además puedes ajustar con facilidad la distancia entre ellos utilizando márgenes. Suerte Eva ___ 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
Re: [Ovillo] Problemas con float/clear
Hola
te inserto aqui tu codigo una vez solventado el tema. Espero que fuera lo que
quieres conseguir.
Te he resaltado en negrita los cambios he sacado el hr de los divs y he
creado un estilo para las cajas
!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 /
titleProblema float/title
style type=text/css
!--
* {
margin: 0;
padding: 0;
}
body {
font: 14px normal tahoma;
text-align: center;
}
div#c1 {
margin: 0;
border: 1px solid red;
padding: 0;
height: 400px;
width: 150px;
float: left;
}
div#c3 {
margin: 0;
border: 1px solid red;
padding: 0;
height: 400px;
width: 150px;
float: right;
}
div#c2 {
margin: 0 154px 0 154px;
border: 1px solid green;
padding: 0 8px;
text-align: left;
width:auto;
height:auto;
}
.flota {
width: 130px;
height: 110px;
color: #fff;
background: #000;
float: left;
}
hr {
}
#caja {width:auto; height:100%; margin-bottom:5px;}
--
/style
/head
body
div id=c1
pColumna Izquierdabr /
(float left)/p
/div
div id=c3
pColumna Derechabr /
(float right) /p
/div
div id=c2
h2Columna Central/h2
div id=caja
p class=flotaContenido que flota/p
pUn texto bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla/p
/div
hr /
div id=caja
p class=flotaOtro que flota/p
pEl lt;hrgt; justo encima y todo este texto deberían estar justo debajo
de la caja negra al lado de Un texto bla bla bla...
pero como el lt;hrgt; superior tiene un clear left, quot;limpiaquot;
tanto el float de la caja negra como el de la columna izquierda./p
hr /
/div
/div
/body
/html
-
LLama Gratis a cualquier PC del Mundo.
Llamadas a fijos y móviles desde 1 céntimo por minuto.
http://es.voice.yahoo.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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con float/clear
body div id=c1 pColumna Izquierdabr / (float left)/p /div div id=c3 pColumna Derechabr / (float right) /p /div div id=c2 h2Columna Central/h2 div id=caja p class=flotaContenido que flota/p pUn texto bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla/p /div hr / div id=caja p class=flotaOtro que flota/p pEl lt;hrgt; justo encima y todo este texto deberían estar justo debajo de la caja negra al lado de Un texto bla bla bla... pero como el lt;hrgt; superior tiene un clear left, quot;limpiaquot; tanto el float de la caja negra como el de la columna izquierda./p hr / /div /div /body /html Cuidado, que has puesto div id=caja donde debería poner div class=caja, ya que no puedes tener varios objetos con el mismo id... Lógicamente también hay que cambiar #caja por .caja en las css. El resto no lo he mirado, pero eso me ha cantado... Eva ___ 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
Re: [Ovillo] Problemas con float/clear
si es verdad las prisas son malas consejeras gracias eva espero que le sirva, y creo que la posible solución a lo que el queria podria ser esa Eva del Campo [EMAIL PROTECTED] escribió: Columna Izquierda (float left) Columna Derecha (float right) Columna Central Contenido que flota Un texto bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla - Otro que flota El hr justo encima y todo este texto deberían estar justo debajo de la caja negra al lado de Un texto bla bla bla... pero como el hr superior tiene un clear left, limpia tanto el float de la caja negra como el de la columna izquierda. - Cuidado, que has puesto donde debería poner class=caja, ya que no puedes tener varios objetos con el mismo id... Lógicamente también hay que cambiar #caja por .caja en las css. El resto no lo he mirado, pero eso me ha cantado... Eva ___ 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 - LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con float/clear
Cojonudo!, con perdon. :-)
Encerrando lo que flota en un div y dandole como me comentabas un
height:100%; todo ok!
Y quitando el clear, claro.
Con overflow: auto, no se soluciona en cambio.
Gracias de nuevo!!
- Original Message -
From: nicolas carrera [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Monday, July 10, 2006 1:29 PM
Subject: Re: [Ovillo] Problemas con float/clear
Hola
te inserto aqui tu codigo una vez solventado el tema. Espero que fuera lo
que quieres conseguir.
Te he resaltado en negrita los cambios he sacado el hr de los divs y he
creado un estilo para las cajas
!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 /
titleProblema float/title
style type=text/css
!--
* {
margin: 0;
padding: 0;
}
body {
font: 14px normal tahoma;
text-align: center;
}
div#c1 {
margin: 0;
border: 1px solid red;
padding: 0;
height: 400px;
width: 150px;
float: left;
}
div#c3 {
margin: 0;
border: 1px solid red;
padding: 0;
height: 400px;
width: 150px;
float: right;
}
div#c2 {
margin: 0 154px 0 154px;
border: 1px solid green;
padding: 0 8px;
text-align: left;
width:auto;
height:auto;
}
.flota {
width: 130px;
height: 110px;
color: #fff;
background: #000;
float: left;
}
hr {
}
#caja {width:auto; height:100%; margin-bottom:5px;}
--
/style
/head
body
div id=c1
pColumna Izquierdabr /
(float left)/p
/div
div id=c3
pColumna Derechabr /
(float right) /p
/div
div id=c2
h2Columna Central/h2
div id=caja
p class=flotaContenido que flota/p
pUn texto bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla/p
/div
hr /
div id=caja
p class=flotaOtro que flota/p
pEl lt;hrgt; justo encima y todo este texto deberían estar justo
debajo de la caja negra al lado de Un texto bla bla bla...
pero como el lt;hrgt; superior tiene un clear left, quot;limpiaquot;
tanto el float de la caja negra como el de la columna izquierda./p
hr /
/div
/div
/body
/html
___
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
Re: [Ovillo] Problemas con float/clear
¡ Me alegro ! :D) - LLama Gratis a cualquier PC del Mundo. Llamadas a fijos y móviles desde 1 céntimo por minuto. http://es.voice.yahoo.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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con float/clear
Cojonudo!, con perdon. :-) Encerrando lo que flota en un div y dandole como me comentabas un height:100%; todo ok! Y quitando el clear, claro. Con overflow: auto, no se soluciona en cambio. Si no pones overflow: auto, no se verá bien en ningún navegador sobre osx (mac). Probado en firefox, mozilla, y safari... ___ 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
