Re: [Ovillo] Problemas con float/clear

2006-07-11 Por tema Juan R.

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

2006-07-10 Por tema Eva del Campo
 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

2006-07-10 Por tema nicolas carrera
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

2006-07-10 Por tema Eva del Campo
   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

2006-07-10 Por tema nicolas carrera
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

2006-07-10 Por tema Juan R.
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

2006-07-10 Por tema nicolas carrera
¡ 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

2006-07-10 Por tema Eva del Campo
 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