Problemas con CSS (maquetación líquida)

Leunamal

Hola, estoy intentado realizar una página con diseño líquido. Estoy teniendo problemillas con esto de la maquetación líquida.

Os comento lo que me ocurre por si alguno de ustedes sabe como arreglarlo.

En primer lugar, tengo un menu izquierdo, con su cabecera. Por defecto se ve bien, pero si alguien tiene alguna deficiencia visual y le da al tope del tamaño de la fuente (Ctrl ++ en Firefox), se ve un trocito en blanco debajo de la imagen de la cabecera del menu. Pongo una captura de pantalla para que se entienda bien:

Esto se debe a que las imagenes de la cabecera tienen de tamaño 29 pixeles, al aumentar el tamaño, la frase Menu Principal ya no cabría en una sola línea, por lo que tiene pasarse hacia abajo "Principal", al hacerlo se ve el cacho ese en blanco.

He probado hacer esto:

#menu h2{
	background: #b3bcc3;  <=============
	font-size:12px;
	padding:8px 10px;
	display:block;
	text-decoration:none;
	color: #369;
	letter-spacing:0px;
	margin-top: -29px;
	text-align: center;
}

Donde h2 está incluida en un div que es donde se coloca las imagenes de la cabecera. Al añadir la línea indicada pro la flecha se quita el degradado del h2 y se ve entero a ese color, la idea es que se coloree solo la parte de abajo.

¿Cómo podría colorear la parte de abajo con el color #b3bcc3? Estoy aquí rompiendome la cabeza para conseguirlo, pero nada...

Tengo otra duda, a ver si alguien podría resolvermela.

Si por defecto se tiene este menu:

Si como en el caso anterior, se le da a CTRL++ en Firefox para aumentar el tamaño de la página, aparece el menu de la siguiente manera:

¿Es normal que quede el menu así? En las plantillas que he estado mirando realmente no son 100% líquidas son híbridas ya que impiden que se den este tipo de situaciones. Aunque bajo mi punto de vista es mejor que se vea aunque sea así en plan troceado que directamente no se vea porque el programador ha elegido de que solo salga horizontalmente.
¿Debería restringir el tamaño del menu, pero cambiar de alguna manera el tamaño de la fuente?

Un saludo

Dod-Evers

busca qué son los "em" y no me pongas los tamaños en píxeles fijos.

Leunamal

#2 sé lo que es, se utiliza para la maquetación elástica si no me equivoco.

Aun así, no lo he utilizado aún. ¿se le puede poner a la cabecera del menu un tamaño en em y al darle al CTRL++ tambien crece? Voy a probarlo.

Gracias por contestar ;)

Dod-Evers

los em se utilizan para eso, para que cuando tu aumentes las cosas no se te descojone...

Leunamal

#4 Acabo de leer y de hacer pruebas utilizando ems. He seguido esta página:

http://www.macoteca.com/como-crear-layouts-elasticos-usando-la-medida-em/380

La verdad es que viene todo muy clarito. Aun así, sigue mostrandome el rectangulo blanco en la palabra "Principal". Existe un problema con esto, voy a intentar explicar lo que ocurre.

Si se pone que el tamaño de la fuente es de 12pixeles en el div donde se encuentra las imagenes de las cabeceras y en el del h2 también, y se quiere poner la altura elásticamente (con em). Sabiendo que el tamaño de la imagen es de 29pixeles (la de la cabecera), he realizado este calculo (qué es como funciona esto de medir con ems):

12 px * x em = 29px

se despeja x = 2.416666...

Pongo en el div donde esta la cabecera height: 2.41em; y se ve perfecto. Como siempre. Sin embargo, cuando se aumenta el tamaño (Ctrl++), ocurre lo mismo. La razón es porque el tamaño de la fuente sigue siendo la misma, es decir, la conversión a pixeles seguirá siendo la misma aunque ponga 2.4, al dividirse el texto en 2 lineas porque no cabe en una linea el cálculo en em sigue siendo el mismo. Por eso ocurre lo mismo que antes. No sé si me he explicado bien.

Voy a mirar a ver si a alguien más le ha pasado lo mismo. Lo ideal hubiese sido que al crearse automáticamente una nueva linea porque no cabe en una es que tambien se aumentase el valor del em. Una putada...

Saludos

Leunamal

Bueno, al final he conseguido hacerlo bien. La imagen de la cabecera la puse dentro del h2, puse de que solo se repitiese en el eje x, de manera que cuando "menu principal" se parta en 2 lineas, se rellene del color del fondo de la imagen.

Con respecto al menu horizontal, he preguntado en otro foro y parece ser que es normal. Es mejor que se vea así a que por atender a pijadas de diseño no se vea o tenga la letra muy pequeña cuando realmente se intenta hacer esto para mejorar la accesibilidad.

Usuarios habituales

  • Leunamal
  • Dod-Evers