Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Problema de visualización IE/Firefox (márgenes?) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/09/2006, 09:37
 
Fecha de Ingreso: septiembre-2006
Mensajes: 4
Antigüedad: 11 años, 3 meses
Puntos: 0
Problema de visualización IE/Firefox (márgenes?)

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>
  #2 (permalink)  
Antiguo 07/09/2006, 10:44
 
Fecha de Ingreso: julio-2005
Mensajes: 220
Antigüedad: 12 años, 4 meses
Puntos: 0
Espero que te valga:
Código:
.texto {
width: 600px;
background-color:#ff0;
clear:both;
}
  #3 (permalink)  
Antiguo 07/09/2006, 12:34
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por GoRaK Ver Mensaje
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 ?
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #4 (permalink)  
Antiguo 07/09/2006, 12:45
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por fearlex Ver Mensaje
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
  #5 (permalink)  
Antiguo 07/09/2006, 12:49
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por tunait Ver Mensaje
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 07/09/2006, 13:13
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por fearlex Ver Mensaje
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
  #7 (permalink)  
Antiguo 07/09/2006, 14:12
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #8 (permalink)  
Antiguo 07/09/2006, 14:39
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por fearlex Ver Mensaje
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
  #9 (permalink)  
Antiguo 07/09/2006, 14:48
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 07/09/2006, 16:05
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por fearlex Ver Mensaje
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

Última edición por tunait; 07/09/2006 a las 16:16
  #11 (permalink)  
Antiguo 07/09/2006, 19:14
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Tunait, eres mi salvadora, thank you, me has aclarado una pila de dudas en un solo post, thanks ;)
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #12 (permalink)  
Antiguo 08/09/2006, 01:49
 
Fecha de Ingreso: septiembre-2006
Mensajes: 4
Antigüedad: 11 años, 3 meses
Puntos: 0
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!

Última edición por Kaiz-R; 08/09/2006 a las 01:55 Razón: Tal y como había escrito el mensaje no se entendía con claridad
  #13 (permalink)  
Antiguo 08/09/2006, 10:16
 
Fecha de Ingreso: julio-2005
Mensajes: 220
Antigüedad: 12 años, 4 meses
Puntos: 0
Cita:
Iniciado por Kaiz-R Ver Mensaje
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.
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 23:33.