Re: [Ovillo] ancho con ems
Hay varios ejemplos y desarrollo interesantes para este tema: http://www.alistapart.com/articles/elastic/ http://www.htmldog.com/articles/elasticdesign/demo/ http://www.csszengarden.com/?cssfile=/063/063.css Espero sea útil. Por desgracia aun existen navegadores que no respetan los estandares por lo tanto hoy en el 2005 las páginas se veran diferentes en diferentes plataformas y navegadores, es necesario hacer pruebas para que el sitio se vea bien (no perfecto) en diferentes navegadores. Quizá en algún futuro no lejano ese problema no sea más un problema, por el momento es necesario dedicarse a diseñar de acuerdo al estandar, por eso existe la W3C. Saludos. Exactamente me referia a eso Nicolás :) El tema del redondeo es otra guerra para darle mas salsa al asunto :D El problema al que me referia yo se nota por ejemplo al usar fuentes pequeñas (al limite ) en windows si luego las ves en mac vas a estar fuera de limite y no vas a poder leer-lo ni con lupa :D Si es toda la maquetación en 'em' --como decia Nicolás hace tiempo; layout fluido-- se notan mucho las diferencias al ajustar cajas al 'em' cuando tienen que encajar con imagenes. Como estas són siempre en 'px' tendras problemas de descuadre uno de los dos SO -- arnau siches css.artnau.com Nicolás Fantino wrote: > Hola, Raúl. > > Que conste en actas que en ningún momento dije que el problema de los > redondeos no existiera ;) > > Al menos desde mi experiencia en el uso de em para maquetaciones, hay > navegadores (IE/Mac sin ir más lejos, o Konqueror/Linux, si mal no > recuerdo) que "pueden" llegar a dar problemas a la hora de maquetar > "al pixel" (con excesiva precisión) utilizando em como medida base. > Entiendo que es más a esto a lo que atañe el problema del redondeo que > traes a colación (y quizás tiene más que ver con el origen del hilo). > Así como entiendo que lo que refería are tiene más que ver con lo de > las diferencias de resolución estandar ente SOs (que tal vez no tiene > tanto que ver con el origen del hilo, pero es interesante saber y > tener en cuenta para un mejor manejo de la tipografía de nuestras > páginas). > > Claro que vengo bastnte mal dormido y también es posible que > no esté entendiendo nada :P > > Si así fuera, pido disculpas. > > Saludos, > > N :o))) > > Raúl Martín wrote: > >> Hola Nicolás, >> >> Me refiero más a cosas como esta: >> __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
Exactamente me referia a eso Nicolás :) El tema del redondeo es otra guerra para darle mas salsa al asunto :D El problema al que me referia yo se nota por ejemplo al usar fuentes pequeñas (al limite ) en windows si luego las ves en mac vas a estar fuera de limite y no vas a poder leer-lo ni con lupa :D Si es toda la maquetación en 'em' --como decia Nicolás hace tiempo; layout fluido-- se notan mucho las diferencias al ajustar cajas al 'em' cuando tienen que encajar con imagenes. Como estas són siempre en 'px' tendras problemas de descuadre uno de los dos SO -- arnau siches css.artnau.com Nicolás Fantino wrote: Hola, Raúl. Que conste en actas que en ningún momento dije que el problema de los redondeos no existiera ;) Al menos desde mi experiencia en el uso de em para maquetaciones, hay navegadores (IE/Mac sin ir más lejos, o Konqueror/Linux, si mal no recuerdo) que "pueden" llegar a dar problemas a la hora de maquetar "al pixel" (con excesiva precisión) utilizando em como medida base. Entiendo que es más a esto a lo que atañe el problema del redondeo que traes a colación (y quizás tiene más que ver con el origen del hilo). Así como entiendo que lo que refería are tiene más que ver con lo de las diferencias de resolución estandar ente SOs (que tal vez no tiene tanto que ver con el origen del hilo, pero es interesante saber y tener en cuenta para un mejor manejo de la tipografía de nuestras páginas). Claro que vengo bastnte mal dormido y también es posible que no esté entendiendo nada :P Si así fuera, pido disculpas. Saludos, N :o))) Raúl Martín wrote: Hola Nicolás, Me refiero más a cosas como esta: http://www.mail-archive.com/ovillo@lists.ovillo.org/msg01961.html ya hablado en ovillo, hacia la mitad hablo del efecto de redondeo. Por no repetirme :d Thursday, July 21, 2005, 11:27:15 AM, you wrote: NF> Hasta donde recuerdo, más que un problema de redondeos se trata de una NF> diferencia de resolución predeterminada entre Win y Mac. NF> En un Mac, se asume que la resolución estándar es de 72dpi [puntos por NF> pulgada] (o al menos así era hasta MacOS 9). En un Win, esta resolución NF> estándar es de 96dpi; así, el texto se muestra un 33% más grande de lo NF> que se vería en las mismas condiciones en un Mac (respondiendo a una NF> relación 96/72 = 4/3). NF> De todas formas, recuerdo haber leído por algún lado que los NF> desarrolladores de navegadores para Mac estaban "transando" una solución NF> que nivelara un poco el tema y dejara contentos a todos (o a nadie, NF> según quién lo mire :P). NF> Ahora mismo no logro dar con el sitio donde leí esto último, veré si más NF> tarde lo encuentro. NF> Saludos, NF> N :o))) NF> Raúl Martín wrote: Saludos. _ Todo lo que no aprendí, no se me ha olvidado. _ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
Hola, Raúl. Que conste en actas que en ningún momento dije que el problema de los redondeos no existiera ;) Al menos desde mi experiencia en el uso de em para maquetaciones, hay navegadores (IE/Mac sin ir más lejos, o Konqueror/Linux, si mal no recuerdo) que "pueden" llegar a dar problemas a la hora de maquetar "al pixel" (con excesiva precisión) utilizando em como medida base. Entiendo que es más a esto a lo que atañe el problema del redondeo que traes a colación (y quizás tiene más que ver con el origen del hilo). Así como entiendo que lo que refería are tiene más que ver con lo de las diferencias de resolución estandar ente SOs (que tal vez no tiene tanto que ver con el origen del hilo, pero es interesante saber y tener en cuenta para un mejor manejo de la tipografía de nuestras páginas). Claro que vengo bastnte mal dormido y también es posible que no esté entendiendo nada :P Si así fuera, pido disculpas. Saludos, N :o))) Raúl Martín wrote: Hola Nicolás, Me refiero más a cosas como esta: http://www.mail-archive.com/ovillo@lists.ovillo.org/msg01961.html ya hablado en ovillo, hacia la mitad hablo del efecto de redondeo. Por no repetirme :d Thursday, July 21, 2005, 11:27:15 AM, you wrote: NF> Hasta donde recuerdo, más que un problema de redondeos se trata de una NF> diferencia de resolución predeterminada entre Win y Mac. NF> En un Mac, se asume que la resolución estándar es de 72dpi [puntos por NF> pulgada] (o al menos así era hasta MacOS 9). En un Win, esta resolución NF> estándar es de 96dpi; así, el texto se muestra un 33% más grande de lo NF> que se vería en las mismas condiciones en un Mac (respondiendo a una NF> relación 96/72 = 4/3). NF> De todas formas, recuerdo haber leído por algún lado que los NF> desarrolladores de navegadores para Mac estaban "transando" una solución NF> que nivelara un poco el tema y dejara contentos a todos (o a nadie, NF> según quién lo mire :P). NF> Ahora mismo no logro dar con el sitio donde leí esto último, veré si más NF> tarde lo encuentro. NF> Saludos, NF> N :o))) NF> Raúl Martín wrote: Saludos. _ Todo lo que no aprendí, no se me ha olvidado. _ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
Hasta donde recuerdo, más que un problema de redondeos se trata de una
diferencia de resolución predeterminada entre Win y Mac.
En un Mac, se asume que la resolución estándar es de 72dpi [puntos por
pulgada] (o al menos así era hasta MacOS 9). En un Win, esta resolución
estándar es de 96dpi; así, el texto se muestra un 33% más grande de lo
que se vería en las mismas condiciones en un Mac (respondiendo a una
relación 96/72 = 4/3).
De todas formas, recuerdo haber leído por algún lado que los
desarrolladores de navegadores para Mac estaban "transando" una solución
que nivelara un poco el tema y dejara contentos a todos (o a nadie,
según quién lo mire :P).
Ahora mismo no logro dar con el sitio donde leí esto último, veré si más
tarde lo encuentro.
Saludos,
N :o)))
Raúl Martín wrote:
Hola are,
Es un problema de redondeo, ciertos navegadores pillan las
centésimas y otros no.
Por lo tanto se van "perdiendo tamaños". Además del tamaño base
en el body del em.
Un saludo
Wednesday, July 20, 2005, 1:47:17 PM, you wrote:
a> Solo puntualizar que con esta declaración de
a> body {
a> font-size:62.5%;
a> }
a> se verá distinto en Mac y Windows. En mac es ligeramente más pequeño.
a> --
a> arnau siches
a> css.artnau.com
Saludos.
_
Todo lo que no aprendí,
no se me ha olvidado.
_
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
Solo puntualizar que con esta declaración de
body {
font-size:62.5%;
}
se verá distinto en Mac y Windows. En mac es ligeramente más pequeño.
--
arnau siches
css.artnau.com
Manuel González Noriega wrote:
On 7/20/05, Carlos Revillo <[EMAIL PROTECTED]> wrote:
Hola. Estoy tratando de desarrollar una web utilizando anchos de
contenedores con unidades em´s . Ahora bien, probando en diferentes
navegadores la misma medida de em´s ( 70em ) los únicos que varían son
Opera
e IE para Mac que salen más cortos que en los otros (Explorer, Safari,
Gecko, etc). Supongo que tiene que ver con la configuración de cada
navegador, pero me pregunto si hay alguna forma de igual la anchura en ems
para todos los navegadores, al menos en su configuración estandar.
Gracias.
Carlos, hay una regla muy útil. Dado que la mayoría de navegadores modernos
tienen el tamaño por defecto de fuente en 16px, puedes hacer
body {
font-size:62.5%;
}
Con lo cuál a partir de entonces:
1em = 10px
1.2em =12px
1.5em = 15px
Así calculas mejor ;)
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] ancho con ems
Pues sí. Eso me sirve. Pero solo funciona si al body le das como font-size:1em. Si, como estaba haciendo yo, le dabas al body un 0.7em, entonces en opera tenías la capa menos ancha que en los demás. Gracias mil. Carlos Revillo Tanta Tecnología y Comunicación Grupo Onetec c/ Julián Camarillo 26 1º Of. 2 28037 Madrid Tel.: 91.440.10.40 Fax: 91.304.91.24 www.tantacom.com www.grupoonetec.com -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de [EMAIL PROTECTED] Enviado el: miércoles, 20 de julio de 2005 13:17 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] ancho con ems Hola Carlos :p prueba poner un tamaño de fuente en em´s en el body para establecer que todos ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
On 7/20/05, Carlos Revillo <[EMAIL PROTECTED]> wrote:
>
> Hola. Estoy tratando de desarrollar una web utilizando anchos de
> contenedores con unidades em´s . Ahora bien, probando en diferentes
> navegadores la misma medida de em´s ( 70em ) los únicos que varían son
> Opera
> e IE para Mac que salen más cortos que en los otros (Explorer, Safari,
> Gecko, etc). Supongo que tiene que ver con la configuración de cada
> navegador, pero me pregunto si hay alguna forma de igual la anchura en ems
> para todos los navegadores, al menos en su configuración estandar.
> Gracias.
>
>
Carlos, hay una regla muy útil. Dado que la mayoría de navegadores modernos
tienen el tamaño por defecto de fuente en 16px, puedes hacer
body {
font-size:62.5%;
}
Con lo cuál a partir de entonces:
1em = 10px
1.2em =12px
1.5em = 15px
Así calculas mejor ;)
--
Manuel
a veces :) a veces :(
pero siempre trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web.
http://simplelogica.net # (+34) 985 22 12 65
¡Ah! y escribiendo en Logicola: http://simplelogica.net/logicola/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
El *em* y el *en* son unidades de longitud.
El "em" es igual al tamaño de la letra: por ejemplo, para una fuente a 12
puntos, un "em" son 12 puntos. Un "em" mide exactamente el ancho de la letra
"M" mayúscula de una tipografía dada y a un tamaño dado. Efectivamente,
según esta definición un "em" no mide *físicamente* siempre lo mismo.
Un "en" es la mitad de un "em", el equivalente a la anchura de una "n", o 6
puntos si un "em" es 12.
Un ejemplo es margin-top: 1.5em que funciona a la perfección en la mayoría
de navegadores que respetan los estándares excepto el 94% de usuarios de
internet que tienen su navegador IE (cifra estimada en la mayoria de sitios,
aunque el numero de Firefox por ejemplo ya supera el 20% en páginas no
afines a FF ni anti-IE).
IE da problemas para manejar distintos tamaños (especialmente cuando se
hereda un tamaño definido por un elemento "padre"). Hay una solución muy
simple a este problema. Basta con definir un tamaño de letra basado en
porcentaje al BODY de la página. Además al posicionar con float, IE de Mac
necesita que se defina el ancho de al menos uno de los bloques un poco más
pequeño de lo que la lógica matemática podría decir.
Cualquiera que se haya dedicado en algún momento de su vida al diseño
gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de,
ciertas normas o convenciones. Una de ellas define lo que se considera el
ancho óptimo de una línea de texto para ser leído en bloque. Éste es de
entre 30 em y 35 em. ¿Por qué se usa esta medida? porque el ancho óptimo
para la lectura dependerá, necesariamente, del tipo de letra que se use y,
más necesariamente aún, del tamaño de ésta.
Una práctica que se usa últimamente es usar anchos fijos (px) para definir
los bloques de una página y "em" para el tamaño de la tipografía. Ésto
permite al usuario ver el texto en el tamaño que prefiera. El problema es
que alguien necesite ampliar la tipografía dos o más veces y el ancho del
contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea
queda en entredicho.
Ejemplo Basico en CSS:
body {
font-size: 100%;
}
h1 {
text-size: 2.5em;
}
#contenido {
text-size: .85em;
width: 30em;
background-color: #f0f0f0;
}
En BODY:
Mi cabecera
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec est sit
amet wisi ultricies aliquam. Nulla mollis sodales diam. Duis enim purus,
gravida at, varius sed, egestas sit amet, ligula. Sed est neque, ultricies
ut, fermentum id, congue sed, magna.
Espero que os haya servido para saber un poco más de tipografía y
presentación en web.
Más referencias:
http://www.100px.com/articulos/ni_fijo_ni_liquido_elastico/
http://www.thenoodleincident.com/tutorials/box_lesson/font/
El día 20/07/05, Carlos Revillo <[EMAIL PROTECTED]> escribió:
>
> Hola. Estoy tratando de desarrollar una web utilizando anchos de
> contenedores con unidades em´s . Ahora bien, probando en diferentes
> navegadores la misma medida de em´s ( 70em ) los únicos que varían son
> Opera
> e IE para Mac que salen más cortos que en los otros (Explorer, Safari,
> Gecko, etc). Supongo que tiene que ver con la configuración de cada
> navegador, pero me pregunto si hay alguna forma de igual la anchura en ems
> para todos los navegadores, al menos en su configuración estandar.
> Gracias.
>
>
>
> Carlos Revillo
> Tanta Tecnología y Comunicación
> Grupo Onetec
> c/ Julián Camarillo 26 1º Of. 2
> 28037 Madrid
> Tel.: 91.440.10.40
> Fax: 91.304.91.24
> www.tantacom.com
> www.grupoonetec.com
>
>
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
--
Salu2:
MARTIN desde Valencia (ESPAÑA)
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] ancho con ems
Hola Carlos :p
prueba poner un tamaño de fuente en em´s en el body para establecer que todos
los exploradores tengan el mismo tamaño de fuente, ya que como sabras los em´s
dependen su tamaño de la fuente que se aplique.
body { font-size:1em; font-family:Arial, Verdana, sans-serif;}
div { width:40em; background-color:#ff;}
pruebalo y veras como funciona...
saludines asturianin jejjee
Mensaje citado por Carlos Revillo <[EMAIL PROTECTED]>:
> Hola. Estoy tratando de desarrollar una web utilizando anchos de
> contenedores con unidades em´s . Ahora bien, probando en diferentes
> navegadores la misma medida de em´s ( 70em ) los únicos que varían son Opera
> e IE para Mac que salen más cortos que en los otros (Explorer, Safari,
> Gecko, etc). Supongo que tiene que ver con la configuración de cada
> navegador, pero me pregunto si hay alguna forma de igual la anchura en ems
> para todos los navegadores, al menos en su configuración estandar. Gracias.
>
>
>
> Carlos Revillo
> Tanta Tecnología y Comunicación
> Grupo Onetec
> c/ Julián Camarillo 26 1º Of. 2
> 28037 Madrid
> Tel.: 91.440.10.40
> Fax: 91.304.91.24
> www.tantacom.com
> www.grupoonetec.com
>
>
>
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
