Problema CSS
6 seguidores
JOE, llevo un rato dándole vueltas a un asunto y no acabo de sacarlo ... estoy buscando esto:
http://www.theorangeside.com/dmstk/esquema.gif
Así de primeras dadas parece un div contenedor, y dos divs float dentro (en el esquema he puesto dos, ya que va a haber varios contenedores) .... el problema es que no puedo saber a bote pronto el tamaño que va a tener ninguno de los div float
¿Cual es el problema? .... que si hago los divs float, si exceden la altura declarada en el contenedor se salen del DIV (solo en Mozilla, Explorer "estira" el contenedor lo que de forma que se adapte al contenido)
Y no puedo utilizar posicionamientos absolutos, porque va a haber muchos de esos contenedores, con lo que cálculos de posiciones totales no valen
¿Ideas?
meddle
¿estas hablando de anchura o altura?
orange
Altura ...
:(
meddle
te puedes conectar al msn?
txuma Plus
me apunto.... pero mejor postear la solución después para que todo el mundo la sepa (si la encontramos, claro) ;)
xaguar
Naranjo... si posteas tu css para ver lo que tienes... pa' meterle mano mas pronto que tarde.
:P
Peter M.
orange
Bueno, ya está ... no voy a poner todo el código que es un coñazo ... digamos que al principio tenía esto
<div id="contenedor">
<div id="grafica" style="float:right"></div>
<div id="descripcion" style="float:left"></div>
</div>
(tenía todo en un CSS aparte y varios atributos más, pero con eso entendereis la estructura)
El problema es que los divs Float "se salian" por encima del contenedor, porque no habñia contenido "real" dentro de él .... y lo hemos solucionado añadiendo algo
Lo suyo es poner contenido "de verdad", un pie o algo así, pero como hack valdría con poner esto
<div id="contenedor">
<div id="grafica" style="float:right"></div>
<div id="descripcion" style="float:left"></div>
<div id="hack" style="clear:both"></div>
</div>
De forma que añadimos contenido "en flujo", dentro del contenedor, con lo que entocnes si que se alarga hasta "abarcar" los dos divs float
Saludetes!!
Y cuando la página esté on-line os digo cual es
xaguar
Eso eso... limitar los elementos flotantes con both es regla de oro :D
Mostros...
orange
En este caso, mas que limitar los flotantes, es darle algo al contenedor a lo que agarrarse ... pero bueno, dos formas de ver lo mismo
CSS Rulez
pepevi
gran truco thx :)
meddle
perdona, como hack, deberia ser con un espacio, sin espacio no hay contenido:
<code><div id="hack" style="clear:both"></div></code>no funciona
<code><div id="hack" style="clear:both"> </div></code>si funciona
orange
Pues no Sergi, a mi desde luego me funciona sin espacio ... y desde esta tarde ya lo he usado en dos proyectos
xDD
meddle
mmm, pues será el otro css que tengas porque a mi en FB0.7 no me va sin espacio.
orange
Pues no sé porque yo uso exactamente el mismo navegador
¿?
Bueno, una vez que la gente está sobreaviso que pruebe de las dos formas y listo
meddle
igual es q estamos usando codigo distinto :)
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Template</title>
<style type="text/css">
#contenedor {background:green}
#grafica {float:right; width: 50px;}
#descripcion {float:left; width: 50px;}
#hack {clear:both;}
</style>
</head>
<body>
<div id="contenedor">
<div id="grafica">Lorem ipsum.</div>
<div id="descripcion">Nunc sollicitudin neque ut mauris.</div>
<div id="hack"></div>
</div>
</body>
</html></code>Se ve perfecto en Opera7, parcialmente bien en IE6 y no se ve background en FB0.7
Si cambias y pones un . en la capa hack, lo ves perfecto en todos. Claro que entonces le añades un visibility:hidden;
orange
Puf! .. no tengo pruebas, lo he implementado directamente en las paginas .. y no te puedo pegar el código .. primero porque es muy tocho y segundo porque todavía no se pueden ver .. cuando las publiquemos te digo donde está
meddle
no problem, ya te creo. porobablemenete hayas usado una css algo diferente o añadido aun sin verlo algo de contenido a la capa hack. ya veremos. :)
meddle
*CREO* que llevo razon (aunque hay que ver tu codigo). por lo menos, si il maestro te dice que se ponga <em>;nbsp;</em> se pone :)
orange
Pues ahi si que no me valía .... estoy seguro que, conceptualmente hablando, lo mejor es poner & nbsp; ... de hecho fué lo primero que probé ... pero entonces el DIV me ocupa un espacio ..... cos aque no pasa si no pongo nada
Quizá lo mejor sea meter un & nbsp; y en las propiedades del DIV poner, además del clear: un width y height = 0
txuma Plus
He buscado algún ejemplo de este tipo y no usan ni (espacio) ni nbsp (omito los caracteres &...; porque sino no sale)
ABRIR LAYOUT
Y dicen que esta es la compatibilidad:
This layout is virtually identical in IE5.5/6, Op6/7 and Mozilla for windows, and Mozilla 1.5rc1, Safari, Omniweb4.5, IE5.23, Opera 6.03, and Camino 0.7 for Mac.
Salu2
meddle
borja, tambien puedes usar el clear en un hr, eso fijo que no falla. y si no te gusta lo escondes con visibility.
orange
No, si a mi funcionar ya me funciona, ya digo simplemente con esto:
<div id="hack" style="clear:both"></div>
Podría probar con otras cosas, pero ya sabes ....
meddle
if it aint broken dont fix it :)
txuma Plus
meddle
if it aint broken dont fix it :)
Gran teoría, si señor !!!
GodSEA
Lo del espacio es cierto, es un problema tipico entre navegadores... mi consejo es que utiliceis algo asi:
<div id="hack" style="clear:both"><!-- --></div>
El espacio interior comentado, porque si no lo haceis con el comentado... en otros navegadores quedara un cambio de linea feo.
Un saludo