Foros del Web » Creando para Internet » CSS »

No sé cómo poner el botón activado en la página que se encuentra el usuario

Estas en el tema de No sé cómo poner el botón activado en la página que se encuentra el usuario en el foro de CSS en Foros del Web. Hola, Estoy armando un sitio y tengo un menú horizontal creado en CSS. Los botones cambian a color degradé cuando paso encima con el mouse. ...
  #1 (permalink)  
Antiguo 29/10/2009, 17:04
 
Fecha de Ingreso: septiembre-2008
Mensajes: 81
Antigüedad: 9 años, 2 meses
Puntos: 0
Exclamación No sé cómo poner el botón activado en la página que se encuentra el usuario

Hola,
Estoy armando un sitio y tengo un menú horizontal creado en CSS. Los botones cambian a color degradé cuando paso encima con el mouse.

Sin embargo, cuando me encuentro en "incio", "clientes", "contacto", etc., etc. no se nota diferencia en el menú. Es decir, no se muestra el botón activo de la página correspondiente.

He leído algo al respecto, pero debo ser yo con el código o no sé, pero no puedo darle solución. No sé si se soluciona con CSS o con PHP. En todo caso, por favor indicarme cuál es la mejor opción. Yo aquí les muestro el código CSS y el HTML para que puedan ver cómo se soluciona esto. Un abrazo.

Código:
#nav {
    margin:0;
	padding: 0 0 20px 10px;
	background: url(menu_bg.jpg) repeat-x;
	}

html>body #nav {
	padding: 0 0 38px 0px;
	}



#nav li {
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
	}
	
#nav a:link, #nav a:visited {
	float: left;
	font-size: 18px;
	line-height: 38px;
	font-weight: bold;
	padding: 0 47px 0px 47px;
	text-decoration: none;
	color: #FFF;
	}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
	color: #FFF;
	background: url(menu_bg-active.jpg) repeat center;
	}

#nav a#flag:link.active, #nav a#flag:visited.active, #nav a#flag:hover {

}
Código HTML:
<ul id="nav">
	<li><a "#">Inicio</a></li>
	<li><a href="services_es.htm">Nuestros servicios</a></li>
	<li><a href="trabajos_es.htm">Trabajos</a></li>
	<li><a href="customers_es.htm">Clientes</a></li>
	<li><a href="contact_es.htm">Contacto</a></li>

</ul> 
Espero que puedan ayudarme. Llevo en esto un día y medio dando vueltas. Saludos.
  #2 (permalink)  
Antiguo 29/10/2009, 22:16
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: No sé cómo poner el botón activado en la página que se encuentra el usuari

hola k tal loisel no se si te refieres a esto

ejemplo: http://www.pk-network.co.cc/

saludos!!!
  #3 (permalink)  
Antiguo 29/10/2009, 22:29
 
Fecha de Ingreso: septiembre-2008
Mensajes: 81
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: No sé cómo poner el botón activado en la página que se encuentra el usuari

Hola WinderJerter,
Veo que en el ejemplo los tabs cambian de acuerdo a las páginas. Sí, eso quiero, pero con color degradé. Para ello uso unas imágenes de 1px de ancho para fondo y para activo.

El problema es que no sé cómo hacerlo de forma más automática. Estoy estancado justamente en este problema y no puedo publicar hasta solucionarlo.
Saludos!
  #4 (permalink)  
Antiguo 29/10/2009, 22:53
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: No sé cómo poner el botón activado en la página que se encuentra el usuari

Hola, hay varias formas de hacer lo que quieres. La más imple es darle un id="current" (p. ej.) al enlace de la página que está cargada y a este id darle el estilo que quieras. El problema de este método es que tienes que editar una a una todas las páginas poniendo el id en el enlace correspondiente a cada una.

Código html:
Ver original
  1. <ul id="nav">
  2.     <li><a id="current" href="#">Inicio</a></li>
  3.     <li><a href="services_es.htm">Nuestros servicios</a></li>
  4.     <li><a href="trabajos_es.htm">Trabajos</a></li>
  5.     <li><a href="customers_es.htm">Clientes</a></li>
  6.     <li><a href="contact_es.htm">Contacto</a></li>
  7.  
  8. </ul>

Otro método sería darle un id al body de cada página y otro a cada enlace del menu y luego darle estilo a la combinación de ambos. De esta forma:

Código html:
Ver original
  1. <body id="pg_inicio">
  2. <ul id="nav">
  3.     <li><a id="inicio" href="#">Inicio</a></li>
  4.     <li><a id="servicios" href="services_es.htm">Nuestros servicios</a></li>
  5.     <li><a id="trabajos" href="trabajos_es.htm">Trabajos</a></li>
  6.     <li><a id="clientes" href="customers_es.htm">Clientes</a></li>
  7.     <li><a id="contacto" href="contact_es.htm">Contacto</a></li>
  8.  
  9. </ul>

Código css:
Ver original
  1. #pg_inicio #inicio,
  2. #pg_servicios #servicios,
  3. #pg_trabajos #trabajos,
  4. #pg_clientes #clientes,
  5. #pg_contacto #contacto {
  6.     color: #FFF;
  7.     background: url(menu_bg-active.jpg) repeat center;
  8. }

Yo prefiero este último porque es más amigable a la hora de hacer ediciones posteriores.

Salud!
  #5 (permalink)  
Antiguo 29/10/2009, 23:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 81
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: No sé cómo poner el botón activado en la página que se encuentra el usuari

Gracias Alberto,
Veré lo que dices. Igualmente, hay una cosa que sería de gran ayuda, creo, y es programar una función con PHP que al tomar un nombre de la página ejecuta una acción determinada en el botón correspondiente.

La página irá en PHP, así que yo pensaba que algo así sería perfecto. Sin embargo, no he conseguido una solución con PHP. Vi un tutorial, pero me salió cualquier cosa.
Saludos.
  #6 (permalink)  
Antiguo 30/10/2009, 05:58
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: No sé cómo poner el botón activado en la página que se encuentra el usuari

Para conseguir ayuda para hacerlo en php, busca y/o postea en el subforo de php, en este sólo te vamos a dar soluciones css.

De todos modos el segundo ejemplo lo puedes usar con un include ya que el menú no cambia en ninguna página, sólo cambia el id del body y así lo tendrías en un sólo archivo. Además si tuvieras que añadir o quitar opciones del menú en el futuro sólo tienes que tocar el archivo del menú y una regla de css.

Salud!
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 12:16.