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 e insertando imagen > en > vez del punto; > > >XXX >XXX >XXX. > > > 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 >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 > >escribió: > > > > > 2010/10/28 Jairo Ochoa : > > > > 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 > > > > > > > > > > > > http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08";>8 > > > > > > > > http://www.musicosaovivo.com/axenda/?event_id=27"; > > > > title="Mercedes Peón">Mercedes Peón > > > > > > > > > > > > > > > > .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
Confío que os pueda servir mi aporte: Por una parte, yo lo soluciono dando una class a e insertando imagen en vez del punto; XXX XXX XXX. 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 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 >escribió: > > > 2010/10/28 Jairo Ochoa : > > > 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 > > > > > > > > > http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08";>8 > > > > > > http://www.musicosaovivo.com/axenda/?event_id=27"; > > > title="Mercedes Peón">Mercedes Peón > > > > > > > > > > > > .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
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 escribió: > 2010/10/28 Jairo Ochoa : > > 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 > > > > > > http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08";>8 > > > > http://www.musicosaovivo.com/axenda/?event_id=27"; > > title="Mercedes Peón">Mercedes Peón > > > > > > > > .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
2010/10/28 Jairo Ochoa : > 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 > > > http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08";>8 > > http://www.musicosaovivo.com/axenda/?event_id=27"; > title="Mercedes Peón">Mercedes Peón > > > > .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
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 http://www.musicosaovivo.com/axenda/?calendar_day=2010-08-08";>8 http://www.musicosaovivo.com/axenda/?event_id=27"; title="Mercedes Peón">Mercedes Peón .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 escribió: > 2010/10/28 Jairo Ochoa : > > 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 >escribió: > > > >> 2010/10/28 Jairo Ochoa : > >> > Hola amigos, > >> > > >> > Me surge una duda al respecto de las listas. > >> > > >> > Sea la lista: > >> > > >> > > >> > primer elemento > >> > segundo elemento > >> > > >> > > >> > 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: > >> > >> > >>Item > >>Item > >> > >> > >> 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 : > 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 > escribió: > >> 2010/10/28 Jairo Ochoa : >> > Hola amigos, >> > >> > Me surge una duda al respecto de las listas. >> > >> > Sea la lista: >> > >> > >> > primer elemento >> > segundo elemento >> > >> > >> > 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: >> >> >> Item >> Item >> >> >> 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
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? Lo del color había pensado algo como lo que sugieres, pero tienes razón y también yo prefería evitarlo. 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 escribió: > 2010/10/28 Jairo Ochoa : > > Hola amigos, > > > > Me surge una duda al respecto de las listas. > > > > Sea la lista: > > > > > > primer elemento > > segundo elemento > > > > > > 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: > > >Item >Item > > > 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
Re: [Ovillo] definir separación y color del simbolo en una lista
2010/10/28 Jairo Ochoa : > Hola amigos, > > Me surge una duda al respecto de las listas. > > Sea la lista: > > > primer elemento > segundo elemento > > > 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: Item Item 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
[Ovillo] definir separación y color del simbolo en una lista
Hola amigos, Me surge una duda al respecto de las listas. Sea la lista: primer elemento segundo elemento 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 Dropbox - Almacenamiento gratis / Free online backup https://www.dropbox.com/referrals/NTg2Njc1MTg5 ___ 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