Solapamiento al utilizar medidas relativas

[Sanva]

Hola a todos.

En mi último proyecto he decidido utilizar medidas relativas (em), en la medida de lo posible.

Por lo general la cosa funciona bastante bien, he comparado la web en tres ordenadores distintos (17'' a 1280 x 1024, 15'' a 1024 x 768 y 8.9'' a 1024 x 600) y observo que las proporciones se mantienen y la letra es legible en todos los casos.

Sin embargo tengo un problema, y es que en la parte superior de la web tengo el título de la misma a la izquierda y un menú de botones en horizontal a la derecha. Esta disposición de ve perfecta en el monitor de 17'', pero no en los otros dos, donde el título se solapa con el menú. En el monitor de 17'' puedo hacer más pequeña la ventana del navegador, todo lo que quiera, que esto no pasa... por lo que supongo que será un problema relacionado con las medidas relativas (el menú ocupa un tamaño determinado, en píxeles, ya que de otro modo los iconos que tiene no quedarían bien, mientras que el título tiene un tamaño relativo... por lo que dependiendo del navegador, la plataforma y el tamaño/resolución del monitor ocupa más o menos píxeles).

Os pongo la web por si queréis hecharle un vistazo al código: http://www.autoescuelacesantes.com/

¿Que debería hacer para solucionar esto? ¿Ponerle al título una medida en píxeles sería una buena opción?

Saludos, y gracias por vuestro tiempo.

[acoevil]

Hola quetal pues no se mucho de css y si me equivoco me corriges y si al titulo le haces algo como esto

h1
{
font-size:150%;
}

DE ESTA FORMA SOLUCIONE ALGO PARECIDO

SALUDOS

[Sanva]

No, eso no funciona. Supuse que al poner un font-size del 100% la fuente ocuparía toda la capa, pero no es así. Al parecer, al menos para Firefox, font-size:100% es equivalente a font-size:1em.

[Mikmoro]

Podrías indicar el tamaño del contenedor también en em, en lugar de 900px, por ejemplo 56 o 57 em. De sa manera, se mantendrían las proporciones.

[Sanva]

Lo he cambiado y el problema persiste. De hecho parece que las proporciones no se mantienen, ya que el título en el monitor de 17'' ocupa hasta algo menos de la mitad del contenedor principal, mientras que el los otros ocupa hasta algo más de la mitad... y ahora ambas medidas están en em.

[Mikmoro]

Me refería al div wrapper, que supongo que será donde lo has hecho.

No lo has subido para poder verlo, ¿no?

[Sanva]

Sí, en el wrapper; y sí, lo he subido.

[Mikmoro]

Bien. Y ahora, ¿te sigue montando el título y el menú? ¿no te aparece un scroll horizontal y te mantiene las proporcioines en el monitor pequeño?

[Sanva]

No no, lo muestra como al principio... sólo ha variado un pelín la anchura del wrapper (la diferencia entre 900px y 56em), lo demás sigue igual.

La barra horizontal aparece en la ventana del navegador del de 17'' si la hago más pequeña, pero vamos, es el comportamiento que tenía ya al principio.

[Mikmoro]

Pues ahí pasa algo, porque si un monitor de 8,9 pulgadas muestra el título al mismo tamaño que otro monitor por estar definido en "em" y tener definido como tamaño por defecto 16px (por ejemplo), de la misma manera el ancho en que debería mostrar la web al ponerle 56em, sería igual al de cualquier otro monitor, es decir, que como no cabe, debería sacar el scroll horizontal y mantener las proporciones.

Si no es así no lo entiendo, te lo aseguro.

[Mikmoro]

En cualquier caso, ¿de qué navegadores estamos hablando? A ver si va a estar ahí el problema y no en la pantalla

[Sanva]

No, no es cosa de IE... xDD. Es Firefox (y en Konqueror pasa lo mismo).

[Mikmoro]

Es decir, recapitulando:

- tu ves tu página en un monitor de 8,9 pulgadas con firefox o konkeror.
- tienes definido el tamaño del h1 a 2,75em
- tienes el contenedor general definido en 56em
- tienes el menú definido con posición absoluta en right 1em

y a pesar de eso, el título y el menú se montan, el fondo no ocupa más de una pantalla de ancho porque no te aparece el scroll horizontal sino que está confinado en los límites.

Me rindo.

[Sanva]

Sí, yo hice lo mismo... simplemente no lo entiendo. De hecho, suponía que el problema estaba con el menú, que ocupa un espacio absoluto (ya que contiene iconos)... pero es que el problema está por ambas partes, ya que tomando como referencia el "1" que hay a pie de página, y que está centrado, veo perfectamente que tanto el título como el menú pasan de la mitad de la página en los dos monitores pequeños, mientras que en el grande no llegan. Luego, las proporciones no se mantienen.

Ni idea de dónde puede estar el problema.

[Mikmoro]

Iniciado por Sanva

Ni idea de dónde puede estar el problema.

Es evidente que el problema está en los pixels del menú que es lo único que no redimensiona según el monitor.

Si tienes la necesidad u obligación de hacer que se vea bien en monitores tan pequeños, no tienes más remedio que convertir el título a pixels (44 serían 2.75em, más o menos).

[Mikmoro]

Mira a ver si te gusta este ejemplo

Prueba a modificar el tamaño del texto con CTRL+ o la rueda del ratón y verás el efecto.

[Sanva]

Vaya, pues no se pixelan tanto las imágenes... quizá sea buena idea poner todo en medidas relativas, incluso al tratar con iconos... Pero es que ahora la cosa se ha complicado aún más...

He añadido una nueva funcionalidad al sitio, una calculadora muy simple para la sección de tarifas... y vuelvo a tener problemas con las dichosas proporciones... Os dejo las tres capturas de pantalla para que saquéis conclusiones. Creía que comprendía lo de las medidas relativas --me parece un concepto muy simple... la verdad-- pero va a ser que no es así.

• Monitor de 17''
• Monitor de 15''
• Monitor de 8.9''

Los estilos de la web están en dos archivos CSS:

• General
• Sección de precios

El primero de ellos es el que da estilo a toda la web, y creo que lo único relevante de él es decir que establece casi todas las medidas en em. El segundo es el que le da el estilo al recuadro de información.

Mi planteamiento era el de que, poniendo todas las medidas en em, no tendría problemas al cambiar de resolución o monitor... ya que las cosas encajarían siempre... pero hago algo mal, y no se el qué. Es de suponer que si la medida de la tabla es arbitraria (no la defino, ocupa lo que ocupe el texto de sus cabeceras) y la del recuadro de información es relativa (17em), si estas medidas quedan bien en un monitor... en otro también deberían quedar bien, porque si su medida en em es, pongamos por caso exagerado, la mitad que en el otro, es la mitad para los textos de la tabla (con lo que la tabla ocuparía la mitad) y la mitad para esos 17em (con lo que el recuadro ocuparía también la mitad, y todos contentos).

¿Algún error en mis suposiciones?

¿Se os ocurre algo que pueda hacer para solucionar esto --y, mejor aún, para comprender el error--?

Muchas gracias por vuestro tiempo.

[Mikmoro]

Veamos: lo único que es realmente relativo al tamaño de tu monitor es el porcentaje, de manera que un 50% siempre será la mitad de la pantalla sea esta la que sea y con cualquier resolución.

El "em" representa el tamaño de la letra "m" minúscula de la fuenta que tengas establecida por defecto si no se indica una fuente, y al tamaño que tengas establecido como predeterminado. De tal manera que si tu navegador tiene por defecto Times New Roman de 16px, 1em representa casi con exactitud 16px.

Los monitores pequeños y con baja resolución suelen tener igualmente establecido el tamaño de letra por defecto a la misma cantidad de pixels que el resto, lo que provoca que generalmente la letra se vea mucho más grande, porque el tamaño del pixel también lo es (cambia en el de 17" la resolución a 800 x 600 y verás una letra enorme).

La principal utilidad del "em" es que si tu tienes establecido un tamaño de letra mayor de lo habitual por problemas de visión o simplemente porque te gusta, mi diseño se adaptará y verás la letra mucho más grande sin hacer nada, adecuada a tu tamaño establecido.

Espero que esto te aclare algo.

[Triby]

Puedes probar a ponerle al título un margen a la derecha para evitar que quede sobrepuesto, si conoces las medidas de las imágenes va a resultar más fácil.

Código:

h1 {
    margin-right:300px;
}

Recuerda verificarlo también con IExplorer, no sabe respetar márgenes y espacios, aunque le especifiques las medidas exactas.

[Sanva]

Gracias por tu explicación, Mikmoro, pero discrepo en lo de que las únicas medidas relativas son los porcentajes. Los píxeles, los em y los ex también lo son, ya que serán diferentes según el sistema [Aquí mismo las definen como relativas]. Lo que pasa es que son relativas con respecto a cosas distintas.

Los porcentajes son relativos a otro porcentaje, teniendo en cuenta que el 100% sería el primer contenedor, el espacio del navegador para el documento HTML (por eso con los porcentajes la página va cambiando si cambias el tamaño de la ventana del navegador).

Los píxeles son relativos al pixel de la pantalla. Si los píxeles son más pequeños (igual tamaño de pantalla pero más resolución) las cosas se verán más pequeñas, y viceversa, pero las proporciones deberían respetarse.

Lo mismo pasa con em y ex, sólo que estos son relativos al tamaño en puntos de la fuente normal del sistema o del navegador.

Las medidas absolutas serían medidas como los centímetros, las pulgadas, etc., ya que su medida no depende del tamaño de la fuente predeterminada, de la resolución de la pantalla o del tamaño de la ventana del navegador, sino de un patrón externo.

Comprendiendo bien todo esto, lo único que hice fue ponerle a las tablas que se solapaban con el recuadro de información un max-width de 35em (el recuadro ocupa 17em de un total de 56em, y he dejado 4em para márgenes). Es de suponer que los em deberían respetar también las proporciones... y si no es así supongo que será por factores que no he tenido en cuenta. Y, ahora que me fijo, la tabla tiene texto en negrita en sus encabezados, y puede que sea ese uno de los factores, ya que el texto en negrita quizá ocupe más en un monitor más pequeño (vamos, que no se me ocurre nada mejor).

El solapado del título con el menú, que era el problema original de este hilo, lo he solucionado poniéndole un max-width del 50% al título, de tal forma que si necesita más espacio se corte en dos líneas.

Ahora todo se ve perfectamente en los tres monitores.

Muchas gracias por vuestra ayuda!

[Mikmoro]

Iniciado por Sanva

Gracias por tu explicación, Mikmoro, pero discrepo en lo de que las únicas medidas relativas son los porcentajes.

Creo que no has leido bien mi primer párrafo:

Veamos: lo único que es realmente relativo al tamaño de tu monitor es el porcentaje, de manera que un 50% siempre será la mitad de la pantalla sea esta la que sea y con cualquier resolución.

Donde no digo en absoluto que em y px no sean medidas relativas, que como puedes imaginar lo sé bien

Si te fijas decía: "lo único realmente relativo al tamaño de tu monitor es el porcentaje", y esto es así, ¿no? Ni el em ni el px son relativos al tamaño del monitor, sino de la resolución.

Me alegro de que lo hayas solucionado.

Hasta la vista.

[Sanva]

Tienes razón, le había encontrado un significado excluyente, te pido disculpas.

Saludos!

[Mikmoro]

Ningún problema. Era por puntualizar.