Problema de visualización IE/Firefox (márgenes?)

Kaiz-R · #1 (**permalink**) 07/09/2006, 08:37

Saludos compañeros,

tengo un problema con la siguiente URL. Me gustaría que la caja amarilla comenzara justo por debajo de las cajas grises (esto lo consigo manejando los márgenes). Su visualización la considero correcta en IE, pero en Firefox, la caja amarilla se ubica por debajo de las cajas grises, cosa que no es lo que deseo.

Aquí tenéis el código utilizado.
(atención que por normativa del foro no he podido incluir el las URLs del Doctype)

Mil gracias por adelantado.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
background-color:#eeeeee; 
text-align:center;
font-family: verdana;
font-size: 11px;
line-height: 16px;
}

#principal {
padding: 10px;
margin: 0 auto 0 auto;
width: 600px;
border: solid #000000 1px;
text-align:left;
background-color:#FFFFFF;
}

#uno { background-color:#eeeeee; 
width: 250px; 
float:left; 
margin-bottom: 0px;
position: relative;
height: 50px;
}

#dos { background-color:#cecece; 
width: 165px; 
float:left; 
margin-left: 10px; 
margin-right: 10px; 
margin-bottom: 0px;
height: 50px;
}

#tres { background-color:#cccccc; 
width: 165px; 
height: 50px;
float:left; 
margin-bottom: 0px;
}

.texto {
margin-top: 20px;
background-color:#ff0;
}

</style>
<title>Tamer</title>
</head>

<body>
<div id="principal">
<div id="uno">aaa</div>
<div id="dos">bbb</div>
<div id="tres">ccc</div>
<div class="texto">esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco esto está en blanco</div>


</div>
</body>
</html>

GoRaK · #2 (**permalink**) 07/09/2006, 09:44

Espero que te valga:

Código:

.texto {
width: 600px;
background-color:#ff0;
clear:both;
}

fearlex · #3 (**permalink**) 07/09/2006, 11:34

Cita:

Iniciado por GoRaK

Espero que te valga:

Código:

.texto {
width: 600px;
background-color:#ff0;
clear:both;
}

Decididamente se resolvio, pero podrias explicarme por ke usar clear ?? POr que lo usastes, que habia que se quito ?

tunait · #4 (**permalink**) 07/09/2006, 11:45

Cita:

Iniciado por fearlex

Decididamente se resolvio, pero podrias explicarme por ke usar clear ?? POr que lo usastes, que habia que se quito ?

clear anula el flotado de los elementos anteriores (float: left)

Un saludo

fearlex · #5 (**permalink**) 07/09/2006, 11:49

Cita:

Iniciado por tunait

clear anula el flotado de los elementos anteriores (float: left)

Un saludo

Bueno voy a aprovecharme de este post, asi no tengo que crear uno nuevo, yo utilizo tanto float como clear, pero de verdad no se ni en esencia, que hacen o que significan,

por que flotar un elemento, por ke limpiar el flotado, esto me tiene trocado,

algun lugar donde pueda encontrar estas respuestas por que mira ke he buscado pero no encuentro algo que finalmente me aclare la duda al estilo:

{ (Display: Block) Tunait Explanation }(en otro post)

:D

tunait · #6 (**permalink**) 07/09/2006, 12:13

Cita:

Iniciado por fearlex

por que flotar un elemento, por ke limpiar el flotado, esto me tiene trocado,

Conviene flotar un elemento cuando es de tipo bloque y queremos que se sitúe visualmente a un lado de otro/s elemento/s sean o no de tipo bloque.

Por ejemplo, un listado de links...

Código:

<ul id="menu">
  <li><a href="home.html">Home</a> |</li>
  <li><a href="dondeestamos.html">Dónde estamos</a> |</li>
  <li><a href="contacto.html">Contactar</a></li>
</ul>

... se va a visualizar cada elemento de lista uno debajo del otro al ser elementos de bloque. Si queremos que visualmente aparezcan en una línea (uno al lado del otro) manteniendo su propiedad de elemento de bloque se puede lograr flotándolos a la izquierda

Código:

#menu li{
	float: left;
	padding-left: 5px;
}

Pero entonces la propiedad se mantendría para con los elementos que vengan a continuación. Si debajo agregamos un párrafo pretendiendo que se muestre debajo de los links ...

Código:

<p>
Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.
</p>

...se visualizaría así

Cita:

Home | Dónde estamos | Contactar Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.

Para indicar que ese párrafo no debe ser influenciado por el flotado anterior se le aplica la propiedad clear

Código:

p{
	clear: left;
}

A partir de ahí deja de tener influencia el flotado aplicado a los li del menú.

NOTA: Agregar que esto fue sólo un ejemplo ilustrativo para la propiedad float, pero no quiere decir que sea la mejor manera de mostrar un listado de links en una línea. Personalmente prefiero cambiarles su display e indicarle que se comporten como elementos de línea

Código:

#menu li{
	display: inline;
	padding-left: 5px;
}

Un saludo

fearlex · #7 (**permalink**) 07/09/2006, 13:12

NO sabes como te agradezco tu tiempo para poner ese comentario, de veras, ke te lo agradezco en el alma, gracias Tunait.

Voy a fajarme con unos divs a ver como los acoplo bien :D
Gracias

PD: Tienes un ejemplito parecido pero con Divs ??? :D Si no, no importa :D

tunait · #8 (**permalink**) 07/09/2006, 13:39

Cita:

Iniciado por fearlex

PD: Tienes un ejemplito parecido pero con Divs ??? :D Si no, no importa :D

Claro, imagina que tenemos 3 bloques

Código HTML:

<div id="uno">Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.</div>

<div id="dos">Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.</div>

<div id="tres">Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.</div>

y queremos mostrar los dos primeros uno al lado del otro y el tercero debajo de ambos. Pedimos que el primero esté flotando a la izquierda ´

Código HTML:

#uno {
	width: 30%;
	float: left;
	padding: 5px;
	height: 150px;
	background-color: #ccffff;
}
#dos{
	background-color: #ffffcc;
}
#tres{
	background-color: #ffccff;
}

El navegador flotará los dos siguientes a la derecha del primero. Si queremos que el último (tres) salga de ese flotado y se muestre por debajo de ambos le aplicamos la propiedad clear

Código HTML:

#tres{
	background-color: #ffccff;
	clear: left;
}

Un saludo

fearlex · #9 (**permalink**) 07/09/2006, 13:48

Mas o menos entendi, pero igual, al final se me desbarato la ilusion, no logro que el tercer div quede en linea tambien, ke tengo mal ???

Código HTML:

<style type="text/css">
#uno {
	width: 30%;
	float: left;
	padding: 10px;
	height: 150px;
	background-color: #ccffff;
}
#dos{
    width: 40%;
	height:100px;
	padding: 10px;
	background-color: #ffffcc;
}
#tres{
             width:30%;
	background-color: #ffccff;

}

</style>

</HEAD>

<BODY>
<div id="uno">Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.</div>

<div id="dos">Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.</div>

<div id="tres">Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.</div>
</BODY>

Gracias miles Tunait

tunait · #10 (**permalink**) 07/09/2006, 15:05

Cita:

Iniciado por fearlex

Mas o menos entendi, pero igual, al final se me desbarato la ilusion, no logro que el tercer div quede en linea tambien, ke tengo mal ???

Cuidado no confundas; el poner uno al lado de otro no es ponerlos como elementos de línea. El flotarlos los coloca uno al lado del otro pero siguen siendo elementos de bloque.

Para flotar los tres contenedores debes hacer flotar también los otros dos. Los dos primeros flótalos a la izquierda y el último flótalo a la derecha o bien flota los 3 a la izquierda

Un saludo

Edito: Agregar que debes poner atención a los márgenes (internos y externos) y a los bordes que ocupan un espacio y ensanchan más los contenedores y si no caben provocará que el tercero salte debajo de los dos primeros. Tal como lo tienes (30% 40% y 30%) ocupan un 100% de la anchura. Al tener aplicado un margen interno (padding) la anchura total sobrepasa el 100% de la anchura disponible y no va a caber. Deberías reducir el % de alguno de los contenedores

fearlex · #11 (**permalink**) 07/09/2006, 18:14

Tunait, eres mi salvadora, thank you, me has aclarado una pila de dudas en un solo post, thanks ;)

Kaiz-R · #12 (**permalink**) 08/09/2006, 00:49

Saludos de nuevo

El "clear" me ha solucionado parte del problema. No entiendo porque en firefox, el margen de la caja amarilla lo toma a partir del div de fondo blanco, y no del div inmediatamente superior...

En IE, los 20 px de margen superior me los respeta respecto a las cajas grises, en cambio en FFox, no.

Yo tomo como resultado correcto el de IE, si bien, quizás el navegador que me está haciendo la lectura del CSS correcta sea FFox.

¿más ayuda? por favor?

Gracias!

GoRaK · #13 (**permalink**) 08/09/2006, 09:16

Cita:

Iniciado por Kaiz-R

En IE, los 20 px de margen superior me los respeta respecto a las cajas grises, en cambio en FFox, no.
Gracias!

Si compruebas tu código veras que estas dando un margin-bottom:0 a los 3 bloques de arriba y luego un margin-top:20 al bloque inferior. Es un contrasentido. Solución:

- margin-bottom:20px en los 3 bloques de arriba
- quita el margin-top:20px en el bloque inferior.