19/07/2004, 08:31
| |||
| |||
| Sencillo ejemplo con divs Hola, que tal. Quisiera saber por qué no funciona correctamente este código: <div style="width: 100px; background-color: red; height: 50; display: inline;">test</div> <div style="width: 100px; background-color: blue; height: 50; display: inline;"> <p>texto1</p> <p>texto2</p> </div> La cuestión es que en explorer funciona, pero en firefox no. No añade los tags p dentro del div. Por qué puede pasar? Saludos |
|
19/07/2004, 09:39
| ||||
| ||||
| Que te conteste alguien que sepa más que yo, pero si le quitas el "diplay: inline;" verás como te aparece el código. Veo algunos problemas: 1.- Estas utilizando el display: inline; para que los divs aparezcan uno al lado del otro, deberías usar float: left; si le quitas el inline, 2.- En la altura te falta especificar la unidad de medida. 3.- las etiquetas p, mozilla, por defecto les añade un padding o un margin (no se muy bien cual) desplazándote los contenidos del p, y en cambio explorer no lo hace Así que he hecho esos pequeños cambios y me queda así, que creo que es cómo lo querías:
Código:
Prueba a ver si es eso lo que necesitabas <head>
<style type="text/css">
#1 {
width: 100px;
background-color: yellow;
height: 50px;
float: left;
}
#2 {
width: 100px;
background-color: blue;
height: 50px;
float: left;}
p {
padding: 0x;
margin: 0px;}
</style>
</head>
<body>
<div id="1">test</div>
<div id="2">
<p>texto1</p>
<p>texto2</p>
</div>
</body>
 Un salu2 |
|
19/07/2004, 09:49
| |||
| |||
| Hola, que tal. Gracias por la respuesta. En firefox sigue sin funcionar correctamente. Lo de utilizar el float, ya lo había probado, pero tengo problemas, que no se porqué suceden. Resulta que si coloco el codigo como me has dicho, y luego le añado un div para posicionarlo debajo de estos dos, no me lo hace, sino que me lo añade a la derecha de los otros dos. Sería algo asi: <body> <div id="1">test</div> <div id="2"> <p>texto1</p> <p>texto2</p> </div> <div>nuevo</div> </body> El div nuevo quiero que aparezca debajo de los dos anteriores. Como sería entonces? Gracias |
|
19/07/2004, 11:02
| ||||
| ||||
| El problema aquí, es que el float, funciona exactamente igual que funcionaba el align="left" con las imagenes. Te sigue poniendo las cosas alrededor del elemento alineado hasta que se acaba el elemento en cuestión o cortas. En html lo hacíamos con el <br clear=left|right|all>. Con cSS lo hacemos con la propiedad clear, para decirle al elemento que no "flote" al rededor del elemento alineado, sino que se coloque en el primer espacio libre que encuentre después del elemento, a la izquierda, a la derecha o del todo. En tu ejemplo, si fuerzas al tercer div a colocarse a la izquierda después del elemento se coloca debajo:
Código:
Según mi teoría, si pusiéramos clear: all; también debería colocarse debajo, pero no lo hace, ahí si que ya no sé por qué, también yo estoy aprendiendo #3 {
clear: left;}
<div id="3">nuevo</div>
 |
