Comentarios en: Personalizando listas con CSS http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/ Desarrollo Web, Diseño, Recursos, Wordpress, Themes Wed, 14 Dec 2011 21:44:35 +0000 hourly 1 http://wordpress.org/?v=3.2.1 Por: Angelfire http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13611 Angelfire Fri, 18 Apr 2008 21:41:22 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13611 Que manera mas impresionante de gastar líneas de código, si todos los componentes tienen propiedades en comun lo más ĺógico es agruparlas en una clase y para ponerle los iconos simplemente un id. Que manera mas impresionante de gastar líneas de código, si todos los componentes tienen propiedades en comun lo más ĺógico es agruparlas en una clase y para ponerle los iconos simplemente un id.

]]> Por: Juan http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13609 Juan Fri, 18 Apr 2008 19:28:59 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13609 oops me olvide de un par de caracteres correccion: #featured li.mac {background-postion: 0 0} #featured li.clickideas {background-postion: 0 18px} oops me olvide de un par de caracteres
correccion:

#featured li.mac {background-postion: 0 0}
#featured li.clickideas {background-postion: 0 18px}

]]> Por: Juan http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13608 Juan Fri, 18 Apr 2008 19:28:04 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13608 De acuerdo con los que dijieron de juntar las reglas para usar menos css pero no se lo daria al UL, sino que a los LI. Otra forma efectiva es hacer una sola imagen con todos los iconos, para que cargue mas rapido y posicionar el background en el lugar que este el icono correspondiente. Por ejemplo: #featured li{ font-size: 11px; padding:0 0 0 17px; margin:0 0 2px 2px; background-repeat:no-repeat; background-image:url(ruta_a_la_imagen/icons.gif); } #featured li.mac {background-postion:0 0} #featured li.clickideas {0 18px} espero que les sirva, abrazo De acuerdo con los que dijieron de juntar las reglas para usar menos css pero no se lo daria al UL, sino que a los LI. Otra forma efectiva es hacer una sola imagen con todos los iconos, para que cargue mas rapido y posicionar el background en el lugar que este el icono correspondiente.

Por ejemplo:

#featured li{
font-size: 11px;
padding:0 0 0 17px;
margin:0 0 2px 2px;
background-repeat:no-repeat;
background-image:url(ruta_a_la_imagen/icons.gif);
}

#featured li.mac {background-postion:0 0}
#featured li.clickideas {0 18px}

espero que les sirva, abrazo

]]> Por: Infected http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13496 Infected Tue, 15 Apr 2008 04:14:25 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13496 De acuerdo con Jorge, resultaría más óptimo reunir todos los elementos. Aplicándolo al ejemplo <code>#featured ul{ font-size: 11px; padding:0 0 0 17px; margin:0 0 2px 2px; background-position:left; background-repeat:no-repeat; } #featured ul li.clickideas{ background-image:url(images/cli.gif); } #featured ul li.pownce { background-image:url(images/pow.gif); }</code> Etc... etc... :) Saludos! De acuerdo con Jorge, resultaría más óptimo reunir todos los elementos. Aplicándolo al ejemplo

#featured ul{
font-size: 11px;
padding:0 0 0 17px;
margin:0 0 2px 2px;
background-position:left;
background-repeat:no-repeat;
}

#featured ul li.clickideas{
background-image:url(images/cli.gif);
}

#featured ul li.pownce {
background-image:url(images/pow.gif);
}

Etc… etc… :) Saludos!

]]> Por: kerberoS http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13370 kerberoS Mon, 14 Apr 2008 05:06:08 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13370 Exacto, como dijo Diego el <code>list-style-image</code> no es interprerado de la misma forma en todos los navegadores. También es posible usar %porcentajes en remplazo de <em>bottom</em>, <em>left</em> o <em>top</em>. Eso nos da más control sobre la ubicación de la icono. Ej. <code> background:url(images/tarjeta.gif) 1% 50% no-repeat;</code>. Un abrazo. Exacto, como dijo Diego el list-style-image no es interprerado de la misma forma en todos los navegadores.

También es posible usar %porcentajes en remplazo de bottom, left o top. Eso nos da más control sobre la ubicación de la icono.

Ej. background:url(images/tarjeta.gif) 1% 50% no-repeat;.

Un abrazo.

]]> Por: Diego Ignacio http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13301 Diego Ignacio Sun, 13 Apr 2008 01:18:55 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13301 byBartus , el problema con list-style-image es que no se ve igual en todos los navgadores, background es poco correcto, pero da un mejor resultado. y por el codigo. se puede hacer mas pequeño =D byBartus , el problema con list-style-image es que no se ve igual en todos los navgadores, background es poco correcto, pero da un mejor resultado.

y por el codigo. se puede hacer mas pequeño =D

]]> Por: byBartus http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13292 byBartus Sat, 12 Apr 2008 17:43:50 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13292 que tal usar "list-style-image:"? que tal usar “list-style-image:”?

]]> Por: Jorge H. http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/comment-page-1/#comment-13289 Jorge H. Sat, 12 Apr 2008 17:05:14 +0000 http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comment-13289 Hola: para optimizar el css puedes reunir los elementos comunes así: todosTusIdentificadores separados por comas { font-size: 11px; padding-left: 17px; margin-left: 2px; margin-bottom: 5px; list-style:none; } luego a cada identificador (id o class) le pones su background correspondiente. Hola: para optimizar el css puedes reunir los elementos comunes así:
todosTusIdentificadores separados por comas {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
list-style:none;
}

luego a cada identificador (id o class) le pones su background correspondiente.

]]>