Foros del Web » Diseño web » CSS »

Problema con current_page_item

Estas en el tema de Problema con current_page_item en el foro de CSS en Foros del Web. Buenas tardes. Lo primero que tengo que aclarar es que las hojas de estilo no son lo mío, así que espero exponer el tema de ...
  #1 (permalink)  
Antiguo 14/11/2011, 10:25
 
Fecha de Ingreso: diciembre-2004
Ubicación: Madrid
Mensajes: 523
Antigüedad: 9 años, 8 meses
Puntos: 27
Problema con current_page_item

Buenas tardes.

Lo primero que tengo que aclarar es que las hojas de estilo no son lo mío, así que espero exponer el tema de la mejor forma posible sin meter demasiado la pata.

Tengo esta página http://www.viajarporginebraeslomio.es/que-ver/ y pretendo conseguir un efecto sencillo: que en el menú de la izquierda quede en azul la página en la que me encuentro. El problema, como se verá, es que cuando hay 'children' y estoy en la página superior, todas quedan marcadas en azul y yo querría que solo estuviera en azul la página padre, por así llamarla. En la página que he puesto, está marcada en azul el /que-ver/ y todas las que dependen de ella. Cuando pincho sobre una de las que dependen de ella, entonces todo está bien, luego mi problema viene en ese caso: http://www.viajarporginebraeslomio.es/que-ver/

El current_page_item lo tengo definido así

Código:
#blog_left #sidebar .current_page_item a:link, #blog_left #sidebar .current_page_item a:visited{
	color:blue;
}
¿Qué tengo mal o qué estilo me falta por añadir o modificar?

Muchas gracias por la ayuda.
  #2 (permalink)  
Antiguo 14/11/2011, 14:01
Avatar de linuxzero  
Fecha de Ingreso: noviembre-2011
Ubicación: Argentina
Mensajes: 778
Antigüedad: 2 años, 10 meses
Puntos: 160
Respuesta: Problema con current_page_item

Como solucion, (no se si la mejor) te puedo ofrecer lo siguiente:

Código:
<html>
    <head>
        <style>
            #left li.current {
                color: blue;
            }
            #left li.notselected {
                color:black;
            }
        </style>
    </head>
    <body>
        <div id="left">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li class="current">5
                    <ul>
                        <li class="notselected">5-1</li>
                        <li class="notselected">5-2</li>
                        <li class="selected">5-3</li>
                        <li class="notselected">5-4</li>
                        <li class="notselected">5-5</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>
Al aplicar estilo a una unsortedlist anidada hace que hereden los estilos, y una forma sencilla de solucionar eso es aplicandole otro estilo a las que no quiere que se hereden los estilos aplicandoles otro, como es el caso de la clase "notselected".

Entonces lo unico que tenes que hacer es aplicarles el otro estilo a las li que no queres que cambien de color.

Saludos!
  #3 (permalink)  
Antiguo 15/11/2011, 04:04
 
Fecha de Ingreso: diciembre-2004
Ubicación: Madrid
Mensajes: 523
Antigüedad: 9 años, 8 meses
Puntos: 27
Respuesta: Problema con current_page_item

la verdad es que no sabía que heredaran los estilos, y a raíz de eso investigué un poco en otras páginas y encontré la solución, aunque no sé bien qué quiere decir todo esto... sustituí la línea que puse en mi primer mensaje por el código de abajo

Código:
#blog_left #sidebar ul li.current_page_item > a,
#blog_left #sidebar ul li.current-menu-ancestor > a,
#blog_left #sidebar ul li.current-menu-item > a,
#blog_left #sidebar ul li.current-menu-parent > a {
	color: blue;
}
* html #blog_left #sidebar ul li.current_page_item a,
* html #blog_left #sidebar ul li.current-menu-ancestor a,
* html #blog_left #sidebar ul li.current-menu-item a,
* html #blog_left #sidebar ul li.current-menu-parent a,
* html #blog_left #sidebar ul li a:hover {
	color: blue;
}
ahora funciona como yo quiero
  #4 (permalink)  
Antiguo 15/11/2011, 04:35
 
Fecha de Ingreso: noviembre-2009
Mensajes: 42
Antigüedad: 4 años, 9 meses
Puntos: 10
Respuesta: Problema con current_page_item

El signo > es para que lo aplique sólo a los elementos inmediatos seguidos del elemento que indicas, no a sus hijos, es decir... no sé si me explico...

con #blog_left #sidebar ul li.current_page_item > a,
lo que le dices es que aplique el estilo indicado, a los elementos <a> que vayan inmediatamente después del li.current_page_item, si por ejemplo tienes una lista anidada dentro de otra, como es el caso,

Código:
<ul>
<li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="current_page_item"><a href="#">3</a>
<ul> <li><a href="#">3-1</a></li> <li><a href="#">3-2</a></li> <li><a href="#">3-3</a></li> </ul>
</li> <li><a href="#">4</a></li>
</ul>
con el css de arriba, sólo lo aplicará al <a> marcado como verde, pues es el que va inmediatamente después de li.current_page_item sin estar anidado dentro de otro elemento.

Entonces, para lo que quieres hacer, o bien lo haces así (ojo, que esto creo que no funciona en todos los navegadores) o bien reasignando estilos para los hijos:

por ejemplo, si estado normal es en negro y el actual en azul:

Código:
#blog_left #sidebar ul li a{color:black;}
#blog_left #sidebar ul li.current_page_item a{color:blue;}
#blog_left #sidebar ul li.current_page_item li a{color:black;} /*fíjate que hay 2 li, hago referencia a la lista anidada*/
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 06:13.
SEO by vBSEO 3.3.2