Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net: En mi opinión, para el caso particular que indicas no lo hagas por css sino por programación. También te lo digo porque no sé como se haría en css :D ( seguramente alguien con más conocimientos en las listas te pueda echar una mano ). Yo lo resolvería haciendo que de la misma manera que estás añadiendo un current al li del bajo nivel se lo pones al de arriba que lo contenga. a mi me mola esta forma, porque aunque estas recorriendo a la programacion, es de forma absolutamente minima, y aun es el CSS el que decide que hacer -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Leyendo la idea de Reynier de seleccionar al elemento inmediatamente superior (parent) me he acordado que un idea tuve una situación similar y me puse a buscar si en CSS3 había un selectorque funcionase tipo el element child_element pero en sentido inverso. Me encontré con un artículo[1] que reflexiona sobre las repercusiones de que existiese esto. Se va un poco de tema, pero quizás a alguien le resulta interesante. Sobre la solución, también creo que mejor recurrir a la programación para añadir una clase al padre o similar. [1] http://css-tricks.com/parent-selectors-in-css/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
On 09/05/2012 08:05 AM, CHK Webmaster wrote: Leyendo la idea de Reynier de seleccionar al elemento inmediatamente superior (parent) me he acordado que un idea tuve una situación similar y me puse a buscar si en CSS3 había un selectorque funcionase tipo el element child_element pero en sentido inverso. Me encontré con un artículo[1] que reflexiona sobre las repercusiones de que existiese esto. Se va un poco de tema, pero quizás a alguien le resulta interesante. Sobre la solución, también creo que mejor recurrir a la programación para añadir una clase al padre o similar. [1] http://css-tricks.com/parent-selectors-in-css/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo Muy interesante la lectura CHK Webmaster :) gracias -- Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier.pe...@treswd.com Skype: reynierpm Mobile: +58 424.180.5609 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
On 09/04/2012 04:51 PM, Manuel Canga - Latrasweb.net wrote: En mi opinión, para el caso particular que indicas no lo hagas por css sino por programación. También te lo digo porque no sé como se haría en css :D ( seguramente alguien con más conocimientos en las listas te pueda echar una mano ). Yo lo resolvería haciendo que de la misma manera que estás añadiendo un current al li del bajo nivel se lo pones al de arriba que lo contenga. No sé como harás la programación, si quieres la pasas y la vemos. Eso sí, a lo mejor eso ya queda fuera del ámbito de estas listas. Hola a todos, bueno no todo es felicidad en el mundo y estoy teniendo un problema que no logro resolver. En realidad son dos pero el otro lo comentare en otro mensaje a la lista para no secuestrar este hilo. Bien, exceptuando lo del elemento padre y del border que aparece encima del elemento seleccionado que ya convencí a la diseñadora de que eso no se ve feo jejejeje todo funciona perfecto pero si el elemento LI al cual se le aplican los estilos contiene hijos entonces estos estilos tambien son aplicados al elemento hijo. Por supuesto que a de ser así pues la estructura HTML es la siguiente: ul class=box_content_navigation li class=icon-home firsta href=inicioInicio/a/li li class=icon-blog has_children currenta href=cmvblogBlog/a ul li class=subitem firsta href=cmvblog/createCrear entrada/a/li li class=subitem lasta href=cmvblog/categoriesCategoriacute;as/a/li /ul /li li class=icon-eventa href=eventEventos/a/li li class=icon-messagesa href=messagesMensajes/a/li li class=icon-membersa href=membersDirectorio/a/li li class=icon-friends lasta href=relationsAmigos/a/li li class=icon-accounta href=edit-profileEditar perfil/a/li li class=icon-admincp hide-for-smalla href=admin target=_blankPanel de Control/a/li /ul Lo he dejado acá en Pastebin para una mejor lectura http://pastebin.com/shBmAPkw Y si se dan de cuenta el LI con clase has_children que a su vez tiene current tiene un UL dentro y luego está el cierre del LI. No hay forma de evitar esto cierto? Alguna idea o sugerencia en este sentido? Saludos y nuevamente gracias -- Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier.pe...@treswd.com Skype: reynierpm Mobile: +58 424.180.5609 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Una idea que se me ocurre es que apliques el estilo sobre el anchor
contenido por el elemento current de la lista. De este modo el estilo
excluirá a los subitems. De todas maneras sin conocer exactamente que
estilos aplicas tampoco acabo de hacerme una idea de qué es lo que quieres
conseguir. En el ejemplo que has dado aplicarías los estilos sobre a
href=cmvblogBlog/a. Usando algo del tipo li.current a { /* los
estilos */ }
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Yo estoy con CHK, tampoco entiendo hasta donde quieres llegar.
Dandole estilo al li padre también se lo das a los hijos. Es decir.
Si tu al li le pones fondo azul, el ul, los li y los a tendrán fondo
azul a no ser que tu le especifiques lo contrario en alguno de ellos.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 6 de septiembre de 2012 00:22, CHK Webmaster admin...@gmail.comescribió:
Una idea que se me ocurre es que apliques el estilo sobre el anchor
contenido por el elemento current de la lista. De este modo el estilo
excluirá a los subitems. De todas maneras sin conocer exactamente que
estilos aplicas tampoco acabo de hacerme una idea de qué es lo que quieres
conseguir. En el ejemplo que has dado aplicarías los estilos sobre a
href=cmvblogBlog/a. Usando algo del tipo li.current a { /* los
estilos */ }
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Cambiar estilos del elemento seleccionado con clase current
Hola a todos, tengo un pequeño problemita y no se como darle solución.
Vean, tengo estás clases creadas en mi CSS:
.icon-home{background: url(../images/comvivem/ico_home.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-home:hover{background: url(../images/comvivem/ico_home_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog{background: url(../images/comvivem/ico_blog.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog:hover{background: url(../images/comvivem/ico_blog_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.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 #CC}
.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
#CC}
.icon-messages{background: url(../images/comvivem/ico_mensajes.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-messages:hover{background:
url(../images/comvivem/ico_mensajes_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-members{background: url(../images/comvivem/ico-directorio.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-members:hover{background:
url(../images/comvivem/ico-directorio_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-friends{background: url(../images/comvivem/ico_amigos.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-friends:hover{background:
url(../images/comvivem/ico_amigos-hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-account{background: url(../images/comvivem/ico_micuenta.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-account:hover{background:
url(../images/comvivem/ico_micuenta_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-admincp{background: url(../images/comvivem/ico_azul_perfil.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-admincp:hover{background:
url(../images/comvivem/ico_azul_perfil.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
No se fijen en que estan repetidas pues aun tengo que optmizar un poco todo
esto ;). Bien tengo un UL que tiene varios LI:
ul class=box_content_navigation
li class=icon-home firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-eventa href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel de Control/a/li
/ul
Cuando doy click en cualquiera de ellos se añade un clase current. La
diseñadora me ha pedido que a esta clase current le cambie el color de
fondo y le mantenga el icono de color naranja (_hover). Hacer esto para el
color de fondo no es problema pero como hacerlo para los iconos?
Saludos y gracias por adelantado
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Hola Reynier:
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.
Muchas veces nos enfrascamos en complicaciones cuando
luego la solución es algo fácil. A mi me ha pasado millones
de veces.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
2012/9/4 reynie...@gmail.com reynie...@gmail.com
Hola a todos, tengo un pequeño problemita y no se como darle solución.
Vean, tengo estás clases creadas en mi CSS:
.icon-home{background: url(../images/comvivem/ico_home.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-home:hover{background: url(../images/comvivem/ico_home_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog{background: url(../images/comvivem/ico_blog.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog:hover{background: url(../images/comvivem/ico_blog_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.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 #CC}
.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
#CC}
.icon-messages{background: url(../images/comvivem/ico_mensajes.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-messages:hover{background:
url(../images/comvivem/ico_mensajes_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-members{background: url(../images/comvivem/ico-directorio.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-members:hover{background:
url(../images/comvivem/ico-directorio_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-friends{background: url(../images/comvivem/ico_amigos.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-friends:hover{background:
url(../images/comvivem/ico_amigos-hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-account{background: url(../images/comvivem/ico_micuenta.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-account:hover{background:
url(../images/comvivem/ico_micuenta_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-admincp{background: url(../images/comvivem/ico_azul_perfil.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-admincp:hover{background:
url(../images/comvivem/ico_azul_perfil.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
No se fijen en que estan repetidas pues aun tengo que optmizar un poco todo
esto ;). Bien tengo un UL que tiene varios LI:
ul class=box_content_navigation
li class=icon-home firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-eventa href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel de Control/a/li
/ul
Cuando doy click en cualquiera de ellos se añade un clase current. La
diseñadora me ha pedido que a esta clase current le cambie el color de
fondo y le mantenga el icono de color naranja (_hover). Hacer esto para el
color de fondo no es problema pero como hacerlo para los iconos?
Saludos y gracias por adelantado
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
___
Lista de distribución Ovillo
Para
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Hola, no sé si he entendido bien lo que necesitas.
Si lo que quieres es cambiar la imagen con un CSS el código es este
.nombre_de_tu_clase {
background: url(tu_imagen_1.png) no-repeat;
}
.nombre_de_tu_clase:hover {
background: url(tu_imagen_2.png) no-repeat;
}
abrazos
El 4 de septiembre de 2012 22:31, Manuel Canga - Latrasweb.net
i...@latrasweb.net escribió:
Hola Reynier:
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.
Muchas veces nos enfrascamos en complicaciones cuando
luego la solución es algo fácil. A mi me ha pasado millones
de veces.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
2012/9/4 reynie...@gmail.com reynie...@gmail.com
Hola a todos, tengo un pequeño problemita y no se como darle solución.
Vean, tengo estás clases creadas en mi CSS:
.icon-home{background: url(../images/comvivem/ico_home.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-home:hover{background: url(../images/comvivem/ico_home_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog{background: url(../images/comvivem/ico_blog.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog:hover{background: url(../images/comvivem/ico_blog_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.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 #CC}
.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
#CC}
.icon-messages{background: url(../images/comvivem/ico_mensajes.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-messages:hover{background:
url(../images/comvivem/ico_mensajes_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-members{background: url(../images/comvivem/ico-directorio.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-members:hover{background:
url(../images/comvivem/ico-directorio_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-friends{background: url(../images/comvivem/ico_amigos.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-friends:hover{background:
url(../images/comvivem/ico_amigos-hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-account{background: url(../images/comvivem/ico_micuenta.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-account:hover{background:
url(../images/comvivem/ico_micuenta_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-admincp{background: url(../images/comvivem/ico_azul_perfil.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-admincp:hover{background:
url(../images/comvivem/ico_azul_perfil.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
No se fijen en que estan repetidas pues aun tengo que optmizar un poco
todo
esto ;). Bien tengo un UL que tiene varios LI:
ul class=box_content_navigation
li class=icon-home firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-eventa href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel de Control/a/li
/ul
Cuando doy click en cualquiera de ellos se añade un clase current. La
diseñadora me ha pedido que a esta clase current
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Gracias Marcos, pero no es esto lo que ando buscando!
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 marcos méndez filesi mmfil...@gmail.com
Hola, no sé si he entendido bien lo que necesitas.
Si lo que quieres es cambiar la imagen con un CSS el código es este
.nombre_de_tu_clase {
background: url(tu_imagen_1.png) no-repeat;
}
.nombre_de_tu_clase:hover {
background: url(tu_imagen_2.png) no-repeat;
}
abrazos
El 4 de septiembre de 2012 22:31, Manuel Canga - Latrasweb.net
i...@latrasweb.net escribió:
Hola Reynier:
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.
Muchas veces nos enfrascamos en complicaciones cuando
luego la solución es algo fácil. A mi me ha pasado millones
de veces.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
2012/9/4 reynie...@gmail.com reynie...@gmail.com
Hola a todos, tengo un pequeño problemita y no se como darle solución.
Vean, tengo estás clases creadas en mi CSS:
.icon-home{background: url(../images/comvivem/ico_home.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-home:hover{background:
url(../images/comvivem/ico_home_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog{background: url(../images/comvivem/ico_blog.png) no-repeat
scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-blog:hover{background:
url(../images/comvivem/ico_blog_hover.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.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 #CC}
.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
#CC}
.icon-messages{background: url(../images/comvivem/ico_mensajes.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-messages:hover{background:
url(../images/comvivem/ico_mensajes_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-members{background: url(../images/comvivem/ico-directorio.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-members:hover{background:
url(../images/comvivem/ico-directorio_hover.png) no-repeat scroll 0
5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-friends{background: url(../images/comvivem/ico_amigos.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-friends:hover{background:
url(../images/comvivem/ico_amigos-hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-account{background: url(../images/comvivem/ico_micuenta.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-account:hover{background:
url(../images/comvivem/ico_micuenta_hover.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
.icon-admincp{background: url(../images/comvivem/ico_azul_perfil.png)
no-repeat scroll 0 5px transparent;padding: 0 0 0
35px;cursor:pointer;border-bottom:1px dotted #CC}
.icon-admincp:hover{background:
url(../images/comvivem/ico_azul_perfil.png) no-repeat scroll 0 5px
transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted
#CC}
No se fijen en que estan repetidas pues aun tengo que optmizar un poco
todo
esto ;). Bien tengo un UL que tiene varios LI:
ul class=box_content_navigation
li class=icon-home firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-eventa href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
IMPORTANTE: lo típico es pensar que hay que dejar espacio
entre los nombres de las clases. No lo hagas!.
Te lo pongo en grande por si acaso:
li.icon-event.current { estilo que yo quiero para etiquetas que tenga las
dos clases anteriores }
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:45, Manuel Canga - Latrasweb.net
i...@latrasweb.net escribió:
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com reynie...@gmail.com
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
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: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Hola Reynier, solo queria ayudarte a reducir la cantidad de estilos que estas
empleando:
ul class=box_content_navigation
lia href=inicio class=icon-homeInicio/a/li
li class=has_childrena href=cmvblog class=icon-blog Blog/a
ul class=subitem
lia href=cmvblog/createCrear
entrada/a/li
lia
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
lia href=event class=icon-eventEventos/a/li
lia href=members class=icon-membersDirectorio/a/li
lia href=relations class=icon-friends lastAmigos/a/li
lia href=messages class=icon-messagesMensajes/a/li
lia href=edit-profile class=icon-accountEditar perfil/a/li
lia href=admin
target=_blank class=icon-admincp hide-for-smallPanel de Control/a/li
/ul
ul.box_content_navigation li {border-bottom:1px dotted #CC;}
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, reynie...@gmail.com reynie...@gmail.com 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: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier.
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Gracias Anabel como comente al principio no habia mirado el tema de reducir
los estilos aun pero tus sugerencias son bienvenidas y seran usadas. Manuel
funciona a la perfección, gracias por la ayuda.
Saludos a todos y gracias
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Anabel Fernandez anabelu...@gmail.com
Hola Reynier, solo queria ayudarte a reducir la cantidad de estilos que
estas empleando:
ul class=box_content_navigation
lia href=inicio class=icon-homeInicio/a/li
li class=has_childrena href=cmvblog class=icon-blog Blog/a
ul class=subitem
lia href=cmvblog/createCrear
entrada/a/li
lia
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
lia href=event class=icon-eventEventos/a/li
lia href=members class=icon-membersDirectorio/a/li
lia href=relations class=icon-friends lastAmigos/a/li
lia href=messages class=icon-messagesMensajes/a/li
lia href=edit-profile class=icon-accountEditar perfil/a/li
lia href=admin
target=_blank class=icon-admincp hide-for-smallPanel de
Control/a/li
/ul
ul.box_content_navigation li {border-bottom:1px dotted #CC;}
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, reynie...@gmail.com reynie...@gmail.com
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} y uno para cuando
se
le hace un hover .icon-event:hover{background:
url(../images/comvivem/ico_eventos_hover.png)
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
En verdad, aprovecho y voy un poco más allá.
Una etiqueta siempre puede más tener de una clase, pero no más de un id (
además
único en toda la web ).
Podrías tener:
p class=fondo color tipoMi casa/p
p class=fondo colorMi web/p
p class=fondoMi gadget/p
p class=colorMi css/p
css:
p.fondo { background-color: blue; }
p.color { color: green; }
p.tipo { font-weight: bold; }
p.fondo.color.tipo { border: 1px solid red; }
resultado:
Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en
letra.
Mi web tendra color de fondo azul y color de texto verde
Mi gadget tendrá fondo azul
Mi css tendrá color de fuente verde.
Espero que sirva para aclarar todo más.
Por cierto, +1 a la recomendación de Anabel.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:49, reynie...@gmail.com
reynie...@gmail.comescribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
No te he entendido bien. Si lo que quieres es que
a un li
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Bueno probé el código de Anabel y casi que funciona al 100% pero me genera
un border doble en los elementos hijos.
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
En verdad, aprovecho y voy un poco más allá.
Una etiqueta siempre puede más tener de una clase, pero no más de un id (
además
único en toda la web ).
Podrías tener:
p class=fondo color tipoMi casa/p
p class=fondo colorMi web/p
p class=fondoMi gadget/p
p class=colorMi css/p
css:
p.fondo { background-color: blue; }
p.color { color: green; }
p.tipo { font-weight: bold; }
p.fondo.color.tipo { border: 1px solid red; }
resultado:
Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en
letra.
Mi web tendra color de fondo azul y color de texto verde
Mi gadget tendrá fondo azul
Mi css tendrá color de fuente verde.
Espero que sirva para aclarar todo más.
Por cierto, +1 a la recomendación de Anabel.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:49, reynie...@gmail.com
reynie...@gmail.comescribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} 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
#CC}. 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,
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
¿ podrías pasar el código de como quedó para
echarle un vistazo en su totalidad ?
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 23:03, reynie...@gmail.com
reynie...@gmail.comescribió:
Bueno probé el código de Anabel y casi que funciona al 100% pero me genera
un border doble en los elementos hijos.
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
En verdad, aprovecho y voy un poco más allá.
Una etiqueta siempre puede más tener de una clase, pero no más de un id (
además
único en toda la web ).
Podrías tener:
p class=fondo color tipoMi casa/p
p class=fondo colorMi web/p
p class=fondoMi gadget/p
p class=colorMi css/p
css:
p.fondo { background-color: blue; }
p.color { color: green; }
p.tipo { font-weight: bold; }
p.fondo.color.tipo { border: 1px solid red; }
resultado:
Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en
letra.
Mi web tendra color de fondo azul y color de texto verde
Mi gadget tendrá fondo azul
Mi css tendrá color de fuente verde.
Espero que sirva para aclarar todo más.
Por cierto, +1 a la recomendación de Anabel.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:49, reynie...@gmail.com
reynie...@gmail.comescribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} y uno
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
No hace falta, ya he visto el fallo, retiro lo dicho.
Ha sido un descuido. En los estilos que contengan:
ul.box_content_navigation li
cambialos a:
ul.box_content_navigation li
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 23:03, reynie...@gmail.com
reynie...@gmail.comescribió:
Bueno probé el código de Anabel y casi que funciona al 100% pero me genera
un border doble en los elementos hijos.
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
En verdad, aprovecho y voy un poco más allá.
Una etiqueta siempre puede más tener de una clase, pero no más de un id (
además
único en toda la web ).
Podrías tener:
p class=fondo color tipoMi casa/p
p class=fondo colorMi web/p
p class=fondoMi gadget/p
p class=colorMi css/p
css:
p.fondo { background-color: blue; }
p.color { color: green; }
p.tipo { font-weight: bold; }
p.fondo.color.tipo { border: 1px solid red; }
resultado:
Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en
letra.
Mi web tendra color de fondo azul y color de texto verde
Mi gadget tendrá fondo azul
Mi css tendrá color de fuente verde.
Espero que sirva para aclarar todo más.
Por cierto, +1 a la recomendación de Anabel.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:49, reynie...@gmail.com
reynie...@gmail.comescribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
Exacto ese era el problema pero aún así me va quedando un detalle y es que
el elemento que tiene current no debe tener border por ningun lado, le puse
border:0 al current pero eso solo aplica a ese LI y no al de encima cual es
el selector css para decirle que el border-bottom del elemento inmediato
superior al current sea 0?
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
No hace falta, ya he visto el fallo, retiro lo dicho.
Ha sido un descuido. En los estilos que contengan:
ul.box_content_navigation li
cambialos a:
ul.box_content_navigation li
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 23:03, reynie...@gmail.com
reynie...@gmail.comescribió:
Bueno probé el código de Anabel y casi que funciona al 100% pero me
genera
un border doble en los elementos hijos.
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
En verdad, aprovecho y voy un poco más allá.
Una etiqueta siempre puede más tener de una clase, pero no más de un
id (
además
único en toda la web ).
Podrías tener:
p class=fondo color tipoMi casa/p
p class=fondo colorMi web/p
p class=fondoMi gadget/p
p class=colorMi css/p
css:
p.fondo { background-color: blue; }
p.color { color: green; }
p.tipo { font-weight: bold; }
p.fondo.color.tipo { border: 1px solid red; }
resultado:
Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita
en
letra.
Mi web tendra color de fondo azul y color de texto verde
Mi gadget tendrá fondo azul
Mi css tendrá color de fuente verde.
Espero que sirva para aclarar todo más.
Por cierto, +1 a la recomendación de Anabel.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:49, reynie...@gmail.com
reynie...@gmail.comescribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta
href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta
href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web:
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
En mi opinión, para el caso particular que indicas no lo hagas
por css sino por programación. También te lo digo porque no sé
como se haría en css :D ( seguramente alguien con más conocimientos
en las listas te pueda echar una mano ).
Yo lo resolvería haciendo que de la misma manera que estás añadiendo
un current al li del bajo nivel se lo pones al de arriba que lo contenga.
No sé como harás la programación, si quieres la pasas y la vemos.
Eso sí, a lo mejor eso ya queda fuera del ámbito de estas listas.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 23:12, reynie...@gmail.com
reynie...@gmail.comescribió:
Exacto ese era el problema pero aún así me va quedando un detalle y es que
el elemento que tiene current no debe tener border por ningun lado, le puse
border:0 al current pero eso solo aplica a ese LI y no al de encima cual es
el selector css para decirle que el border-bottom del elemento inmediato
superior al current sea 0?
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
No hace falta, ya he visto el fallo, retiro lo dicho.
Ha sido un descuido. En los estilos que contengan:
ul.box_content_navigation li
cambialos a:
ul.box_content_navigation li
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 23:03, reynie...@gmail.com
reynie...@gmail.comescribió:
Bueno probé el código de Anabel y casi que funciona al 100% pero me
genera
un border doble en los elementos hijos.
Ing. Reynier Perez Mira
eMail: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
En verdad, aprovecho y voy un poco más allá.
Una etiqueta siempre puede más tener de una clase, pero no más de un
id (
además
único en toda la web ).
Podrías tener:
p class=fondo color tipoMi casa/p
p class=fondo colorMi web/p
p class=fondoMi gadget/p
p class=colorMi css/p
css:
p.fondo { background-color: blue; }
p.color { color: green; }
p.tipo { font-weight: bold; }
p.fondo.color.tipo { border: 1px solid red; }
resultado:
Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita
en
letra.
Mi web tendra color de fondo azul y color de texto verde
Mi gadget tendrá fondo azul
Mi css tendrá color de fuente verde.
Espero que sirva para aclarar todo más.
Por cierto, +1 a la recomendación de Anabel.
Un saludo
--
Manuel Canga
Desarrollo creativo de
CMS y frameworks
Email: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:49, reynie...@gmail.com
reynie...@gmail.comescribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta
href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta
href=eventEventos/a/li
li class=icon-membersa
href=membersDirectorio/a/li
li class=icon-friends lasta
href=relationsAmigos/a/li
li class=icon-messagesa
href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar
perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel de
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
jejeje no vale tranquilo de esa me encargo yo solo que queria saber/aprender si existía alguna forma de hacerlo con CSS dado que existen los selectores :before y :after pero estos no cumplen con lo que necesito hacer. Saludos y les dejaré saber como me fue Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net No sé como harás la programación, si quieres la pasas y la vemos. Eso sí, a lo mejor eso ya queda fuera del ámbito de estas listas. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase current
reynie...@gmail.com reynie...@gmail.com escribió:
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: reynie...@gmail.com, reynier. reynie...@hotmail.compe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 firsta href=inicioInicio/a/li
li class=icon-blog has_childrena href=cmvblogBlog/a
ul
li class=subitem firsta href=cmvblog/createCrear
entrada/a/li
li class=subitem lasta
href=cmvblog/categoriesCategoriacute;as/a/li
/ul
/li
li class=icon-event currenta href=eventEventos/a/li
li class=icon-membersa href=membersDirectorio/a/li
li class=icon-friends lasta href=relationsAmigos/a/li
li class=icon-messagesa href=messagesMensajes/a/li
li class=icon-accounta href=edit-profileEditar perfil/a/li
li class=icon-admincp hide-for-smalla href=admin
target=_blankPanel 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: *i...@latrasweb.net*
Web: http://www.latrasweb.net
Twitter: http://twitter.com/latrasweb_net
El 4 de septiembre de 2012 22:37, reynie...@gmail.com
reynie...@gmail.comescribió:
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 #CC} 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
#CC}. 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: reynie...@gmail.com, reynier. reynie...@hotmail.com
pe...@treswd.com
Website: http://www.reynierpm.com
Skype: reynierpm
Mobile: +58 424.180.5609
2012/9/4 Manuel Canga - Latrasweb.net i...@latrasweb.net
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
