aplicar estilos al enlace que se esta visitando

[trevol]

hola amigos tengo el siguiente menu en css:

Código CSS:

#navcontainer
{
margin-top: 0px;
margin-left: 0px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size:16px;
background: #006ab3;
width: 138px;
height: 25px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0;
margin-top: 0px
margin-left: 0px
margin-right: 10px;
display: block;
color: white;
text-decoration: none;
text-align:center;
}
#navcontainer ul li a:hover
{
color: #ffd800; 
background: #006ab3;
}
#navcontainer a:active
{
 
background: #ffd800; 
color: #006ab3; 
}
a.selecionado a
{
background:  #ffd800; 
color: #006ab3; 
}
 

y este es el html

Código HTML:

<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>
 

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

[jomaruro]

Hola:

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

Iniciado por trevol

<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.

[trevol]

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

[trevol]

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...

[Smolky]

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; 
}

[trevol]

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:

<div id="navcontainer"> 
<ul id="navlist">
<li><a href="index.php" class="selecionado">Inicio</a></li><!--Me ustaria que este enlace se resaltara-->
<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>
 

[jomaruro]

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.

[trevol]

jomaruro gracias te doy lo que rectifique hace tiempo y no hay manera que salga:

Código CSS:

#navcontainer
{
margin-top: 0px;
margin-left: 0px;
padding: 0;
height: 20px;
 
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size:16px;
background: #006ab3;
width: 138px;
height: 25px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0;
margin-top: 0px
margin-left: 0px
margin-right: 10px;
display: block;
color: white;
text-decoration: none;
text-align:center;
}
#navcontainer ul li a:hover
{
color: #ffd800; 
background: #006ab3;
}
#navcontainer a:active
{
 
background: #ffd800; 
color: #006ab3; 
}
.selecionado 
{
background:  #ffd800; 
color: #006ab3; 
}
 

Código HTML:

<div id="navcontainer"> 
<ul id="navlist">
<li class="selecionado"><a href="index.php">Inicio</a></li><!--Me ustaria que esta parte del menu se resaltara se resaltara-->
<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>
 

esto es lo que tengo ahora y no sale nada no me hace cambios.

[Smolky]

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> 

[trevol]

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.

[trevol]

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