Comunidad de diseño web y desarrollo en internet online

Se ve distinto de un navegador a otro

Citar            
MensajeEscrito el 15 Sep 2005 04:44 pm
Bueno, hola a todos! desde hace poco he decidido dejar el camino oscuro y empezar a hacer páginas de la manera correcta, así que me imagino que me verán mucho por aquí preguntando algunas cosillas, y en el futuro espero que aportando mucho.

Para comenzar, ya me lei los dos tutoriales de ramm, muy buenos por cierto!!! y ya empecé con la maquetación de una página que me han encargado, y esta vez he decidido hacerla bien, pero ya me he encontrado con mis primeros tropiezos.

El primero, la compatibilidad entre navegadores, en Firefox veo una cosa y en IE veo otra



Y pues he intentado hacer varias modificaciones, pero no me han quedado bien

La idea de lo que tengo es sencilla, es dividir la página en 4, con un ancho específico
En la parte de arriba estaría un .swf, que mide 760 X 146
A la izquierda estaría el menu en un .swf de 166 X 404
A la dereche del menú estaría el contenido que mediría el ancho total menos el menú
En la parte inferior estaría el footer con un ancho de 760

No se si me expliqué bien.

Pueden ver el código del CSS en la siguiente dirección
http://www.geocities.com/bluefeelings_layouts/CSS.htm

Y el de el htm en esta otra:
http://www.geocities.com/bluefeelings_layouts/HTM.htm

No se que estoy haciendo mal, igual hasta ahora estoy empezando con todo esto :oops:

De antemano muchisimas gracias por su ayuda ^^

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 

firefox
Citar            
MensajeEscrito el 16 Sep 2005 02:38 am
Holas,
Bueno...comenzando, quiero darte unos detalles que tienes.
La principal idea de trabajar con CSS es separar completamente el diseño, del contenido, con esto quiero decir que en el HTML no deberia haber NADA, absolutamente NADA que sea de diseño. O sea, esto:

Código :

<body background="../Images/fondoweb01.gif">


No va. Eso lo haces desde CSS.

En cuanto a tu problema con el layout, tienes varias cosas que corregir:
-En el HTML te faltó el <div id="contenedor">, no existe, eso hgace falta para poder tener todo ordenado y centrado.
-En el CSS, te falto poner al div contenedor: margin:0 auto; que es lo que hace que se centre.
-no es necesario ponerle margin y padding en 0, ni el display:inline; eso es solo para corregir un problema con IE en caso de qu etenga margen/padding + float al mismo lado.
-No es necesario ponerle los anchos a lo que va a ocupar todo el ancho del div contenedor. Los divs ocupan todo el espacio disponible a menos que se especifique otra cosa.
-float:center; no existe, eso ahi no hace falta (encabezado).
-En #menu, no hace falta ni el border 0 ni el display inline.
-En #contenido se usa el float para no necesitar un margin:114px; a ningun lado, el float del menu + el del contenido hace que el siguiente div se ponga uno al lado del otro.
-height 100% no funciona asi, ese div lo rellenaras con contenido hasta que sobrepase al div del menu, es la forma mas facil. En caso de que el contenido no supere la altura del menu, le pones una altura fija del mismo tamaño del div del menu.
-Recuerda que el padding se suma al ancho y alto de la medida especificada. En tu caso, tienes 760px de ancho disponible, pero si sumas 166 + 593 + 10 + 10 son 779px, >Por lo tanto el div contenido deberia medir maximo 574px (si no uss bordes, que tambien se suman a las medidas.)
-En "abajo", float:bottom; no existe,
-Tenias puesto ancho de 560px, necesitas ponerle 740px d eancho, que sumando los 10px de padding a los lados te da 760 que es el ancho total que necesitas.
-Añade clear:both; al div "abajo" para obligarlo a quedarse por debajo de todo lo demas.

Con eso logras que te quede como lo quieres. Cualquier otra cosa lo vuelves a postear.

Saludos.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

clabbrowser
Citar            
MensajeEscrito el 16 Sep 2005 01:30 pm
Muchisimas muchisimas gracias!!!!!!!!, ya mismo voy a seguir todas las recomendaciones para ver el resultado... y les contaré después

De nuevo Mil Gracias ^^

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 

firefox
Citar            
MensajeEscrito el 16 Sep 2005 04:31 pm
Bueno!!! todo me ha funcionado, mil y mil gracias. Sólo hay un pequeño error cuando lo veo en IE, se ve en blanco unos 10px entre el menú y el contenido, pero en FF y Netscape se ve OK. Igual a medida que le vaya agregadno más cosas, les ire contando

^^

Reyner, no seas envidioso... X DDD

Por Zarzamora

BOFH

3056 de clabLevel

3 tutoriales
12 articulos

 



Ultima edición por Zarzamora el 16 Sep 2005 06:52 pm, editado 1 vez

firefox
Citar            
MensajeEscrito el 16 Sep 2005 06:49 pm
JUAS!

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 16 Sep 2005 07:30 pm

Reyner escribió:

si si , pero el es mi maestro U_U

XD XD


tambien es mi maestro U_U

asi que Reyner JODETE :lol:

PD: sorry no vuelvo hacer spam en este foro

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 18 Sep 2005 02:22 am

Maikel escribió:

PD: sorry no vuelvo hacer spam en este foro

Para que lo recuerdes ! :bate:

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.