Problema con current_page_item

Ember · #1 (**permalink**) 14/11/2011, 11:25

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.

linuxzero · #2 (**permalink**) 14/11/2011, 15:01

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!

Ember · #3 (**permalink**) 15/11/2011, 05:04

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

rege · #4 (**permalink**) 15/11/2011, 05:35

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