Hola Reynier, solo queria ayudarte a reducir la cantidad de estilos que estas
empleando:
<ul class="box_content_navigation">
<li><a href="inicio" class="icon-home">Inicio</a></li>
<li class="has_children"><a href="cmvblog" class="icon-blog >Blog</a>
<ul class="subitem">
<li><a href="cmvblog/create">Crear
entrada</a></li>
<li><a
href="cmvblog/categories">Categorías</a></li>
</ul>
</li>
<li><a href="event" class="icon-event">Eventos</a></li>
<li><a href="members" class="icon-members">Directorio</a></li>
<li><a href="relations" class="icon-friends last">Amigos</a></li>
<li><a href="messages" class="icon-messages">Mensajes</a></li>
<li><a href="edit-profile" class="icon-account">Editar perfil</a></li>
<li><a href="admin"
target="_blank" class="icon-admincp hide-for-small">Panel de Control</a></li>
</ul>
ul.box_content_navigation li {border-bottom:1px dotted #CCCCCC;}
ul.box_content_navigation li:first-child {border: none;}
ul.box_content_navigation li a {padding-left: 35px; cursor: pointer;}
.icon-home {background: url("../images/comvivem/ico_home.png") no-repeat
scroll 0 5px transparent;}
.icon-home:hover {background: url("../images/comvivem/ico_home.png") no-repeat
scroll 0 5px transparent;}
....
Ya después solo tienes que cambiar los backgrounds, no tienes que repetir los
estilos siempre.
Un saludo
Anabel
On Sep 4, 2012, at 4:49 PM, "[email protected]" <[email protected]> wrote:
> Interesante, exactamente eso es lo que estoy buscando mas no sabia que se
> podian "concatenar" por decirlo de alguna forma las clases de tal como lo
> haces tu en li.icon-event.current siempre pense hasta ahorita que era
> li.icon-event .current. Pruebo esta opción y te digo como me fue.
>
> Saludos y gracias
> Ing. Reynier Perez Mira
> eMail: [email protected], reynier. <[email protected]>[email protected]
> Website: http://www.reynierpm.com
> Skype: reynierpm
> Mobile: +58 424.180.5609
>
>
>
> 2012/9/4 Manuel Canga - Latrasweb.net <[email protected]>
>
>> Sí, perfectamente. Ya me quedo totalmente claro.
>> En estas listas hemos hablado en varias ocasiones
>> de unir clases css. Esa podría ser tu solución.
>>
>> Veamos:
>>
>> <ul class="box_content_navigation"
>>>
>> <li class="icon-home first"><a href="inicio">Inicio</a></li>
>> <li class="icon-blog has_children"><a href="cmvblog">Blog</a>
>> <ul>
>> <li class="subitem first"><a href="cmvblog/create">Crear
>> entrada</a></li>
>> <li class="subitem last"><a
>> href="cmvblog/categories">Categorías</a></li>
>> </ul>
>> </li>
>> <li class="icon-event current"><a href="event">Eventos</a></li>
>> <li class="icon-members"><a href="members">Directorio</a></li>
>> <li class="icon-friends last"><a href="relations">Amigos</a></li>
>> <li class="icon-messages"><a href="messages">Mensajes</a></li>
>> <li class="icon-account"><a href="edit-profile">Editar perfil</a></li>
>> <li class="icon-admincp hide-for-small"><a href="admin"
>> target="_blank">Panel de Control</a></li>
>> </ul>
>>
>> Fíjate que en li de eventos, le he añadido la clase current además
>> de la que ya tenía.
>>
>> ¿Cómo hacemos ahora para darle a ese elemento?. Así.
>>
>> li.icon-event.current { background:
>> url("../images/comvivem/icon_eventos_hover.png")
>> no-repeat scroll 0 4px transparent; background-color: #000 }
>>
>>
>> Fíjate, le he dicho al sistema css del navegador que quiero darle estilo
>> a un li que tenga la clase icon-event y que ademas tenga la clase .current
>> Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego
>> ponemos todas las propiedades de estilo que queramos darle en ese caso.
>>
>> El li lo he puesto por clarificar, siempre lo hago así, pero no es
>> necesario.
>>
>>
>> Un saludo
>> --
>> Manuel Canga
>> Desarrollo creativo de
>> CMS y frameworks
>> Email: *[email protected]*
>> Web: http://www.latrasweb.net
>> Twitter: http://twitter.com/latrasweb_net
>>
>>
>>
>> El 4 de septiembre de 2012 22:37, [email protected]
>> <[email protected]>escribió:
>>
>>> Hola Manuel y gracias por tu respuesta, precisamente eso es lo que
>> quiero o
>>> sea cambiar el color del fondo del LI que toma clase "current" pero
>>> manteniendo el icono asociado a la mismo en el estado hover. Veamos un
>>> ejemplo: supongamos que el li con class="icon-event" toma la clase
>> current
>>> tambien por lo cual quedaria li class="icon-event current" bueno si se
>> dan
>>> de cuenta ese icon-event tiene un estado por default
>>> .icon-event{background: url("../images/comvivem/ico_
>>> eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0
>>> 35px;cursor:pointer;border-bottom:1px dotted #CCCCCC} y uno para cuando
>> se
>>> le hace un hover .icon-event:hover{background:
>>> url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px
>>> transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
>>> #CCCCCC}. Lo que tendria entonces que hacer digamos seria algo como esto:
>>> .current {background: url("../images/comvivem/ico_eventos_hover.png")
>>> no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria
>>> pero solo para este elemento, que pasas si ahora mi clase current
>> estuvera
>>> en li class="icon-members current"? Como entonces cambiaria al
>>> .icon-members:hover? Me hago entender?
>>>
>>>
>>> Ing. Reynier Perez Mira
>>> eMail: [email protected], reynier. <[email protected]>
>>> [email protected]
>>> Website: http://www.reynierpm.com
>>> Skype: reynierpm
>>> Mobile: +58 424.180.5609
>>>
>>>
>>>
>>> 2012/9/4 Manuel Canga - Latrasweb.net <[email protected]>
>>>
>>>> No te he entendido bien. Si lo que quieres es que
>>>> a un li con una clase current se le cambie el color de fondo
>>>> pero los iconos se mantengan como el hover. Añade
>>>> a los estilos de current la imagen del icono que tienes en el hover.
>>>>
>>> _______________________________________________
>>> Lista de distribución Ovillo
>>> Para escribir a la lista, envia un correo a [email protected]
>>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>>
>> _______________________________________________
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a [email protected]
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
