Foros del Web » Creando para Internet » CSS »

Sencillo ejemplo con divs

Estas en el tema de Sencillo ejemplo con divs en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 19/07/2004, 09:31
 
Fecha de Ingreso: julio-2001
Ubicación: Barcelona
Mensajes: 922
Antigüedad: 16 años, 5 meses
Puntos: 1
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
  #2 (permalink)  
Antiguo 19/07/2004, 10:39
Avatar de t0m|ta  
Fecha de Ingreso: julio-2002
Ubicación: Madrid
Mensajes: 369
Antigüedad: 15 años, 4 meses
Puntos: 3
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:
<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>
Prueba a ver si es eso lo que necesitabas

Un salu2
__________________
:ojotes: t0m|ta - IHQ :ojotes:
No tengo palabras
Instrucciones de andar por casa
  #3 (permalink)  
Antiguo 19/07/2004, 10:49
 
Fecha de Ingreso: julio-2001
Ubicación: Barcelona
Mensajes: 922
Antigüedad: 16 años, 5 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 19/07/2004, 12:02
Avatar de t0m|ta  
Fecha de Ingreso: julio-2002
Ubicación: Madrid
Mensajes: 369
Antigüedad: 15 años, 4 meses
Puntos: 3
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:
#3 {
clear: left;}

 <div id="3">nuevo</div>
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
__________________
:ojotes: t0m|ta - IHQ :ojotes:
No tengo palabras
Instrucciones de andar por casa
  #5 (permalink)  
Antiguo 19/07/2004, 14:37
 
Fecha de Ingreso: julio-2001
Ubicación: Barcelona
Mensajes: 922
Antigüedad: 16 años, 5 meses
Puntos: 1
Hola,

gracias por la respuesta. Había visto el atributo clear, pero no sabía para que servía. Seguro que me será de gran ayuda.

saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:45.