Foros del Web » Creando para Internet » CSS »

maqueta para todos los navegadores

Estas en el tema de maqueta para todos los navegadores en el foro de CSS en Foros del Web. Hola comunidad! Determinar el ancho total de los elementos css y el problemas para flotar divs constituyen, a mi parecer, las preguntas más frecuentes en ...
  #1 (permalink)  
Antiguo 03/09/2009, 17:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
maqueta para todos los navegadores

Hola comunidad!

Determinar el ancho total de los elementos css y el problemas para flotar divs constituyen, a mi parecer, las preguntas más frecuentes en lo que refiere a maquetación con css.

El ancho total esta dado por:
margin + padding + width + border
Pero sucede que no todos los navegadores interpretan del mismo modo la css-box inclusive IE varía su interpretación en sus diferentes versiones.

http://www.forosdelweb.com/f4/altura...3/#post3069751 (post #5)

Preguntas:

1. ¿Porque motivo se ve el fondo azul de #principal?

2. ¿Como harías tu para que esta página se vea igual en firefox, IE 5.5, 6, 7 y 8, Opera, Safari y Chrome?

Restricción:
trabajar con la unidad de medida em, o fundamentar la elección de otra.

Aquí la página: http://www.inicio2770.com.ar/ancho_total.html (ver con firefox)

Espero tu ayuda, como seguro muchos otros compañeros del foro

Saludos!
  #2 (permalink)  
Antiguo 03/09/2009, 18:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: maqueta para todos los navegadores

1: fácil
#principal {
background-color:blue;
...

2: en FF e IE7
si por verse igual entiendes "exactamente igual", es imposible en un 99'9% de los casos
Lo que sí se puede hacer es que se vea razonablemente parecido.
Y en tu caso, la diferencia es la proporción. Debido al distinto tamaño de fuente que pueda estar definida en uno u otro navegador lo que cambia es el tamaño en pixeles de un elemento, pero no la relación que hay entre los distintos elementos.
Para "forzar" a que i66 se "comporte" razonablemente bien, tienes dos opciones (entre otras posibles): utilizar una hoja de estilos específica para contrarrestar ciertos fallos o el famoso js que se ha mencionado varias veces por estos foros.
Y de ie5.5 casi mejor lo olvidas a estas alturas

3: aunque no lo planteas :
los estilos en el head se colocan entre:
<style type>
</style>
según el doctype declarado.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 03/09/2009, 18:44
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: maqueta para todos los navegadores

Hola Kseso?:

1.
Cito: " fácil
#principal {
background-color:blue;"

Lo hice desde un prinicpio solo que en la url que deje veras que ese fondo según los width+margin+paffing+border que aplique a los divs anidados a #principal no tendría porque verse el background-color: blue; de #principal.

2. (para cuidar nuestra salud mental podemos olvidarnos si quieres de IE 5.5 y 6) Cuando dices que la diferencia es la proporcion te refieres a que ¿cada navegador asigna diferente proporcion para em? es decir que FF asigna por ejemplo 16px=1em e IE por ejemplo 14px=1em?

3. el doctype declarado fue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
y coloco los estilos entre
<style type="text/css"></style>
¿que aconsejas al respecto?

Saludos!
  #4 (permalink)  
Antiguo 03/09/2009, 19:56
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: maqueta para todos los navegadores

no entiendo nada cual es tu fin? o duda?...

Cita:
¿cada navegador asigna diferente proporcion para em?
no solo para eso sino para muchas otras cosas mas una razon mas para usar un RESET... (y aun asi nos quedamos cortos)

Cita:
es decir que FF asigna por ejemplo 16px=1em e IE por ejemplo 14px=1em?
no me quiero atrever a caer en numeros exactos pero algo asi...

igual podemos tratar para no liarnos mucho con el em...
Código css:
Ver original
  1. body {font-size: 62.5&#37;;}
y asi
1em = 10px
muy util cuando tenemos diseños fluidos...

y tus estilos deberian estar en un ".css" para no mesclar y tener todo en orden chao y suerte!...
  #5 (permalink)  
Antiguo 04/09/2009, 07:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: maqueta para todos los navegadores

Sobre el valor em
La referencia como bien dices es la letra M y para calcular el tamaño en px el navegador toma como valor el tamaño especificado por mi (o por ti, o por el visitante) en las opciones de configuración de mi navegador.

Una imagen valdrá más que todo:


En este caso es FF, pero podría ser cualquiera.
El valor señalado es el que se toma como base para calcular el tamaño.

El resto tendrá que esperar, con el funcionamiento del foro es imposible intentar responder nada

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 04/09/2009, 10:16
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: maqueta para todos los navegadores

wow... se me olvida que el navegador se puede configurar esas cosas pero llevas razon... y tambien con lo del foro que se ta petando
  #7 (permalink)  
Antiguo 04/09/2009, 18:10
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: maqueta para todos los navegadores

Gracias Kseso? ese era el detalle que me faltaba. y si ya queremos disfrutar del foro a pleno y sin interrupciones (es que nos volvemos un poco adictos jeje).
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 15:14.