RE: [Ovillo] cascading, no me entero
Hola Luis,
Lo que sucede es que los estilos del 1º ul/li marcan al resto (heredan los
estilos del ul padre). Lo que tienes que hacer para que los segundos ul/li o
sucesivos sean diferentes a los primeros es darles un estilo diferente, es
decir un class, x ejemplo paginator2, que anule a los anteriores y
complementarlo con lo que tu quieras.
El código sería el siguiente:
ul
liPunto uno
ul class=segundos
li class=paginator2Punto dos/li
/ul
/li
/ul
Estilos:
ul{}
li{}
ul.segundos{}
li.paginator2{}
Espero servirte de ayuda... un saludo. :)
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de eemece2
Enviado el: martes, 07 de junio de 2005 20:42
Para: Ovillo@lists.ovillo.org
Asunto: [Ovillo] cascading, no me entero
Buenas a todos,
Estoy liado con un codigo que no consigo que funcione.
Supongo que es un error de conceptos con la aplicación en cascada de
estilos, pero no acabo de verlo.
El problema es que tengo dos listas ul dentro de un div, la primera
tiene un class=paginator, y la segunda no tiene class.
Al aplicar estilos al primer ul ( ul.paginator ) me los coge, pero tambien
me coge los aplicados a los ul sin clase ( .projects .items ul )
En concreto, en el codigo de abajo, lo que yo quiero aplicar en:
ul.paginator { }
ul.paginator li { }
si se aplica, pero tambien se aplica lo de:
.projects .items ul { }
.projects .items ul li { }
y en los estilos:
ul.paginator { margin-bottom: 10px; border-left: 0px solid #000;}
ul.paginator li { padding: 0 5px 0 0; }
prevalecen los anteriores.
he puesto el ul paginator repetido, uno dentro y otro fuera, para ver la
diferencia (lo que quiero es que dentro salga lo que sale fuera de los divs)
Gracias por vuestro tiempo y un saludo,
Edu
/
Este es el codigo:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
title/title
style type=text/css
/*![CDATA[*/
.projects .items ul
{
border-left: 6px solid #FF7946;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
.projects .items ul li{
margin: 0 0 4px 0;
padding: 5px;
background-color: #eee;
border-bottom: 1px solid #D6D6D6;
overflow: hidden;
}
/* PAGINATOR */
ul.paginator {
margin-bottom: 10px;
border-left: 0px solid #000;
}
ul.paginator li {
display: inline;
padding: 0 5px 0 0;
margin:0;
border-bottom: 1px solid #444;
background-color:#eee;
}
ul.paginator li.selected {
background-color:#fff;
border: 1px solid #444;
border-width: 1px 1px 0 1px;
}
/*]]*/
/style
/head
body
ul class='paginator'
li class='selected'1/li
lia href='pag=2'2/a/li
lia href='pag=3'3/a/li
/ul
div class=projects
div class=items
ul class='paginator'
li class='selected'1/li
lia href='pag=2'2/a/li
lia href='pag=3'3/a/li
/ul
ul
liproyecto 1/li
liproyecto 2/li
liproyecto 3/li
liProyecto 4/li
/ul
/div
/div
/body
/html
___
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://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://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] cascading, no me entero
No, no hace falta especificar las rutas donde se encuentra el ul,
simplemente especifícale un class a ese ul y al li y te lo cogerá
independientemente de la capa dónde se escriba.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de eemece2
Enviado el: miércoles, 08 de junio de 2005 12:10
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] cascading, no me entero
Gracias Ramon y Adriana,
Y entonces, como puedo aplicar esos estilos sin marcar con class los li de
dentro del 'paginator' ?
El 'paginator' lo renderiza un control de servidor, siempre igual, y puede
estar dentro de los div 'projects', 'items', o fuera, o dentro de otros
divs.
Es decir, no quiero poner:
projects .items ul.paginator li { }
¿Solo tengo estas dos alternativas: usar class en los li, o especificar
todas las rutas donde puede estar el ul con class paginator ?
Un saludo,
Edu
- Original Message -
From: Ramon Pravia [EMAIL PROTECTED]
To: ovillo@ovillo.org
Sent: Tuesday, June 07, 2005 11:00 PM
Subject: Re: [Ovillo] cascading, no me entero
Bueno, vamos por partes, que es muy sencillo. Espero explicarme bien,
que estoy medio dormido.
En primer lugar, no tienes problemas con la cascada, tienes problemas
para comprender la herencia. Son dos conceptos diferentes y que se
suelen confundir a menudo. Cascada se refiere al orden de precedencia
de las diferentes hojas de estilo que se le pueden aplicar a un
documento html (hojas de estilo de la aplicación, del autor, o del
usuario). Herencia es la forma en que las diferentes propiedades pasan
de unos elementos a sus descendientes, que es lo que te da problemas
en este caso.
Con el selector .projects .items ul li{} estás definiendo los estilos
para *todas* las li que estén dentro de cualquier elemento con clase
items que a su vez esté dentro de un elemento clase projects. Por lo
tanto, esos estilos afectan tanto a tu ul.paginator como a la que no
tiene ninguna clase y están dentro del div con class item
Luego dices que donde hay conflicto entre las reglas definidas en
ul.paginator li{} y .projects .items ul li{} prevalecen los que
defines en ésta última. Eso se debe a que este último selector tiene
mayor especificidad que el primero. Esto que suena tan raro significa
que con un selector te estás refiriendo a uno o varios elementos, y
puedes ser más genérico o más específico.
Por ejemplo, si defines reglas para ul (ul{color:red]) estás
refiriéndote a todas las ul en cualquier situación, mientras que si
defines #abuelito #dime #tu ul{color blue} te estás refiriendo a unas
ul en unas circunstancias mucho más determinadas (que descienda de un
elemento #tu, descendiente de otro elemento con id dime, que a su vez
descienda de #abuelito). En este caso, es lógico que para una lista
que cumpla estos requisitos, si hay conflicto, se apliquen los estilos
que *más específicamente* se han definido para ella y no los que se
han definido para todas en general.
Si quieres saber más sobre cómo se calcula la especificidad de
selectores, puedes echarle un ojo al punto 6.4.3. de la especificación
de css [1]. Y en cualquier caso, te recomiendo el selectutorial [2].
Y para traducir al castellano cualquier selector de css, prueba el
selecoracle [3]. No lo he probado mucho, pero creo que está chulo.
[1] http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specificity
[2] http://css.maxdesign.com.au/selectutorial/
[3] http://gallery.theopalgroup.com/selectoracle/
Espero haber ayudado :-)
saludos
El problema es que tengo dos listas ul dentro de un div, la
primera tiene un class=paginator, y la segunda no tiene class.
Al aplicar estilos al primer ul ( ul.paginator ) me los coge, pero
tambien me coge los aplicados a los ul sin clase ( .projects
.items ul )
En concreto, en el codigo de abajo, lo que yo quiero aplicar en:
ul.paginator { }
ul.paginator li { }
si se aplica, pero tambien se aplica lo de:
.projects .items ul { }
.projects .items ul li { }
y en los estilos:
ul.paginator { margin-bottom: 10px; border-left: 0px solid #000;}
ul.paginator li { padding: 0 5px 0 0; }
prevalecen los anteriores.
he puesto el ul paginator repetido, uno dentro y otro fuera, para
ver la diferencia (lo que quiero es que dentro salga lo que sale
fuera de los divs)
Gracias por vuestro tiempo y un saludo,
Edu
/
Este es el codigo:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head title/title style type=text/css /*![CDATA[*/
.projects .items ul { border-left: 6px solid #FF7946; list-style:
none; margin: 0; padding: 0; list-style: none; }
.projects .items ul li{
margin: 0 0 4px 0;
padding: 5px;
background-color: #eee;
border-bottom: 1px solid #D6D6D6;
overflow: hidden;
}
/* PAGINATOR */
ul.paginator {
margin-bottom: 10px;
border
Re: [Ovillo] cascading, no me entero
Bueno, vamos por partes, que es muy sencillo. Espero explicarme bien,
que estoy medio dormido.
En primer lugar, no tienes problemas con la cascada, tienes problemas
para comprender la herencia. Son dos conceptos diferentes y que se
suelen confundir a menudo. Cascada se refiere al orden de precedencia
de las diferentes hojas de estilo que se le pueden aplicar a un
documento html (hojas de estilo de la aplicación, del autor, o del
usuario). Herencia es la forma en que las diferentes propiedades pasan
de unos elementos a sus descendientes, que es lo que te da problemas
en este caso.
Con el selector .projects .items ul li{} estás definiendo los estilos
para *todas* las li que estén dentro de cualquier elemento con clase
items que a su vez esté dentro de un elemento clase projects. Por lo
tanto, esos estilos afectan tanto a tu ul.paginator como a la que no
tiene ninguna clase y están dentro del div con class item
Luego dices que donde hay conflicto entre las reglas definidas en
ul.paginator li{} y .projects .items ul li{} prevalecen los que
defines en ésta última. Eso se debe a que este último selector tiene
mayor especificidad que el primero. Esto que suena tan raro significa
que con un selector te estás refiriendo a uno o varios elementos, y
puedes ser más genérico o más específico.
Por ejemplo, si defines reglas para ul (ul{color:red]) estás
refiriéndote a todas las ul en cualquier situación, mientras que si
defines #abuelito #dime #tu ul{color blue} te estás refiriendo a unas
ul en unas circunstancias mucho más determinadas (que descienda de un
elemento #tu, descendiente de otro elemento con id dime, que a su vez
descienda de #abuelito). En este caso, es lógico que para una lista
que cumpla estos requisitos, si hay conflicto, se apliquen los estilos
que *más específicamente* se han definido para ella y no los que se
han definido para todas en general.
Si quieres saber más sobre cómo se calcula la especificidad de
selectores, puedes echarle un ojo al punto 6.4.3. de la especificación
de css [1]. Y en cualquier caso, te recomiendo el selectutorial [2].
Y para traducir al castellano cualquier selector de css, prueba el
selecoracle [3]. No lo he probado mucho, pero creo que está chulo.
[1] http://www.sidar.org/recur/desdi/traduc/es/css/cascade.html#specificity
[2] http://css.maxdesign.com.au/selectutorial/
[3] http://gallery.theopalgroup.com/selectoracle/
Espero haber ayudado :-)
saludos
El problema es que tengo dos listas ul dentro de un div, la
primera tiene un class=paginator, y la segunda no tiene class.
Al aplicar estilos al primer ul ( ul.paginator ) me los coge, pero
tambien me coge los aplicados a los ul sin clase ( .projects
.items ul )
En concreto, en el codigo de abajo, lo que yo quiero aplicar en:
ul.paginator { }
ul.paginator li { }
si se aplica, pero tambien se aplica lo de:
.projects .items ul { }
.projects .items ul li { }
y en los estilos:
ul.paginator { margin-bottom: 10px; border-left: 0px solid #000;}
ul.paginator li { padding: 0 5px 0 0; }
prevalecen los anteriores.
he puesto el ul paginator repetido, uno dentro y otro fuera, para
ver la diferencia (lo que quiero es que dentro salga lo que sale
fuera de los divs)
Gracias por vuestro tiempo y un saludo,
Edu
/
Este es el codigo:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head title/title style type=text/css /*![CDATA[*/
.projects .items ul { border-left: 6px solid #FF7946; list-style:
none; margin: 0; padding: 0; list-style: none; }
.projects .items ul li{
margin: 0 0 4px 0;
padding: 5px;
background-color: #eee;
border-bottom: 1px solid #D6D6D6;
overflow: hidden;
}
/* PAGINATOR */
ul.paginator {
margin-bottom: 10px;
border-left: 0px solid #000;
}
ul.paginator li {
display: inline;
padding: 0 5px 0 0;
margin:0;
border-bottom: 1px solid #444;
background-color:#eee;
}
ul.paginator li.selected {
background-color:#fff;
border: 1px solid #444;
border-width: 1px 1px 0 1px;
}
/*]]*/
/style
/head
body
ul class='paginator'
li class='selected'1/li
lia href='pag=2'2/a/li
lia href='pag=3'3/a/li
/ul
div class=projects
div class=items
ul class='paginator'
li class='selected'1/li
lia href='pag=2'2/a/li
lia href='pag=3'3/a/li
/ul
ul
liproyecto 1/li
liproyecto 2/li
liproyecto 3/li
liProyecto 4/li
/ul
/div
/div
/body
/html
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia,
experiencia y comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes
