Foros del Web » Creando para Internet » CSS »

Solapamiento al utilizar medidas relativas

Estas en el tema de Solapamiento al utilizar medidas relativas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/08/2008, 01:28
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Solapamiento al utilizar medidas relativas

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.
  #2 (permalink)  
Antiguo 06/08/2008, 01:38
Avatar de acoevil  
Fecha de Ingreso: julio-2008
Ubicación: localhost/colombia/sevillaValle.php
Mensajes: 1.123
Antigüedad: 9 años, 4 meses
Puntos: 30
Respuesta: Solapamiento al utilizar medidas relativas

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
  #3 (permalink)  
Antiguo 06/08/2008, 02:46
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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.
  #4 (permalink)  
Antiguo 06/08/2008, 03:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 06/08/2008, 03:26
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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.
  #6 (permalink)  
Antiguo 06/08/2008, 03:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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

No lo has subido para poder verlo, ¿no?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 06/08/2008, 05:07
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

Sí, en el wrapper; y sí, lo he subido.
  #8 (permalink)  
Antiguo 06/08/2008, 05:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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?
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 06/08/2008, 05:38
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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.
  #10 (permalink)  
Antiguo 06/08/2008, 05:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 06/08/2008, 05:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

En cualquier caso, ¿de qué navegadores estamos hablando? A ver si va a estar ahí el problema y no en la pantalla
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 06/08/2008, 06:01
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

No, no es cosa de IE... xDD. Es Firefox (y en Konqueror pasa lo mismo).
  #13 (permalink)  
Antiguo 06/08/2008, 06:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 06/08/2008, 06:50
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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.
  #15 (permalink)  
Antiguo 06/08/2008, 08:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

Cita:
Iniciado por Sanva Ver Mensaje

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).
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 06/08/2008, 12:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 12/08/2008, 06:04
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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í.
Los estilos de la web están en dos archivos CSS:

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.
  #18 (permalink)  
Antiguo 12/08/2008, 11:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

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.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 12/08/2008, 20:16
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Solapamiento al utilizar medidas relativas

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.
  #20 (permalink)  
Antiguo 14/08/2008, 04:25
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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!
  #21 (permalink)  
Antiguo 14/08/2008, 05:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

Cita:
Iniciado por Sanva Ver Mensaje
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:

Cita:
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.
__________________
Visita mi nueva web idplus.org
  #22 (permalink)  
Antiguo 14/08/2008, 09:35
 
Fecha de Ingreso: diciembre-2005
Ubicación: Redondela (Galicia)
Mensajes: 368
Antigüedad: 12 años
Puntos: 1
Respuesta: Solapamiento al utilizar medidas relativas

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

Saludos!
  #23 (permalink)  
Antiguo 14/08/2008, 10:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solapamiento al utilizar medidas relativas

Ningún problema. Era por puntualizar.
__________________
Visita mi nueva web idplus.org
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 13:35.