Foros del Web » Creando para Internet » CSS »

menu horizontal

Estas en el tema de menu horizontal en el foro de CSS en Foros del Web. Hola a [email protected] de nuevo, estoy haciendo un menú similar al de la web: http://cssvault.com/gallery/ , pero no me funciona del todo, cuando entro en ...
  #1 (permalink)  
Antiguo 11/03/2009, 06:45
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 12 años
Puntos: 3
menu horizontal

Hola a [email protected] de nuevo, estoy haciendo un menú similar al de la web: http://cssvault.com/gallery/ , pero no me funciona del todo, cuando entro en una de las secciones de la página el botón no me mantiene la configuración de activo y pasa a estado normal, no se si me falta algo dejo el codigo haber si me podeis echar una mano.
Código:
#header { width:644px; margin-top: 2px; height:29px; border-bottom:1px solid #F60; }


#header em { display: none}
#header ul { width: 100%; float: left; padding: 0px; margin: 0px; list-style-type: none;}
#header li { float: left; padding: 0px; margin: 0px; display: inline}
#header li a { DISPLAY: block; HEIGHT: 30px }

#header li a.empresa { background: url(gfx/01.png) no-repeat left top; WIDTH: 120px }
#header li a.empresaActive { background: url(gfx/01.png) no-repeat left bottom; WIDTH: 120px }
#header li a.servicios { background: url(gfx/02.png) no-repeat left top; WIDTH: 120px}
#header li a.serviciosActive { background: url(gfx/02.png) no-repeat left bottom; WIDTH: 120px}
#header li a.tiendas { background: url(gfx/03.png) no-repeat left top; WIDTH: 120px}
#header li a.tiendasActive { background: url(gfx/03.png) no-repeat left bottom; WIDTH: 120px}
#header li a.contacto { background: url(gfx/04.png) no-repeat left top; WIDTH: 120px}
#header li a.contactoActive { background: url(gfx/04.png) no-repeat left bottom; WIDTH: 120px }

#header li a:hover { background-position: left bottom 
}
Código HTML:
 <div id="header">
            <ul>
                <li><a class="empresa" href="/"><em>empresa</em></a></li>
                <li><a class="servicios" href="servicios.htm"><em>servicios</em></a></li>
                <li><a class="tiendas" href="tiendas.htm" title="puntos de venta de Blucom"><em>tiendas</em></a></li>
                <li><a class="contacto" href="contacto.htm"><em>contacto</em></a></li>
            </ul>
        </div> 
  #2 (permalink)  
Antiguo 11/03/2009, 07:25
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: menu horizontal

bueno me parece q tu problema esta en donde debes activar con una clase
cuando estes en servicios por ejemplo en vez de ser

<li><a class="servicios" href="servicios.htm"><em>servicios</em></a></li>

tienes q cambiar servicios por serviciosActive

<li><a class="serviciosActive" href="servicios.htm"><em>servicios</em></a></li>

asi te mostrara q esta marcada la pestaña
saludos
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 11/03/2009, 07:31
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 12 años
Puntos: 3
Respuesta: menu horizontal

Gracias, emiliodeg, pero eso se supone que lo deveria hacer de forma automatica por que si yo me pongo encima y no pincho si me coje la clase serviciosActive, no se si me explico
  #4 (permalink)  
Antiguo 11/03/2009, 07:46
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: menu horizontal

claro pero pq tienes esta declaracion
#header li a:hover { background-position: left bottom
}
donde al hacer hover te cambial el fondo, pero cuando cambies de pagina vas a tener q ponerle la clase correspondiente

otra tecnica (la cual uso yo) es la de ponerle un id al body
ejemplo
<body id="paginaservicios">
....
<div id="header">
<ul>
<li><a class="empresa" href="/"><em>empresa</em></a></li>
<li><a class="servicios" href="servicios.htm"><em>servicios</em></a></li>
....

y de ahi defines para cada pagina cual pestaña marcar

entonces tendrias
#header li a.servicios { background: url(gfx/02.png) no-repeat left top; WIDTH: 120px}
y para marca servicios en la pagina paginasericios
#paginaservicios #header li a.servicios { background-position: left bottom}
deberias hacer lo mismo con todas la pagians

saludos
__________________
Degiovanni Emilio
developtus.com
  #5 (permalink)  
Antiguo 11/03/2009, 10:16
 
Fecha de Ingreso: diciembre-2005
Ubicación: Vigo
Mensajes: 135
Antigüedad: 12 años
Puntos: 3
Respuesta: menu horizontal

Gracias, me has salvado la vida, un saludo.
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 02:59.