Foros del Web » Creando para Internet » CSS »

ayuda con el fondo del boton de mi menu

Estas en el tema de ayuda con el fondo del boton de mi menu en el foro de CSS en Foros del Web. Hola a todos.. necesito ayuda por fa les explico.. tengo el siguiente menu - este se despliega para abajo.. y al elegir un item queda ...
  #1 (permalink)  
Antiguo 14/05/2010, 10:19
Avatar de Masticore  
Fecha de Ingreso: agosto-2008
Mensajes: 52
Antigüedad: 9 años, 3 meses
Puntos: 0
ayuda con el fondo del boton de mi menu

Hola a todos.. necesito ayuda por fa
les explico..
tengo el siguiente menu - este se despliega para abajo.. y al elegir un item queda con una boton amarillo
este es el codigo q ocupa
Cita:
#horiz-menu li.active,
#horiz-menu li.level1:hover#current {
background: transparent url('../images/style1/menu_h_l.png') no-repeat 0 50%!important;
}
#horiz-menu li.active a,
#horiz-menu li#current.level1:hover a {
background: transparent url('../images/style1/menu_h_r.png') no-repeat 100% 50%;
}
#horiz-menu li.level1:hover {
background: url('../images/style1/menu_l.png') no-repeat 0 50%!important;
}
#horiz-menu li.level1:hover a.level1 {
background: url('../images/style1/menu_r.png') no-repeat 100% 50%;
color: #ffcc33;
}
#horiz-menu li li a:hover,
#horiz-menu li li.sfhover a:hover {
color: #ffcc33!important;
asi es..

y yo quiero colocar este menu. q es en forma horizontal los submenus pero no he podido agregarle el fondo del boton aqui les dejo la foto



este es el codigo Q ESTADO MODIFICANDO.. ya le deje el color y al pasar encima queda amariilo pero no logro dejar elboton detras..
Cita:

div.menuContainer
{
background-color: #ffffff;
padding: 0px;
margin: 0px;
border-top: 1px solid #272727;
border-bottom: 1px solid #272727;
border-right: 1px solid #272727;
opacity: 0;
filter: alpha(opacity = 0);
}

div.horizontalMenuContainer, div.verticalMenuContainer, div.sub-horizontalMenuContainer, div.sub-verticalMenuContainer, div.sub-singleMenuContainer
{
background-color: #272727;
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
filter: alpha(opacity = 0);
z-index: 100;
}

ul.horizontalMenuContainer, ul.verticalMenuContainer, ul.singleMenuContainer
{
margin: 0px;
padding: 0px;
list-style: none;
overflow: hidden;
}

ul.horizontalMenuContainer
{
border-left: 1px solid #272727;
border-bottom: 1px solid #272727;
border-top: 1px solid #272727;
border-right: 1px solid #272727;
}

ul.verticalMenuContainer
{
border-left: 1px solid #272727;
border-right: 1px solid #272727;
border-bottom: 1px solid #272727;
}

ul.singleMenuContainer
{
border-left: 1px solid #272727;
border-right: 1px solid #272727;
border-top: 1px solid #272727;
border-bottom: 1px solid #272727;
float: left;
}

ul.singleMenuContainer ul.singleMenuContainer
{
border: 0px;
}

#menuContainer li.horizontalMenuItem
{

float: left;
display: inline;
}

#menuContainer li.verticalMenuItem
{
float: none;
display: block;
clear: both;
}

#menuContainer li.singleMenuItem
{
font-weight: bold;
display: inline;
float: left;
}

#menuContainer li.singleMenuItem li.singleMenuItem
{
font-weight: normal;
display: block;
clear: both;
}

a.horizontalMenuItemText, a.verticalMenuItemText, a.singleMenuItemText
{
/* We need the background color here for IE7. If not, the links do not fill horizontally and MouseOver fires */
background-color: #272727;
margin: 0px;
padding: 5px;
text-decoration: none;
color: #FFCB41;
display: block;
}

a.horizontalMenuItemText
{
border-right: 1px solid #272727;
border-left: 1px solid #272727;
}

a.verticalMenuItemText
{
border-bottom: 1px solid #272727;
border-top: 1px solid #272727;
}

a.singleMenuItemText
{
}

ojala me puedan ayudar y decirme q me falta

gracias
  #2 (permalink)  
Antiguo 15/05/2010, 10:23
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: ayuda con el fondo del boton de mi menu

te estas olvidando de incluir la imagen, background-image:url(ruta/carpeta/imagen.png);

Recuerda que si incluyes la imagen de fondo dentro de la etiqueta <a> tienes de darle display:block; (ej: a {display:block;}) para transformarla en bloque y poder darle altura (ej: height:25px;)

con lo que mas o menos te quedaría:

a{
display:block;
width:ancho de la imagen;
height:alto de la imagen;
background-image:url(ruta/carpeta/imagen.png);
/*y luego con line-height:; manipulas la posicion del texto del enlace*/
/*si quieres trabajar con sprites entonces utiliza background-position:; y luego top-right-bottom-left para darle las coordenadas de posición*/
}

Espero te sirva, saludos
  #3 (permalink)  
Antiguo 19/05/2010, 10:11
Avatar de Masticore  
Fecha de Ingreso: agosto-2008
Mensajes: 52
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: ayuda con el fondo del boton de mi menu

GRACIAS.. PERO YA LOGRE QUE FUNCIONE PERO ME FALTA UNA COSA..
TE EXPLICO.. YO NECESITO QUE AL HACER CLICK EN ALGUNA OPCION DEL MENU QUEDE MARCADO CON EL BOTON AMARILLO (LA IMAGEN ) Y QUEDE SELECIONADO CUANDO BAJE A LOS SUB MENU OSEA QUE QUEDE ACTIVO. PERO NO ME FUNCIONA .. ME QUEDA AMARILLO EL BOTON PERO DESAPARECE INMEDIATAMENTE.. OJALA ME PUEDES AYUDAR Y DECIRME Q ME FALTA O SI ESTOY OCUPANDO MAL EL ACTIVE.. GRACIASSSSS
AQUI DEJO EL CODIGO

a.horizontalMenuItemText, a.verticalMenuItemText, a.singleMenuItemText
{
color: #fff !important;
font: bold;
}
a.horizontalMenuItemText:hover {
color:#FFCB41 !important;
}
a.horizontalMenuItemTextli:active {
background: transparent url('../images/style1/menu_h_l.png') no-repeat 0 50%!important;
color:#000 !important;
}
a.horizontalMenuItemText:active {
background: transparent url('../images/style1/menu_h_r.png') no-repeat 100% 50%!important;
color:#000 !important;
}
a.horizontalMenuItemTextli:hover {
background: url('../images/style1/menu_l.png') no-repeat 0 50%!important;
}
a.horizontalMenuItemText:hover {
background: url('../images/style1/menu_r.png') no-repeat 100% 50%;
}
  #4 (permalink)  
Antiguo 19/05/2010, 12:22
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: ayuda con el fondo del boton de mi menu

Hay trucos para dejar un link activo con css pero yo lo que hago es utilizar javascript. si te interesa esta forma te subo un ejemplo a mediafire para que lo veas.
  #5 (permalink)  
Antiguo 19/05/2010, 15:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ayuda con el fondo del boton de mi menu

Hola:

Échale un vistazo a este ejemplo del maestro Mikmoro, quizá te sea útil.

Saludos.


Etiquetas: fondo, botones
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 10:47.