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 ___