[Ovillo] CSS de una lista dentro de otra lista
Hola a t...@s,
Me estoy pegando con las CSS de una página y no soy quien a encontrar
una solución. El caso es que tengo una lista ul dentro de otro lista ul
de la siguiente manera
ul id=primerul
li
img... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
li
img ... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
/ul
El caso es que necesito que el li principal tenga la propiedad
clear:both y los li de la siguiente lista anidada necesito que tenga
clear both pero no se porque me hereda el clear:both de la primera li y
no soy capaz de conseguir el efecto que quiero hacer.
Este es el css
ul#primerul{
margin:0; padding:0; border:0; list-style-type:none;
}
ul#primerul li {
clear:both; margin-bottom:40px; overflow:hidden;
}
#primerul li ul li {
font-size:0.75em; color:#0e644b; float:left; margin-bottom:0;
}
¿Sabéis que puede hacer para que el li anidado pueda flotar a la derecha
y no tome la propiedad clear:both; del primer li?
Gracias y un saludo,
Nacho
___
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] CSS de una lista dentro de otra lista
Hola
lo que te pasa es normal
lo que dices con
ul#primerul li
es que las listas dentro de #primerul tendrán ciertos atributos, pero no
concreta que tenga que ser solo las listas de primer nivel... cualquier li
dentro de #primerul cogerá esos atributos ya estén dentro de otra ul o no,
con lo cual ederan todo lo que le pongas a
ul#primerul li
tendrás que poner
#primerul li ul li {clear:none;}
para limpiar lo que ereda de #primerul li
saludos
El 26/04/2010, a las 13:51, Nacho F. Carreño escribió:
Hola a t...@s,
Me estoy pegando con las CSS de una página y no soy quien a encontrar
una solución. El caso es que tengo una lista ul dentro de otro lista ul
de la siguiente manera
ul id=primerul
li
img... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
li
img ... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
/ul
El caso es que necesito que el li principal tenga la propiedad
clear:both y los li de la siguiente lista anidada necesito que tenga
clear both pero no se porque me hereda el clear:both de la primera li y
no soy capaz de conseguir el efecto que quiero hacer.
Este es el css
ul#primerul{
margin:0; padding:0; border:0; list-style-type:none;
}
ul#primerul li {
clear:both; margin-bottom:40px; overflow:hidden;
}
#primerul li ul li {
font-size:0.75em; color:#0e644b; float:left; margin-bottom:0;
}
¿Sabéis que puede hacer para que el li anidado pueda flotar a la derecha
y no tome la propiedad clear:both; del primer li?
Gracias y un saludo,
Nacho
___
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] CSS de una lista dentro de otra lista
Hola, Nacho
Lo primero, yo creo que tu código tiene toda la pinta de encajar mejor
en una lista de definición:
dl
dtTítulo del listado/dt
ddItem1/dd
ddItem2/dd
ddItem3/dd
dtTítulo del listado/dt
ddItem1/dd
ddItem2/dd
ddItem3/dd
/dl
La cuestión de la imagen podrías solucionarla metiéndola en el CSS (si
es decorativa) o dentro del dt.../dt
Si aun así mi sugerencia no te encaja, prueba con clear:none; dentro
de #primerul li li
El 26/04/2010 13:51, Nacho F. Carreño escribió:
Hola a t...@s,
Me estoy pegando con las CSS de una página y no soy quien a encontrar
una solución. El caso es que tengo una lista ul dentro de otro lista ul
de la siguiente manera
ul id=primerul
li
img... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
li
img ... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
/ul
El caso es que necesito que el li principal tenga la propiedad
clear:both y los li de la siguiente lista anidada necesito que tenga
clear both pero no se porque me hereda el clear:both de la primera li y
no soy capaz de conseguir el efecto que quiero hacer.
Este es el css
ul#primerul{
margin:0; padding:0; border:0; list-style-type:none;
}
ul#primerul li {
clear:both; margin-bottom:40px; overflow:hidden;
}
#primerul li ul li {
font-size:0.75em; color:#0e644b; float:left; margin-bottom:0;
}
¿Sabéis que puede hacer para que el li anidado pueda flotar a la derecha
y no tome la propiedad clear:both; del primer li?
Gracias y un saludo,
Nacho
___
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] CSS de una lista dentro de otra lista
Hola,
Efectivamente al añadir clear:none se ha mostrado la segunda lista como
yo quería.
Gracias Martín y Rodrigo por la ayuda!
Nacho
El 26/04/2010 14:02, Rodrigo Álvarez Virgós escribió:
Hola, Nacho
Lo primero, yo creo que tu código tiene toda la pinta de encajar mejor
en una lista de definición:
dl
dtTítulo del listado/dt
ddItem1/dd
ddItem2/dd
ddItem3/dd
dtTítulo del listado/dt
ddItem1/dd
ddItem2/dd
ddItem3/dd
/dl
La cuestión de la imagen podrías solucionarla metiéndola en el CSS (si
es decorativa) o dentro deldt.../dt
Si aun así mi sugerencia no te encaja, prueba con clear:none; dentro
de #primerul li li
El 26/04/2010 13:51, Nacho F. Carreño escribió:
Hola a t...@s,
Me estoy pegando con las CSS de una página y no soy quien a encontrar
una solución. El caso es que tengo una lista ul dentro de otro lista ul
de la siguiente manera
ul id=primerul
li
img... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
li
img ... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
/ul
El caso es que necesito que el li principal tenga la propiedad
clear:both y los li de la siguiente lista anidada necesito que tenga
clear both pero no se porque me hereda el clear:both de la primera li y
no soy capaz de conseguir el efecto que quiero hacer.
Este es el css
ul#primerul{
margin:0; padding:0; border:0; list-style-type:none;
}
ul#primerul li {
clear:both; margin-bottom:40px; overflow:hidden;
}
#primerul li ul li {
font-size:0.75em; color:#0e644b; float:left; margin-bottom:0;
}
¿Sabéis que puede hacer para que el li anidado pueda flotar a la derecha
y no tome la propiedad clear:both; del primer li?
Gracias y un saludo,
Nacho
___
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] CSS de una lista dentro de otra lista
Pon clear: none; al segundo nivel de li.
-Mensaje original-
De: Nacho F. Carreño [mailto:na...@stvisual.com]
Enviado el: lunes, 26 de abril de 2010 13:51
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] CSS de una lista dentro de otra lista
Hola a t...@s,
Me estoy pegando con las CSS de una página y no soy quien a encontrar
una solución. El caso es que tengo una lista ul dentro de otro lista ul
de la siguiente manera
ul id=primerul
li
img... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
li
img ... /
h3Título del listado/h3
ul
liItem1/li
liItem2/li
liItem3/li
/ul
/li
/ul
El caso es que necesito que el li principal tenga la propiedad
clear:both y los li de la siguiente lista anidada necesito que tenga
clear both pero no se porque me hereda el clear:both de la primera li y
no soy capaz de conseguir el efecto que quiero hacer.
Este es el css
ul#primerul{
margin:0; padding:0; border:0; list-style-type:none;
}
ul#primerul li {
clear:both; margin-bottom:40px; overflow:hidden;
}
#primerul li ul li {
font-size:0.75em; color:#0e644b; float:left; margin-bottom:0;
}
¿Sabéis que puede hacer para que el li anidado pueda flotar a la derecha
y no tome la propiedad clear:both; del primer li?
Gracias y un saludo,
Nacho
___
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] CSS de una lista dentro de otra lista
2010/4/26 Nacho F. Carreño na...@stvisual.com
ul#primerul li {
clear:both; margin-bottom:40px; overflow:hidden;
}
Lo que vos querés es esto:
ul#primerul li {
clear:both;
}
El selector significa *hijo (directo),* por lo que va a matchear con los
li de la lista externa, pero no los de las interna.
http://www.w3.org/TR/CSS2/selector.html#child-selectors
Según QuirksMode, funciona en todos los browsers, salvo IE 5.5 / IE 6
http://quirksmode.org/css/contents.html
saludos,
Joaquín Vicente
___
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] Selección último elemento
Estoy maquetando un calendario y me preguntaba la forma más correcta para
aplicar un estilo al último elemento. Las clases son iguales, lo único que
al último elemento no deseo aplicarle padding-right. Podría crear una clase
y quitarle el padding-right, pero busco algún otro método para no duplicar
acsi toda la información de la clase.
div class=fila-calendario
a href=/ title=15 de Marzo
class=dia-activo/a
a href=/ title=16 de Marzo
class=dia-activo/a
a href=/ title=17 de Marzo class=dia-activo/a
a href=/ title=18 de Marzo
class=dia-activo/a
a href=/ title=19 de Marzo
class=dia-activo/a
a href=/ title=20 de Marzo
class=dia-activo/a
a href=/ title=21 de Marzo class=dia-activo-derecha/a
/div
*CSS*
.fila-calendario-vacacional{clear:both;overflow:hidden;padding-top:10px;}
.dia-activo{background:transparent
url(../../images/HAL/dia-calendario-cifra.gif) no-repeat scroll 0
0;width:85px;height:86px;float:left;margin-right:7px;}
.dia-activo-derecha{background:transparent
url(../../images/HAL/dia-calendario-cifra.gif) no-repeat scroll 0
0;width:85px;height:86px;float:left;margin-right:7px;}
Saludos
___
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] Selección último elemento
2010/4/26 Rafa Artacho teme...@gmail.com:
Estoy maquetando un calendario y me preguntaba la forma más correcta para
aplicar un estilo al último elemento. Las clases son iguales, lo único que
al último elemento no deseo aplicarle padding-right. Podría crear una clase
y quitarle el padding-right, pero busco algún otro método para no duplicar
acsi toda la información de la clase.
div class=fila-calendario
a href=/ title=15 de Marzo
class=dia-activo/a
a href=/ title=16 de Marzo
class=dia-activo/a
a href=/ title=17 de Marzo class=dia-activo/a
a href=/ title=18 de Marzo
class=dia-activo/a
a href=/ title=19 de Marzo
class=dia-activo/a
a href=/ title=20 de Marzo
class=dia-activo/a
a href=/ title=21 de Marzo class=dia-activo-derecha/a
/div
*CSS*
.fila-calendario-vacacional{clear:both;overflow:hidden;padding-top:10px;}
.dia-activo{background:transparent
url(../../images/HAL/dia-calendario-cifra.gif) no-repeat scroll 0
0;width:85px;height:86px;float:left;margin-right:7px;}
.dia-activo-derecha{background:transparent
url(../../images/HAL/dia-calendario-cifra.gif) no-repeat scroll 0
0;width:85px;height:86px;float:left;margin-right:7px;}
Saludos
___
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
No necesitas repetir toda la clase... Simplemente aplica otra clase
que «sobreescriba» la propiedad que no quieras heredar:
.foo { ... }
.bar { padding: 0; }
element class=foo / element class=foo bar /
--
Xoan Sampaiño xoansampai...@gmail.com
/\ 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] CSS 3 Flexible Box Model
Gerardo Oscar Jimenez Tornos escribió: Supongo que tendrá algo que ver con la propiedad intelectual, ya que algún fin lucrativo sí que tienen los de Microsoft, aunque sea indirectamente. Tanto gecko (Mozilla) como Webkit tienen licencias que permiten usarse en proyectos cerrados, por ejemplo Safari, así que Microsoft podría utilizarlos sin problemas. Es posible que también tenga que ver con el tema de la competencia entre empresas. El problema es que hay mucho código (sobre todo en intranets) que es tan malo que solo funciona en Explorer, incluso en una determinada versión de explorer, con lo que Microsoft no puede permitirse el lujo de borrón y cuenta nueva. -- Saludos -=stripTM=- ___ 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] CSS 3 Flexible Box Model
Vaya, se parece un monton a XUL, sobretodo con esos pack, align, flex. secretamente me alegro de que html no tenga mucho control vertical, pero cuando llegue esto, producira maravillas en las manos de la gente muy buena que hay por ahi :-) igual hasta la cosa va rapido. Incluso Microsoft se ha pillado los dedos con IE6 (no puedes vender WindowsTeHagoUnSieteEnLaRopaja a quien debe usar IE6). Ahora que son ellos los que pierden dinero, habra prisas por desvincular el navegador de OS y dejar de hacer el imbecil. Aunque de Microsoft no se puede esperar que cambien la pose. 2010/4/23 stripTM f...@striptm.com Si no habéis visto este artículo, simplifica bastante el css a la hora de maquetar. http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/ -- Saludos -=stripTM=- -- -- ℱ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
