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
