Re: [Ovillo] definir separación y color del simbolo en una lista
Eliminando estilos de lista, le doy un padding a la izquierda el justo y
necesario y un pequeño gif de bg ajustado a la izquierda y consigo el efecto
visual que necesito.
Pero la opción de la imagen era la última de mi lista. Veo que no tengo más
remedio que hacerlo así.
Gracias a todos por vuestros aportes.
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 29 de octubre de 2010 01:16, Jose Maria Ruiz de Arbulo
jmrarb...@gmail.com escribió:
Confío que os pueda servir mi aporte:
Por una parte, yo lo soluciono dando una class a ul e insertando imagen
en
vez del punto;
ul class=lista
liXXX/li
liXXX/li
liXXX./li
/ul
En CSS añado imágenes en vez de puntos. En este caso con extensión .ico que
bien puede ser .gif ó .png
.lista {
list-style-position:outside;
list-style-image: url(../imagenes/ok.ico);
}
Y es en la misma imagen, guardada con fondo transparente, donde conjugo los
padding que quiero mediante fondo transparente.
Al finás, la imagen toma todo su espacio permitiendo que este fondo
transparente no interfiera con el fondo del texto o del diseño.
De esta dorma, los navegadores respetan la imagen sin darles opción a
reinterpretar los espacios de margin o padding,
De esta forma, la posición inside ú outside importa menos y lo de
!important
procuro evitarlo.
El 28 de octubre de 2010 14:19, Jairo Ochoa jairo.oc...@gmail.com
escribió:
Sí, sí, está a 0px, así:
padding-left: 0 !important;
y el símbolo se mantiene alejado.
Probe a poner
padding-left: 50px !important;
y se queda en la misma posición.
Eso es lo que no entiendo. O no funciona así o hay otra clase que está
sobrescribiendo esa, pero por ese motivo añadí lo de !important.
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 28 de octubre de 2010 14:13, Xoan Sampaiño xoansampai...@gmail.com
escribió:
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
La solución para lo del color será crean un pequeño GIF y con
list-style-image.
En cuanto a la distancia del simbolo al texto, no hay manera, se
mantiene
constante, incluso probé a poner un tamaño de 50px y tampoco aumenta.
Pego el código completo
td class=eventful
a title= href=
http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08;8/a
ul
lia href=http://www.musicosaovivo.com/axenda/?event_id=27;
title=Mercedes PeónMercedes Peón/a/li
/ul
/td
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.dbem-calendar-full ul li a {
padding-left: 0 !important;
margin-left: 0 !important;
}
--
Jairo Ochoa
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 1em !important; /* Eso es lo que tienes que modificar
*/
margin-left: 0 !important;
}
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day- Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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
___
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] definir separación y color del simbolo en una lista
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
Esta es la clase:
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
}
El símbolo está fuera de la lista, ¿no se puede entonces?
Perdón, sí, quería decir fuera (si está dentro, el acolchado se aplica
también al símbolo). En tu caso, simplemente cambia padding-left.
Lo del color había pensado algo como lo que sugieres, pero tienes razón y
también yo prefería evitarlo.
Pues entonces, la única solución que se me ocurre es utilizar list-style-image.
Saludos,
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 28 de octubre de 2010 12:52, Xoan Sampaiño
xoansampai...@gmail.comescribió:
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
Hola amigos,
Me surge una duda al respecto de las listas.
Sea la lista:
ul
liprimer elemento/li
lisegundo elemento/li
/ul
Que se podría visualizar así
· primer elemento
· segundo elemento
¿Se puede definir la separación y el color del símbolo que aparece al
inicio
de la línea? Me refiero al punto, pero me da igual que sea un circle,
square, etc
Con separación me refiero a la distancia entre el símbolo y el primer
caracter
Gracias!
Saludos,
--
Jairo Ochoa
La separación la especificas con el acolchado del elemento li:
li { padding-left: 1em; }
siempre y cuando list-style-position sea inside (inherit).
Sobre el color, creo que no se puede sin modificar todo el color del
elemento li, así que podrías usar un apaño de esos que tan poco
gustan:
ul
lispanItem/span/li
lispanItem/span/li
/ul
y luego aplicar estilos ---span puede ser cualquier contenedor, por
ejemplo, div o p:
li { padding: left; color: red; }
li span { color: black; }
Saludos.
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day - Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day - Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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] definir separación y color del simbolo en una lista
La solución para lo del color será crean un pequeño GIF y con
list-style-image.
En cuanto a la distancia del simbolo al texto, no hay manera, se mantiene
constante, incluso probé a poner un tamaño de 50px y tampoco aumenta.
Pego el código completo
td class=eventful
a title= href=
http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08;8/a
ul
lia href=http://www.musicosaovivo.com/axenda/?event_id=27;
title=Mercedes PeónMercedes Peón/a/li
/ul
/td
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.dbem-calendar-full ul li a {
padding-left: 0 !important;
margin-left: 0 !important;
}
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 28 de octubre de 2010 13:20, Xoan Sampaiño xoansampai...@gmail.comescribió:
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
Esta es la clase:
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
}
El símbolo está fuera de la lista, ¿no se puede entonces?
Perdón, sí, quería decir fuera (si está dentro, el acolchado se aplica
también al símbolo). En tu caso, simplemente cambia padding-left.
Lo del color había pensado algo como lo que sugieres, pero tienes razón y
también yo prefería evitarlo.
Pues entonces, la única solución que se me ocurre es utilizar
list-style-image.
Saludos,
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 28 de octubre de 2010 12:52, Xoan Sampaiño xoansampai...@gmail.com
escribió:
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
Hola amigos,
Me surge una duda al respecto de las listas.
Sea la lista:
ul
liprimer elemento/li
lisegundo elemento/li
/ul
Que se podría visualizar así
· primer elemento
· segundo elemento
¿Se puede definir la separación y el color del símbolo que aparece al
inicio
de la línea? Me refiero al punto, pero me da igual que sea un
circle,
square, etc
Con separación me refiero a la distancia entre el símbolo y el primer
caracter
Gracias!
Saludos,
--
Jairo Ochoa
La separación la especificas con el acolchado del elemento li:
li { padding-left: 1em; }
siempre y cuando list-style-position sea inside (inherit).
Sobre el color, creo que no se puede sin modificar todo el color del
elemento li, así que podrías usar un apaño de esos que tan poco
gustan:
ul
lispanItem/span/li
lispanItem/span/li
/ul
y luego aplicar estilos ---span puede ser cualquier contenedor, por
ejemplo, div o p:
li { padding: left; color: red; }
li span { color: black; }
Saludos.
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day- Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day- Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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] definir separación y color del simbolo en una lista
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
La solución para lo del color será crean un pequeño GIF y con
list-style-image.
En cuanto a la distancia del simbolo al texto, no hay manera, se mantiene
constante, incluso probé a poner un tamaño de 50px y tampoco aumenta.
Pego el código completo
td class=eventful
a title= href=
http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08;8/a
ul
lia href=http://www.musicosaovivo.com/axenda/?event_id=27;
title=Mercedes PeónMercedes Peón/a/li
/ul
/td
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.dbem-calendar-full ul li a {
padding-left: 0 !important;
margin-left: 0 !important;
}
--
Jairo Ochoa
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 1em !important; /* Eso es lo que tienes que modificar */
margin-left: 0 !important;
}
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day - Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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] definir separación y color del simbolo en una lista
Sí, sí, está a 0px, así:
padding-left: 0 !important;
y el símbolo se mantiene alejado.
Probe a poner
padding-left: 50px !important;
y se queda en la misma posición.
Eso es lo que no entiendo. O no funciona así o hay otra clase que está
sobrescribiendo esa, pero por ese motivo añadí lo de !important.
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 28 de octubre de 2010 14:13, Xoan Sampaiño xoansampai...@gmail.comescribió:
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
La solución para lo del color será crean un pequeño GIF y con
list-style-image.
En cuanto a la distancia del simbolo al texto, no hay manera, se mantiene
constante, incluso probé a poner un tamaño de 50px y tampoco aumenta.
Pego el código completo
td class=eventful
a title= href=
http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08;8/a
ul
lia href=http://www.musicosaovivo.com/axenda/?event_id=27;
title=Mercedes PeónMercedes Peón/a/li
/ul
/td
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.dbem-calendar-full ul li a {
padding-left: 0 !important;
margin-left: 0 !important;
}
--
Jairo Ochoa
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 1em !important; /* Eso es lo que tienes que modificar */
margin-left: 0 !important;
}
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day- Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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] definir separación y color del simbolo en una lista
Confío que os pueda servir mi aporte:
Por una parte, yo lo soluciono dando una class a ul e insertando imagen en
vez del punto;
ul class=lista
liXXX/li
liXXX/li
liXXX./li
/ul
En CSS añado imágenes en vez de puntos. En este caso con extensión .ico que
bien puede ser .gif ó .png
.lista {
list-style-position:outside;
list-style-image: url(../imagenes/ok.ico);
}
Y es en la misma imagen, guardada con fondo transparente, donde conjugo los
padding que quiero mediante fondo transparente.
Al finás, la imagen toma todo su espacio permitiendo que este fondo
transparente no interfiera con el fondo del texto o del diseño.
De esta dorma, los navegadores respetan la imagen sin darles opción a
reinterpretar los espacios de margin o padding,
De esta forma, la posición inside ú outside importa menos y lo de !important
procuro evitarlo.
El 28 de octubre de 2010 14:19, Jairo Ochoa jairo.oc...@gmail.comescribió:
Sí, sí, está a 0px, así:
padding-left: 0 !important;
y el símbolo se mantiene alejado.
Probe a poner
padding-left: 50px !important;
y se queda en la misma posición.
Eso es lo que no entiendo. O no funciona así o hay otra clase que está
sobrescribiendo esa, pero por ese motivo añadí lo de !important.
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 28 de octubre de 2010 14:13, Xoan Sampaiño xoansampai...@gmail.com
escribió:
2010/10/28 Jairo Ochoa jairo.oc...@gmail.com:
La solución para lo del color será crean un pequeño GIF y con
list-style-image.
En cuanto a la distancia del simbolo al texto, no hay manera, se
mantiene
constante, incluso probé a poner un tamaño de 50px y tampoco aumenta.
Pego el código completo
td class=eventful
a title= href=
http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08;8/a
ul
lia href=http://www.musicosaovivo.com/axenda/?event_id=27;
title=Mercedes PeónMercedes Peón/a/li
/ul
/td
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.dbem-calendar-full ul li a {
padding-left: 0 !important;
margin-left: 0 !important;
}
--
Jairo Ochoa
.dbem-calendar-full ul li {
list-style: circle outside !important;
padding-left: 1em !important; /* Eso es lo que tienes que modificar */
margin-left: 0 !important;
}
--
Xoan Sampaiño [ xoan @ twitter|vimeo|flickr|delicious ]
/\ Document Freedom Day- Liberate your documents
_\/` http://documentfreedom.org/ - March 31st 2010
___
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
