de nuevo firefox

wolfmoon · #1 (**permalink**) 30/03/2008, 15:54

A todo el mundo le toca las narices el explorer y a mi me las toca el firefox, jeje.

Tengo dos recuadros, parecidos a los de la pagina msn.es, al de abajo le tengo puesto un margin-top: 10px; para que haya una separacion correcta entre los dos recuadros, pues bien, una vez mas el explorer estupendo pero el firefox me pega ese recuadro al de arriba, para conseguir el mismo efecto que en el explorer tendria que poner un margin-top:100px; pero claro con el correspondiente desarreglo en el explorer. No entiendo nada, lei un articulo sobre el modelo de cajas en los navegadores estandares y el explorer en los que venia parches para esto, pero a mi no me funcionan o es que lo estoy haciendo mal, que sera lo mas probable. JEJE

Una vez mas necesito ayuda

wolfmoon · #2 (**permalink**) 30/03/2008, 16:30

Se me olvidaba decir que esto mismo me pasa cuando pongo un padding, el explorer lo coge a la perfeccion y el firefox nada. Sobre le explorer tengo la ultima version, no se si en las anteriores se vera correctamente

Mikmoro · #3 (**permalink**) 30/03/2008, 16:47

Eso es bastante extraño, y seguramente se tratará de que tienes alguna otra cosa por ahí un poco rara.

Sin ver el código html y css es difícl saber.

Mikel.

wolfmoon · #4 (**permalink**) 31/03/2008, 14:54

Efectivamente era un error mio Mikel, pero ahora me surge otra duda. En una capa principal quiero poner varios recuadros, como te comentaba algo parecido a msn.es, bien, en cada linea (por decirlo asi) habria dos recuadros, para conseguir poner el segundo recuadro a la derecha del primero pongo en el primero un float left; lo que no se es como conseguir poner un tercer recuadro justo debajo del primero, luego otro a la derecha de este ultimo y asi sucesivamente, no se si me se entinde jejee

Mikmoro · #5 (**permalink**) 31/03/2008, 15:49

A ver si esto te sirve de orientación. Si no, mirando el caso más concretamente será más fácil hallar una solución adecuada.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor { border-style: solid;
border-width: 2px;
width: 700px;
margin: 0px auto;
}
.izq { border: 1px solid rgb(255, 102, 0);
margin: 10px 10px 0px;
background-color: rgb(51, 153, 153);
height: 100px;
float: left;
width: 300px;
}
.der { border: 1px solid rgb(51, 255, 51);
margin: 10px 10px 0px;
background-color: rgb(51, 102, 102);
height: 100px;
float: right;
width: 300px;
}
.corte { clear: both;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="izq">Cuadro 1</div>
<div class="der">Cuadro 2</div>
<div class="izq">Cuadro 3</div>
<div class="der">Cuadro 4</div>
<div class="izq">Cuadro 5</div>
<div class="der">Cuadro 6</div>
<div class="corte"></div>
<br />
</div>
</body>
</html>

Mikel.

wolfmoon · #6 (**permalink**) 31/03/2008, 16:00

tan sencillo como esto, madre mia, lo siento pero estoy bastante pez en css, lo mio es flash, jejeje

Gracias

Mikmoro · #7 (**permalink**) 31/03/2008, 16:07

Sí, así de fácil

No hay de qué

Mikel.

wolfmoon · #8 (**permalink**) 31/03/2008, 16:35

Aqui estoy de nuevo, acabo de comprobar que para que funcione bien, los recuadros de la derecha tienen que ser igual de altos que los de la izquierda, es que yo tengo recuadros que crecen automaticamente segun el contenido, entonces los hay mas altos y menos altos, hay alguna manera de arreglar esto.

No pienses que tomo el camino facil de preguntar, porque antes de hacerlo pruebo 1000 cosas diferentes....

Mikmoro · #9 (**permalink**) 31/03/2008, 17:46

En ese caso la solución sería esta:

- haces una caja para la derecha (flotada a la derecha)
- pones ahí seguidas todas las cajas que van a la derecha
- ahora haces otra caja para la izquierda
- pones todas las cajas izquierdas seguidas

de esa manera, quedarán siempre pegadas unas encima de otras y paralelas, tengan el tamaño que tengan.

Este es un simple ejemplo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor { width: 700px;
margin: 0px auto;
}
#cont_izda { border-width: 2px;
float: left;
margin-top: 10px;
margin-left: 10px;
width: 330px;
}
#cont_dcha { border-width: 2px;
float: right;
margin-top: 10px;
margin-right: 10px;
width: 330px;
}
.izq { border: 1px solid rgb(255, 102, 0);
margin: 10px;
background-color: rgb(51, 153, 153);
}
.der { border: 1px solid rgb(51, 255, 51);
margin: 10px;
background-color: rgb(51, 102, 102);
}
.corte { clear: both;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cont_dcha">
<div class="der">Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper nulla facilisi. Lorem ipsum dolo
</div>
<div class="der">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper nulla facilisi. Lorem ipsum dolo</div>
<div class="der">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
</div>
<div class="der">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper nulla facilisi. Lorem ipsum dolo
</div>
</div>
<div id="cont_izda">
<div class="izq">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper nulla facilisi. Lorem ipsum dolo
</div>
<div class="izq">Ut wisi enim ad minim veniam, quisnostrud
exerci tation ullamcorper nulla facilisi. Lorem ipsum dolo
</div>
<div class="izq">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper nulla facilisi. Lorem ipsum dolo</div>
<div class="izq">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy
</div>
</div>
</div>
</body>
</html>

Mikel.

wolfmoon · #10 (**permalink**) 01/04/2008, 15:12

oks, creo que ya lo voy cogiendo, gracias por tu tiempo

Mikmoro · #11 (**permalink**) 01/04/2008, 15:16

De nada. Es un placer.

Mikel.