Foros del Web » Creando para Internet » CSS »

hover y elementos menu horizontal

 Estas en el tema de hover y elementos menu horizontal en el foro de CSS en Foros del Web. Hola a todos, tengo un problemilla con un menu horizontal no consigo que el elemento <li><a> mediante la propiedad hover se me ilumine en un ...
  #1 (permalink)  
Antiguo 19/07/2012, 06:16
ztb
 
Fecha de Ingreso: julio-2012
Mensajes: 1
Antigüedad: 12 años, 4 meses
Puntos: 0
hover y elementos menu horizontal
Hola a todos, tengo un problemilla con un menu horizontal no consigo que el elemento <li><a> mediante la propiedad hover se me ilumine en un tamaño concreto. vamos q no consigo amplirlo para que me quede un menu pretty.

[IMG]C:\Documents and Settings\smartin\Escritorio\dibujo.bmp[/IMG]

el css es el siguiente:

#menu-bar {
margin: 0px 0px 0px 0px;
padding: 0px 6px 0px 6px;
height: 33px;
width: 93%;
line-height: 100%;
border-radius: 22px;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #328AFC;
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#2DA8FA, endColorstr=#112A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#2DA8FA), to(#112A7A));
background: -moz-linear-gradient(top, #2DA8FA, #112A7A);
border: solid 1px #6D6D6D;
overflow:visible;
}

#menu-bar li {
margin: 0px 6px 0px 6px;
padding: 0px 0px 7px 0px;
float: left;
position: relative;
list-style: none;
z-index:100;
/*display:inline;*/

}

#menu-bar a {
font-size: 13px;
color:#FFFFFF;
text-decoration: none;
display:block;
padding: 8px 20px 8px 0px;
margin: 0px 0px 0px 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-right: solid 1px #FFFFFF;

/*border-left: solid 1px #FFFFFF;*/

}

#menu-bar .selected a, #menu-bar li:hover > a {
background: #0399D4;
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#424242, endColorstr=#424242);
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#424242));
background: -moz-linear-gradient(right, #424242, #424242);
color:;/*lletra sempre blanca meny sup*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: none;
filter: alpha(opacity=100);
opacity: 1;
}

/*al navegar per sobre de l'element del submenu*/
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #FFFFFF;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#04ACEC, endColorstr=#0186BA);
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
#menu-bar ul {
background: #424242;
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#0A0A0A, endColorstr=#454545);
background: -webkit-gradient(linear, left top, left bottom, from(#0A0A0A), to(#454545));
background: -moz-linear-gradient(top, #0A0A0A, #454545);
display: none;
margin: 0;
padding: 0;
width: 310px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
z-index:100;
}

#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}

#menu-bar ul li ul {
filter: alpha(opacity=85);
opacity: 0.85;
}

#menu-bar ul a {
padding:10px 0px 10px 15px;
color:color:#FFFFFF /*#424242 */!important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;

}
#menu-bar ul li:first-child > a {
border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: block;
}

html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}

gracias.
  #2 (permalink)  
Antiguo 19/07/2012, 07:48
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: hover y elementos menu horizontal
Como es su primer mensaje lo haré yo por usted:
Cita:
Iniciado por ztb Ver Mensaje
Hola a todos, tengo un problemilla con un menu horizontal no consigo que el elemento <li><a> mediante la propiedad hover se me ilumine en un tamaño concreto. vamos q no consigo amplirlo para que me quede un menu pretty.
Defina lo que entiende por:
iluminar un menú y ampliar un menú. En ninguna situación son verbos intercambiables o que signifiquen lo mismo.
Defina qué es un "menu pretty" y qué significado tiene para usted esa expresión.

[IMG]C:\Documents and Settings\smartin\Escritorio\dibujo.bmp[/IMG]
No se si habrá sido un despiste o total desconocimiento. Pero no espere que podamos acceder a un archivo que está en su disco duro.


el css es el siguiente:
acostúmbrese a publicar los códigos con su etiqueta (use el "highlight")
Código CSS: 
Ver original
  1. #menu-bar {
  2.   margin: 0px 0px 0px 0px;
  3.   padding: 0px 6px 0px 6px;
  4.   height: 33px;
  5.   width: 93%;
  6.   line-height: 100%;
  7.   border-radius: 22px;
  8.   -webkit-border-radius: 22px;
  9.   -moz-border-radius: 22px;
  10.   box-shadow: 2px 2px 3px #666666;
  11.   -webkit-box-shadow: 2px 2px 3px #666666;
  12.   -moz-box-shadow: 2px 2px 3px #666666;
  13.   background: #328AFC;
  14.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2DA8FA, endColorstr=#112A7A);
  15.   background: -webkit-gradient(linear, left top, left bottom, from(#2DA8FA), to(#112A7A));
  16.   background: -moz-linear-gradient(top,  #2DA8FA,  #112A7A);
  17.   border: solid 1px #6D6D6D;
  18.   overflow:visible;
  19. }
  20.  
  21. #menu-bar li {
  22.   margin: 0px 6px 0px 6px;
  23.   padding: 0px 0px 7px 0px;
  24.   float: left;
  25.   position: relative;
  26.   list-style: none;
  27.   z-index:100;
  28.   /*display:inline;*/
  29.   
  30. }
  31.  
  32. #menu-bar a {
  33.   font-size: 13px;
  34.   color:#FFFFFF;
  35.   text-decoration: none;
  36.   display:block;
  37.   padding: 8px 20px 8px 0px;
  38.   margin: 0px 0px 0px 0px;
  39.   border-radius: 0px;
  40.   -webkit-border-radius: 0px;
  41.   -moz-border-radius: 0px;
  42.   border-right: solid 1px #FFFFFF;
  43.  
  44.   /*border-left: solid 1px #FFFFFF;*/
  45.  
  46. }
  47.  
  48. #menu-bar .selected a, #menu-bar li:hover > a {
  49.   background: #0399D4;
  50.   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#424242, endColorstr=#424242);
  51.   background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#424242));
  52.   background: -moz-linear-gradient(right,  #424242,  #424242);
  53.   color:;/*lletra sempre blanca meny sup*/
  54.   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  55.   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  56.   box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  57.   text-shadow: none;
  58.   filter: alpha(opacity=100);
  59.   opacity: 1;
  60. }
  61.  
  62. /*al navegar per sobre de l'element del submenu*/
  63. #menu-bar ul li:hover a, #menu-bar li:hover li a {
  64.   background: none;
  65.   border: none;
  66.   color: #FFFFFF;
  67.   -box-shadow: none;
  68.   -webkit-box-shadow: none;
  69.   -moz-box-shadow: none;
  70. }
  71. #menu-bar ul a:hover {
  72.   background: #0399D4 !important;
  73.   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  74.   background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  75.   background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  76.   color: #FFFFFF !important;
  77.   border-radius: 0;
  78.   -webkit-border-radius: 0;
  79.   -moz-border-radius: 0;
  80. }
  81. #menu-bar ul {
  82.  background: #424242;
  83.   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#0A0A0A, endColorstr=#454545);
  84.   background: -webkit-gradient(linear, left top, left bottom, from(#0A0A0A), to(#454545));
  85.   background: -moz-linear-gradient(top,  #0A0A0A,  #454545);
  86.   display: none;
  87.   margin: 0;
  88.   padding: 0;
  89.   width: 310px;
  90.   position: absolute;
  91.   top: 30px;
  92.   left: 0;
  93.   border: solid 1px #B4B4B4;
  94.   border-radius: 5px;
  95.   -webkit-border-radius: 5px;
  96.   -moz-border-radius: 5px;
  97.   -webkit-box-shadow: 2px 2px 3px #222222;
  98.   -moz-box-shadow: 2px 2px 3px #222222;
  99.   box-shadow: 2px 2px 3px #222222;
  100.   z-index:100;
  101. }
  102.  
  103. #menu-bar li:hover > ul {
  104.   display: block;
  105. }
  106. #menu-bar ul li {
  107.   float: none;
  108.   margin: 0;
  109.   padding: 0;
  110. }
  111.  
  112. #menu-bar ul li ul {
  113.   filter: alpha(opacity=85);
  114.     opacity: 0.85;
  115. }
  116.  
  117. #menu-bar ul a {
  118.   padding:10px 0px 10px 15px;
  119.   color:color:#FFFFFF /*#424242 */!important;
  120.   font-size:12px;
  121.   font-style:normal;
  122.   font-family:arial;
  123.   font-weight: normal;
  124.  
  125. }
  126. #menu-bar ul li:first-child > a {
  127.   border-top-left-radius: 5px;
  128.   -webkit-border-top-left-radius: 5px;
  129.   -moz-border-radius-topleft: 5px;
  130.   border-top-right-radius: 5px;
  131.   -webkit-border-top-right-radius: 5px;
  132.   -moz-border-radius-topright: 5px;
  133. }
  134. #menu-bar ul li:last-child > a {
  135.   border-bottom-left-radius: 5px;
  136.   -webkit-border-bottom-left-radius: 5px;
  137.   -moz-border-radius-bottomleft: 5px;
  138.   border-bottom-right-radius: 5px;
  139.   -webkit-border-bottom-right-radius: 5px;
  140.   -moz-border-radius-bottomright: 5px;
  141. }
  142. #menu-bar:after {
  143.   content: ".";
  144.   display: block;
  145.   clear: both;
  146.   visibility: hidden;
  147.   line-height: 0;
  148.   height: 0;
  149. }
  150. #menu-bar {
  151.   display: block;
  152. }
  153.  
  154.   html[xmlns] #menu-bar {
  155.   display: block;
  156. }
  157. * html #menu-bar {
  158.   height: 1%;
  159. }
gracias.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: elementos, horizontal, hover, html, tamaño, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:29.