Foros del Web » Creando para Internet » CSS »

aplicar estilos al enlace que se esta visitando

Estas en el tema de aplicar estilos al enlace que se esta visitando en el foro de CSS en Foros del Web. hola amigos tengo el siguiente menu en css: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #navcontainer { margin-top : 0px ; margin-left : 0px ; padding ...
  #1 (permalink)  
Antiguo 01/01/2011, 04:50
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
aplicar estilos al enlace que se esta visitando

hola amigos tengo el siguiente menu en css:
Código CSS:
Ver original
  1. #navcontainer
  2. {
  3. margin-top: 0px;
  4. margin-left: 0px;
  5. padding: 0;
  6. height: 20px;
  7. }
  8. #navcontainer ul
  9. {
  10. border: 0;
  11. margin: 0;
  12. padding: 0;
  13. list-style-type: none;
  14. text-align: center;
  15. }
  16. #navcontainer ul li
  17. {
  18. display: block;
  19. float: left;
  20. text-align: center;
  21. padding: 0;
  22. margin: 0;
  23. }
  24. #navcontainer ul li a
  25. {
  26. font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  27. font-size:16px;
  28. background: #006ab3;
  29. width: 138px;
  30. height: 25px;
  31. border-top: 1px solid black;
  32. border-left: 1px solid black;
  33. border-bottom: 1px solid black;
  34. border-right: 1px solid black;
  35. padding: 0;
  36. margin-top: 0px
  37. margin-left: 0px
  38. margin-right: 10px;
  39. display: block;
  40. color: white;
  41. text-decoration: none;
  42. text-align:center;
  43. }
  44. #navcontainer ul li a:hover
  45. {
  46. color: #ffd800;
  47. background: #006ab3;
  48. }
  49. #navcontainer a:active
  50. {
  51.  
  52. background: #ffd800;
  53. color: #006ab3;
  54. }
  55. a.selecionado a
  56. {
  57. background:  #ffd800;
  58. color: #006ab3;
  59. }

y este es el html
Código HTML:
Ver original
  1. <div id="navcontainer">
  2.       <ul id="navlist">
  3.         <li><a href="index.php" class="selecionado">Inicio</a></li>
  4.         <li><a href="quienes_somos.php">quienes somos</a></li>
  5.         <li><a name="#">productos</a></li>
  6.         <li class="selec"><a href="promociones.php">promociones</a></li>
  7.         <li><a href="contacto.php">contacto</a></li>
  8.       </ul>
  9.     </div>

quisiera que en la pagina en la que se esta visitan do el menu quede marcado,

lo he intentado aplicando la clase a<li>, que lo que he encontrado buscando por el foro y he encontrado las respuestas desde ayer trabajando y buscando en las faq y todo y c ierto es que lo explican pero para mi caso no me funciona o algo estoy seguro estoy haciendo mal. Podrían ayudarme por favor. Gracias y feliz año
  #2 (permalink)  
Antiguo 01/01/2011, 05:21
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: aplicar estilos al enlace que se esta visitando

Hola:

¿Y en tu CSS donde tienes definida la clase selec?

Cita:
Iniciado por trevol Ver Mensaje
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" class="selecionado">Inicio</a></li>
<li><a href="quienes_somos.php">quienes somos</a></li>
<li><a name="#">productos</a></li>
<li class="selec"><a href="promociones.php">promociones</a></li>
<li><a href="contacto.php">contacto</a></li>
</ul>
</div>
Saludos.

  #3 (permalink)  
Antiguo 01/01/2011, 06:25
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: aplicar estilos al enlace que se esta visitando

Muchas gracias jomaruro pero no soluciona el problema central eso fue de tanto probar y eso...De todas formas gracias

Última edición por trevol; 01/01/2011 a las 14:15
  #4 (permalink)  
Antiguo 01/01/2011, 14:16
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: aplicar estilos al enlace que se esta visitando

por favor no hay nadie que me puedad indicar donde esta el fallo o como puedo arreglarlo e caso es que no lo consigo, y sigo intentando y nada...
  #5 (permalink)  
Antiguo 01/01/2011, 14:27
Avatar de Smolky  
Fecha de Ingreso: mayo-2006
Ubicación: Cartagena
Mensajes: 177
Antigüedad: 11 años, 7 meses
Puntos: 14
Respuesta: aplicar estilos al enlace que se esta visitando

Bueno, tengo dudas si lo quieres hacer con la clase seleccionado del ancla (elemento <a ...>) o con la clase "selec" de elemento LI

Voy a pensar que lo quieres hacer de la primera manera. Viendo entonces el código fuente de la hoja de estilos veo esta regla:

Código:
a.selecionado a {
   background: #ffd800; 
   color: #006ab3; 
}
Que quiere decir, todos los elementos ancla que están dentro de otro elemento ancla de la clase seleccionado.

Quizás así tenga más sentido
Código:
a.selecionado {
   background: #ffd800; 
   color: #006ab3; 
}
__________________
No hay cuerda desafinada sino músico progresivo
  #6 (permalink)  
Antiguo 01/01/2011, 14:33
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: aplicar estilos al enlace que se esta visitando

gracias porque entiendo la logica no es eso es al elemento de <a href > la clase selecionado o a li (que no está, porque he probado y no funciona) el elemento ancla esta porque todavia no tengo esa pagina hecha. Nuchas gracias voy a probar haber. estas son la correciones al html.
Código HTML:
Ver original
  1. <div id="navcontainer">
  2. <ul id="navlist">
  3. <li><a href="index.php" class="selecionado">Inicio</a></li><!--Me ustaria que este enlace se resaltara-->
  4. <li><a href="quienes_somos.php">quienes somos</a></li>
  5. <li><a href="producto.php">productos</a></li>
  6. <li ><a href="promociones.php">promociones</a></li>
  7. <li><a href="contacto.php">contacto</a></li>
  8. </ul>
  9. </div>

Última edición por trevol; 01/01/2011 a las 14:39
  #7 (permalink)  
Antiguo 02/01/2011, 16:59
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: aplicar estilos al enlace que se esta visitando

Hola:

Es que si quieres que en la pagina que se esta visitando el menu quede marcado, deberás indicar las propiedades que necesitas en la clase selec que te decía antes.

Saludos.

  #8 (permalink)  
Antiguo 03/01/2011, 06:10
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: aplicar estilos al enlace que se esta visitando

jomaruro gracias te doy lo que rectifique hace tiempo y no hay manera que salga:
Código CSS:
Ver original
  1. #navcontainer
  2. {
  3. margin-top: 0px;
  4. margin-left: 0px;
  5. padding: 0;
  6. height: 20px;
  7.  
  8. }
  9. #navcontainer ul
  10. {
  11. border: 0;
  12. margin: 0;
  13. padding: 0;
  14. list-style-type: none;
  15. text-align: center;
  16. }
  17. #navcontainer ul li
  18. {
  19. display: block;
  20. float: left;
  21. text-align: center;
  22. padding: 0;
  23. margin: 0;
  24. }
  25. #navcontainer ul li a
  26. {
  27. font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  28. font-size:16px;
  29. background: #006ab3;
  30. width: 138px;
  31. height: 25px;
  32. border-top: 1px solid black;
  33. border-left: 1px solid black;
  34. border-bottom: 1px solid black;
  35. border-right: 1px solid black;
  36. padding: 0;
  37. margin-top: 0px
  38. margin-left: 0px
  39. margin-right: 10px;
  40. display: block;
  41. color: white;
  42. text-decoration: none;
  43. text-align:center;
  44. }
  45. #navcontainer ul li a:hover
  46. {
  47. color: #ffd800;
  48. background: #006ab3;
  49. }
  50. #navcontainer a:active
  51. {
  52.  
  53. background: #ffd800;
  54. color: #006ab3;
  55. }
  56. .selecionado
  57. {
  58. background:  #ffd800;
  59. color: #006ab3;
  60. }


Código HTML:
Ver original
  1. <div id="navcontainer">
  2. <ul id="navlist">
  3. <li class="selecionado"><a href="index.php">Inicio</a></li><!--Me ustaria que esta parte del menu se resaltara se resaltara-->
  4. <li><a href="quienes_somos.php">quienes somos</a></li>
  5. <li><a href="producto.php">productos</a></li>
  6. <li ><a href="promociones.php">promociones</a></li>
  7. <li><a href="contacto.php">contacto</a></li>
  8. </ul>
  9. </div>


esto es lo que tengo ahora y no sale nada no me hace cambios.
  #9 (permalink)  
Antiguo 03/01/2011, 08:18
Avatar de Smolky  
Fecha de Ingreso: mayo-2006
Ubicación: Cartagena
Mensajes: 177
Antigüedad: 11 años, 7 meses
Puntos: 14
Respuesta: aplicar estilos al enlace que se esta visitando

Hola. He estado haciendo algunas pruebas y he conseguido que funcione:

Básicamente he redefinido algunas reglas del CSS y he puesto la clase seleccionado al enlace y no al listado. Lo otro que he hecho, como verás es redefinir las reglas haciendo que apunten a #navlist en lugar del #navcontainer

Creo que el problema original que tenías era porque las reglas no se aplicaban en el orden que querías.

Espero que te esto ayude

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
  <title>Prueba Foros del Web</title>
  
<style type="text/css">
 
#navcontainer {
   margin-top: 0px;
   margin-left: 0px;
   padding: 0;
   height: 20px;
}

#navlist {
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
}

#navlist li {
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}

#navlist li a {
   font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
   font-size:16px;
   background: #006ab3;
   width: 138px;
   height: 25px;
   border: 1px solid black;
   padding: 0;
   margin-top: 0px
   margin-left: 0px
   margin-right: 10px;
   display: block;
   color: white;
   text-decoration: none;
   text-align:center;
}

#navlist li a:hover {
   color: #ffd800; 
   background: #006ab3;
}

#navlist li a:active {
   background: #ffd800; 
   color: #006ab3; 
}

#navlist .seleccionado {
   color: #006ab3; 
   background: #ffd800; 
}
</style>
  
</head>
<body>

   <div id="navcontainer"> 
      <ul id="navlist">
         <li><a class="seleccionado" href="index.php">Inicio</a></li>
         <li><a href="quienes_somos.php">quienes somos</a></li>
         <li><a href="producto.php">productos</a></li>
         <li><a href="promociones.php">promociones</a></li>
         <li><a href="contacto.php">contacto</a></li>
      </ul>
   </div>

</body>
</html> 
__________________
No hay cuerda desafinada sino músico progresivo
  #10 (permalink)  
Antiguo 03/01/2011, 08:59
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: aplicar estilos al enlace que se esta visitando

Muchisimas gracias, estoy probando aisladamente si funciona haber que tal... Lo que me gustaria entender es el porque asi que me imagino que tendre que repasar las herencias y las clases en mayor profundidad. Gracias.
  #11 (permalink)  
Antiguo 03/01/2011, 09:07
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: aplicar estilos al enlace que se esta visitando

Perfecto eres un crack amigo, haber si consigo entender bién lo que has hecho, asi que esta noche tendré que repasar...

Etiquetas: enlace, estilos
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:03.