Codigo sencillo no funciona en mozilla... :-(

ramma · #1 (**permalink**) 13/04/2004, 06:17

Tengo un problema con un código muy simple, y precisamente por eso me vuelve loco: no sé que pasa...

Es un problema de layout, de colocacion de DIVS. el body es el siguiente:

Código:

<body>

<div id=header>
etc.....
</div>

<div id=cuerpo>
etc....
</div>

<div id=pie>
etc...
</div>

<div id=menu>
etc....
</div>


</body>

y la hoja de estilo usada:

Código:

#header {
	top: 10pt;
	width: 95%;
}
#menu {
	position: absolute;
	right: 2pt;
	top: 20 pt;
	width: 30%;
	margin: 5pt;
}

#cuerpo {
	margin-left: 15pt;
	width: 65%;
}

#pie {
	width: 100%;
}

joer, es muy simple: tres bloques apilados de ancho variable, alineados a la izquierda y un bloque con colocación absoluta, a la derecha, arriba de la página, para el menú. Creo que es un layout muy normal y muy sencillo....

Funciona perfectamente en explorer v6, pero no funciona en Mozilla. El DIV menu se vé debajo de los otros....

Joer, no tengo ni idea.... ¿qué falla? ¿que falta?

Por si quereis verlo funcionando:

http://rammablog.turincon.com

PatomaS · #2 (**permalink**) 13/04/2004, 07:52

Hola

Bueno, te ayudarína a tenerlos posicionados exactamente como quieres los siguientes detalles:

- coloca el div que quieres que esté más arriba de primero en el código.
- coloca los demás divs a continuación.
- usa float:right para posicionar el que quieres a la derecha
- usa position: absolute para cada div de manera que sepas y controles sus posiciones
- usa top para ubicarlas con respecto a la parte superior.

Con eso debería bastarte ...

Suerte

Felicidad

CORE · #3 (**permalink**) 14/04/2004, 14:46

hola

yo trato de no usar left y top por que nuca se ve igual en todos los navegadores, o en todas las resoluciones por cuestiones que no se, pero para todo esto uso de Preferencia Margin y Padding, hice una imagen intentando explicar como trabajar con Margin en lufar de left y top

espero les sirva

saludos

PatomaS · #4 (**permalink**) 14/04/2004, 16:59

Hola

Bueno, en principio, el detalle de que se vean diferente en varios navegadores, se debe a que el pixelde netscape (mozilla, firebird, firefox) no es igual en tamaño al de explorer.

¡ sip !

aunque suena extraño.

Por otro lado, con el tema margin, el explorer tiene una cosa que en varios sitios han llamado "la regla de los 3 pixels" y es la diferencia que genera muchas veces con respecto a las medidas que uno pone.

Respecto al top y left, el mayor problema que puedes tener en el ejemplo mismo de antes, es que necesitas saber bien el tamaño de las diferentes zonas o de lo contrario se superponen.

De todas formas parece una solución tan buena como otras, y como yo no la suelo usar, la tendré que probar pronto.

Suerte

Felicidad

PascalC · #5 (**permalink**) 14/04/2004, 18:38

Cita:

Bueno, en principio, el detalle de que se vean diferente en varios navegadores, se debe a que el pixelde netscape (mozilla, firebird, firefox) no es igual en tamaño al de explorer.

Yo no veo ni un pixel definido en tu codigo, puntos sí, pero pixeles no.

CORE · #6 (**permalink**) 15/04/2004, 00:51

Cita:

Mensaje Original por PatomaS

Por otro lado, con el tema margin, el explorer tiene una cosa que en varios sitios han llamado "la regla de los 3 pixels" y es la diferencia que genera muchas veces con respecto a las medidas que uno pone.

Respecto al top y left, el mayor problema que puedes tener en el ejemplo mismo de antes, es que necesitas saber bien el tamaño de las diferentes zonas o de lo contrario se superponen.

De todas formas parece una solución tan buena como otras, y como yo no la suelo usar, la tendré que probar pronto.

Suerte

Felicidad [/B]

Gracias por el dato Pato+