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:

Código:

h ttp://img41.imageshack.us/img41/5919/problemamenu.jpg

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:

Código:

#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...

También he probado poniendole a los div de la cabecera altura de manera elástica:

2.41em

Al igual que al h2, pero sigue sucediendo lo mismo.


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

Si por defecto se tiene este menu:

Código:

h ttp://img269.imageshack.us/img269/1232/menupcpal1.png

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:

Código:

h ttp://img188.imageshack.us/img188/5682/menupcpal2.png

¿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

[Mikmoro]

Bueno, esto hay varias maneras de plantearlo: la primera es poner esa imagen realmente de fondodel h2, sin repetir, centrada y con el color de fondo:

background: #b3bcc3 url(tuimagen.jpg) no-repeat center;

De esta manera se ve el color donde no cubra la imagen, y si el ancho está acotado, que es lo que parece en tu imagen, crecerá de alto al salir la segunda línea y se verá el color de fondo.

Habría más maneras, pero creo que esta es la más sencilla.

[Leunamal]

Iniciado por Mikmoro

Bueno, esto hay varias maneras de plantearlo: la primera es poner esa imagen realmente de fondodel h2, sin repetir, centrada y con el color de fondo:

background: #b3bcc3 url(tuimagen.jpg) no-repeat center;

De esta manera se ve el color donde no cubra la imagen, y si el ancho está acotado, que es lo que parece en tu imagen, crecerá de alto al salir la segunda línea y se verá el color de fondo.

Habría más maneras, pero creo que esta es la más sencilla.

Hola, muchísimas gracias. Ha funcionado. ;) He puesto la imagen en el h2 y la verdad es que gracias a hacerlo así, me ha sobrado un div que hacia de contendor de las cabeceras y así el h2 ya no tiene margins con valores negativos.

Eso sí, los laterales no aparecian, pero he añadido un par de divs dentro del h2 para colocar los laterales y perfecto.

Por cierto, ¿sabes si lo del menu horizontal es normal? En teoria es un diseño líquido, pero como es la primera que hago utilizando esta maquetación, no sé si es normal que se convierta en varias lineas cuando se aumenta demasiado la página (con Ctrl++).

Gracias de nuevo, he estado toda la tarde rompiendome la cabeza y nada.. Al final era hasta fácil. :)

[Mikmoro]

Iniciado por Leunamal

Eso sí, los laterales no aparecian, pero he añadido un par de divs dentro del h2 para colocar los laterales y perfecto.

No creo que los necesites: debería bastar con añadir padding a los lados, de manera que el h2 tenga un tamaño mínimo como la imagen que pones de fondo (que es por lo que no se ven).

Iniciado por Leunamal

Por cierto, ¿sabes si lo del menu horizontal es normal? En teoria es un diseño líquido, pero como es la primera que hago utilizando esta maquetación, no sé si es normal que se convierta en varias lineas cuando se aumenta demasiado la página (con Ctrl++)

Sí, es normal, y a mi juicio hasta saludable: como he dicho muchas veces, quien usa una letra tan grande o aumenta tanto la visión es por alguna razón, y en ese caso seguro que prefiere un menú más feo, a su tamaño y en dos líneas, que uno muy bonito pero demasiado pequeño para lo que necesita.

[Leunamal]

Iniciado por Mikmoro

No creo que los necesites: debería bastar con añadir padding a los lados, de manera que el h2 tenga un tamaño mínimo como la imagen que pones de fondo (que es por lo que no se ven).

Realmente sin no pusiese los divs laterales dentro del h2 cuando se crean 2 lineas porque no cabe en una linea, la parte inferior se queda coloreada entera. Por arriba estaría la cabecera, pero abajo (al nivel de "principal") no se verían los bordes. Probe subiendo un poco los laterales de la zona inferior, pero nada. Como mejor quedaba era añadiendo los talerales dentro del h2.

Iniciado por Mikmoro

Sí, es normal, y a mi juicio hasta saludable: como he dicho muchas veces, quien usa una letra tan grande o aumenta tanto la visión es por alguna razón, y en ese caso seguro que prefiere un menú más feo, a su tamaño y en dos líneas, que uno muy bonito pero demasiado pequeño para lo que necesita.

Cierto, limitaría la visualización del menu horizontal si utilizase max-width o min-width.

Gracias de nuevo por dedicar tu tiempo en ayudarme.

Saludos