Foros del Web » Creando para Internet » CSS »

Botones con Listas CSS

Estas en el tema de Botones con Listas CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/03/2011, 10:14
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 6 años, 8 meses
Puntos: 0
Pregunta Botones con Listas CSS

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...
  #2 (permalink)  
Antiguo 17/03/2011, 11:05
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: Botones con Listas CSS

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

Código CSS:
Ver original
  1. .Servicios
  2. li
  3. a{
  4. color: #f6921c; display: block; padding-top: 5px;
  5. }

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:
Ver original
  1. .Servicios li.Secundario a:hover{
  2. /* Cuando se posa sobre el boton se coloca con fondo NARANJA*/
  3. color:#335362;
  4. height:25px;
  5. float:left;
  6. width:165px;
  7. margin:0px;
  8. padding-top: 5px;
  9. list-style:none;
  10. background:#F6921C;
  11. font:11px Copperplate Gothic Bold, Arial Black, Verdana,Tahoma,Helvetica,Sans-serif;
  12. text-align:center;
  13. position:relative;
  14. cursor:default;
  15. font-weight: bold;
  16. /*text-decoration:underline;*/
  17. }

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.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 17/03/2011, 16:51
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Botones con Listas CSS

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...
  #4 (permalink)  
Antiguo 17/03/2011, 17:04
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Botones con Listas CSS

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.
  #5 (permalink)  
Antiguo 17/03/2011, 18:07
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Botones con Listas CSS

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
  #6 (permalink)  
Antiguo 17/03/2011, 18:28
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: Botones con Listas CSS

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.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #7 (permalink)  
Antiguo 17/03/2011, 19:54
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Botones con Listas CSS

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.
  #8 (permalink)  
Antiguo 21/03/2011, 08:53
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Botones con Listas CSS

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







Última edición por marie_florido; 21/03/2011 a las 09:38
  #9 (permalink)  
Antiguo 21/03/2011, 11:40
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Botones con Listas CSS

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

Última edición por marie_florido; 21/03/2011 a las 11:52
  #10 (permalink)  
Antiguo 21/03/2011, 12:26
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: Botones con Listas CSS

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.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #11 (permalink)  
Antiguo 25/03/2011, 20:43
 
Fecha de Ingreso: marzo-2011
Mensajes: 14
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Botones con Listas CSS

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/

Etiquetas: botones, horizontal, listas, ordenadas, centrar
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 15:01.