Foros del Web » Creando para Internet » CSS »

Como dejar activo un boton en paginas HTML(no dinamicas)

Estas en el tema de Como dejar activo un boton en paginas HTML(no dinamicas) en el foro de CSS en Foros del Web. Hola e estado maquetando un diseño que e hecho en photoshop y me encuentro con una dificultad, haber si me pueden ayudar, tengo esta lista ...
  #1 (permalink)  
Antiguo 24/05/2010, 06:05
 
Fecha de Ingreso: mayo-2010
Mensajes: 4
Antigüedad: 7 años, 6 meses
Puntos: 0
Como dejar activo un boton en paginas HTML(no dinamicas)

Hola e estado maquetando un diseño que e hecho en photoshop y me encuentro con una dificultad, haber si me pueden ayudar,

tengo esta lista para crear un menú.

Código HTML:
<div id="menu"><!--START DIV ID MENU-->
   <ul>
      <li id="home"><a href="../index.html" title="Home">Home page</a></li>
      <li id="aboutme"><a href="../aboutme.html" title="About me">About me</a></li>
      <li id="services"><a href="../services.html" title="Services">Services</a></li>
      <li id="gallery"><a href="../gallery.html" title="Gallery">Gallery</a></li>
      <li id="contact"><a href="../contact.html" title="Contact me">Contact me</a></li>
    </ul>
  </div><!--END DIV ID MENU--> 
y e agregado el siguiente estilo css para ponerle a cada botón una imagen de fondo y una imagen de fondo para el estado hover.
Código:
#menu ul li{
    display:block;
    width:147px;
    height:47px;
    float:left;}
#menu ul li a{
    display:block;
    width:147px;
    height:47px;
    text-align:center;
    text-indent: -9999px;}
    
#menu li#home{background:url(../images/menu-bg.png) 0px 0px no-repeat; margin-right:12px;}
#menu li#aboutme{background: url(../images/menu-bg.png) -147px 0px no-repeat; margin-right:12px;}
#menu li#services{background:url(../images/menu-bg.png) -294px 0px no-repeat; margin-right:13px;}
#menu li#gallery{background:url(../images/menu-bg.png) -441px 0px no-repeat; margin-right:13px;}
#menu li#contact{background:url(../images/menu-bg.png) -588px 0px no-repeat;}


#menu li#home a:hover{background:url(../images/menu-bg.png) 0px -47px no-repeat; margin-right:12px;}
#menu li#aboutme a:hover{background: url(../images/menu-bg.png) -147px bottom no-repeat; margin-right:12px;}
#menu li#services a:hover{background:url(../images/menu-bg.png) -294px bottom no-repeat; margin-right:13px;}
#menu li#gallery a:hover{background:url(../images/menu-bg.png) -441px bottom no-repeat; margin-right:13px;}
#menu li#contact a:hover{background:url(../images/menu-bg.png) -588px bottom no-repeat;}
Todo me funciona ala perfección hasta aquí, pero quisiera que en cada pagina que entre este activo el botón de la pagina en la que me encuentro.

Es lo que quiero hacer. ¿Como dejo activo el botón de la página en la que me encuentro?

haber si alguien me echa una manita...
  #2 (permalink)  
Antiguo 28/05/2010, 06:59
 
Fecha de Ingreso: mayo-2010
Mensajes: 4
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Como dejar activo un boton en paginas HTML(no dinamicas)

JEJEJ, al parecer no solo yo no se como solucionarlo.
  #3 (permalink)  
Antiguo 28/05/2010, 07:51
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 9 años, 10 meses
Puntos: 14
Respuesta: Como dejar activo un boton en paginas HTML(no dinamicas)

facil, por ejemplo en index.html

Código HTML:
Ver original
  1. <div id="menu"><!--START DIV ID MENU-->
  2.    <ul>
  3.       <li id="home" class="activo"><a href="http://www.forosdelweb.com/f53/index.html" title="Home">Home page</a></li>
  4.       <li id="aboutme"><a href="http://www.forosdelweb.com/f53/aboutme.html" title="About me">About me</a></li>
  5.       <li id="services"><a href="http://www.forosdelweb.com/f53/services.html" title="Services">Services</a></li>
  6.       <li id="gallery"><a href="http://www.forosdelweb.com/f53/gallery.html" title="Gallery">Gallery</a></li>
  7.       <li id="contact"><a href="http://www.forosdelweb.com/f53/contact.html" title="Contact me">Contact me</a></li>
  8.     </ul>
  9.   </div><!--END DIV ID MENU-->

y te creas una nueva clase llamada "activo" y le pones el estilo que quieras

Código CSS:
Ver original
  1. .activo { background-color: #F90 }

Etiquetas: dejar, dinamicas, 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 08:50.