Botones con Listas CSS

[marie_florido]

Buenos Dias. Soy principiante en CSS y tengo algunas dudas. Estoy haciendo un menu horizontal con listas ordenadas. Cada elemento de la lista tiene definidas un conjunto de propiedades que lo hacen parecer un boton, tienen un color de fondo definido y un margen que separa los textos de cada boton. Al ser el menu Horizontal, los elementos de mi lista estan ordenados uno al lado del otro y no tienen ningun tipo de viñeta. Ademas funcionan como boton y cambian de estado al evento del raton, es decir, cuando el raton se posa sobre el texto de un boton cambia de fondo mediante la propiedad a: Hover, y asi sucesivamente al visitar el link, estar activo, etc. El menu con listas funciona, solo tengo 2 inconvenientes:
1) El texto del boton aparece alineado en la parte superior, ya intente con text-align y no funciona
2) La zona activa del raton es el texto y me gustaria que fuera el recuadro, ya que donde el texto del boton es pequeño me queda una amplia zona vacia, que aunque tenga contacto con el raton, no realiza ningun cambio hasta llegar al texto.

Espero me haya explicado claramente.

Aqui esta el codigo:
Html:

Codigo HTML


<ul class="Servicios">
<li class="Secundario"><a href="">Item1</a> </li>
<li class="Secundario"><a href="">Item2</a></li>
<li class="Secundario"><a href="">Item3</a></li>
<li class="Secundario"><a href="">Item4</a></li>
<li class="Secundario"><a href="">Item5</a></li>
<li class="Secundario"><a href="">Item6</a></li>
</ul>


Codigo CSS

.Servicios{

margin:0;
top:400px;
right:0;
z-index:4;
}

.Servicios
a{text-decoration:none;}

.Servicios
li
a{
color: #f6921c;
}

.Servicios li.Secundario{
left:-22px;
color:#F6921C;
height:30px;
float:left;
width:165px;
margin:1px;
padding:0;
list-style:none;
background:#335362;
font:11px Copperplate Gothic Bold, Arial Black, Verdana,Tahoma,Helvetica,Sans-serif;
text-align:center;
position:relative;
cursor:default;
font-weight: bold;
z-index:3;

}

.Servicios li.Secundario a:hover{
/* Cuando se posa sobre el boton se coloca con fondo NARANJA*/
color:#335362;
height:30px;
float:left;
width:165px;
margin:0px;
padding:0;
list-style:none;
background:#F6921C;
font:11px Copperplate Gothic Bold, Arial Black, Verdana,Tahoma,Helvetica,Sans-serif;
text-align:center;
position:relative;
cursor:default;
font-weight: bold;
/*text-decoration:underline;*/
}

.Servicios li li a{
border-bottom: 3px solid;
width:16em;
border-color: transparent;
display:block;
color:#355362;
font-weight: bold;
line-height:18px;*/
}


Espero me puedan ayudar, muchas gracias...

[laratik]

Buenos días marie_florido, para empezar te recomiendo hacer los siguientes cambios:

Código CSS:

.Servicios 
li
a{
color: #f6921c; display: block; padding-top: 5px;
}
 

con display:block logras que no solo sea clickleable el area del texto, si no todo el cuadrado y con padding-top centras verticalmente el texto.

Código CSS:

.Servicios li.Secundario a:hover{
/* Cuando se posa sobre el boton se coloca con fondo NARANJA*/
color:#335362; 
height:25px; 
float:left;
width:165px;
margin:0px;
padding-top: 5px;
list-style:none;
background:#F6921C; 
font:11px Copperplate Gothic Bold, Arial Black, Verdana,Tahoma,Helvetica,Sans-serif; 
text-align:center;
position:relative;
cursor:default;
font-weight: bold;
/*text-decoration:underline;*/
}
 

como has colocado un padding dentro de la etiqueta a, debes cuadrar height y el padding en el hover.

Espero que te halla servido de ayuda.

[marie_florido]

Gracias! Habia probado con el siguiente codigo:
img.valign {
height: 100%;
vertical-align: middle;
width: 0px;
}
pero cuando pasaba el raton por encima colocaba el texto en la parte superior nuevamente. Muchisimas gracias por el aporte...

[sanxuan]

La propiedad vertical-align no te funcionará con el texto salvo que lo uses dentro de una tabla.
Una de las posibles soluciones es usar la propiedad line-height en tu enlace y asignarle el mismo valor que la altura de éste. Servirá siempre que el texto no use más de una linea.

[marie_florido]

Ok... He probado con la solucion recomendada por laratik, a la cual agradezco mucho su aporte, pero me distorsiona mucho la capa, aumenta su tamaño y me crea lios con las diferentes acciones del raton.

La propieda line-height determina el ancho de la linea, entiendo que debo colocarle el mismo tamaño de mi recuadro, en este caso 30px, pero no se como le indico que lo alinee en el centro, al colocarle line-height:30px; no hace nada, sigue el texto en la parte superior. Gracias de antemano por su ayuda

[laratik]

Me parece realmente extraño, ya que a mi el diseño no se me desordenar al hacer hover sobre el enlace, es más se me ve asi:



Deberias revisar si estas modificando correctamente la speudoclase hover de la etiqueta anchor, aunque tambien puedes probar con la solución de sanxuan. SALUDOS.

[sanxuan]

Sólo puedo recomendarte que compruebes que estás usando la etiqueta <!DOCTYPE>. Sin ella IE no mostrará la página como esperas.
Si eso no es suficiente, comprueba tu código en http://validator.w3.org/unicorn y corrige los errores que pueda haber.

[marie_florido]

Muchas Gracias Laratik, tenias razon, tenia monton de codigo de mas... al limpiarlo un poco me quedo perfecto, gracias tambien sanxuan por sus recomendaciones.


Ahora tengo otra duda, tengo un sub menu... Los botones del sub menu son mas grandes que los botones del menu. Este se encuentra situado justo debajo de un boton del menu ya que es horizontal. El problema radica cuando paso el mouse, ya que toma la propiedad hover del menu y me recorta el boton al tamaño del boton del menu raiz y si el texto es largo no puedo visualizarlo completamente. En las imagenes se puede apreciar el submenu en su estado normal, y lo que ocurre (con fondo naranja) cuando paso el mouse (a:hover) por cada boton del sub menu.

Espero puedan ayudarme y muchas gracias nuevamente...

[marie_florido]

Ya consegui que funcione como quiero, solo falta un ultimo detalle, cuando se desplega el submenu, el boton padre pierde la propiedad hover, como si no estuviera activo. Explico con la imagen a ver si pueden ayudarme nuevamente. Gracias.

Lo que quiero es que Item 2, tambien tenga fondo naranja cuando el sub menu este desplegado...

[laratik]

Hola marie_florido, me alegra que hayas podido solucionar tus problemas, justamente he estado tratando de ayudar en un problema parecido al que ahora tu tienes, la solución que doy es la siguiente, en ves de colocarle la speudoclase hover al anchor <a>, se le ponga al elemento de lista <li>, de esta forma hasta que no se retire el mouse de todo lo que contenga <li> no se le va a quitar el color al elemento.

Espero haberte sido de ayuda.

[marie_florido]

Muchisimas gracias, estuve revisando aqui en el foro y consegui esta solucion bien explicada, gracias...

http://www.forosdelweb.com/f53/menu-desplegable-100-css-595007/