28172 sujets

CSS et mise en forme, CSS3

Syntaxe CSS : les combinaisons.

Bonjour,

J'ai encore du mal avec les combinaisons de la syntaxe CSS qui permet de ne pas faire de répétition dans la feuille de style. Je commence à intégrer le


#bloc{margin : 0 10 0 5;}


au lieu de 

#bloc{
margin-top: 0 px;
margin-right:10px;
margin-bottom: 0px;
margin-left: 5px;}


Maintenant je me heurte à ce petit problème. J'ai une liste <ul> que j'ai mis en forme avec la classe ul. Mais dans une autre page de mon site j'ai une autre liste que je veux mettre en forme différemment.

J'ai une solution qui marche: J'ai crée une classe #liste2 et mis en forme ma liste dans ma page 2 ainsi <ul id="liste2">.
Mais je crois qu'il y a plus pertinent mais je n'arrive pas à trouver la bonne syntaxe.

- une combinaison du genre, dans ma feuille de style, : ul #bloc1{..} (#bloc1 étant le bloc dans lequel se trouve la liste 2}. L'idée serait d'attacher ma liste à son containeur parent.

-Autre idée, attacher la liste à la page où elle se trouve, mais quelle serait la syntaxe?

Dans quelle mesure je me plante?

Question subsidiaire : j'ai pas trouvé ici et sur le net en général de récap des combinaisons des syntaxes CSS. Si vous avez... Smiley smile
J'ai un peu avancé.
ul#bloc1 {...} ne marche pas.
#bloc1 ul {...} marche.

Deuxième constatation, il faut toujours se référer au ul{...} qui reste... référent. Je m'explique:

ul {
width:100px}


Imaginons que je n'ai pas besoin de spécifier de width pour ma liste2, "normalement" il me suffit de ne pas le spécifier dans sa classe référente. Sauf que là, en l'absence de spécification dans sa classe #bloc1 ul, son référent (ul{...}) lui fait hériter de sa spécification width:100px.

Donc il faut :
#bloc1 ul{
width:0px;}


Suis-je clair? Smiley biggrin
Bonjour,

Alors en premier lieu, #liste2 n'est pas une classe mais un identifiant (c'est juste pour préciser...).

Ensuite, à mon humble avis, la solution que tu as utilisée (<ul id="liste2">) me semble être la meilleure solution et la plus simple.

Maintenant, sur l'idée que tu as d'attacher la liste à son conteneur parent, cela marche aussi à condition de respecter la hiérarchie des éléments (#bloc1 ul).

Pour ce qui est d'attacher "la liste à la page où elle se trouve", tu peux le faire en ayant une css spéciale pour chaque page, ce qui d'un point de vue de l'optimisation et de la gestion des styles, ne me semble pas très pertinent.

Pour ta question subsidiaire, tu trouveras sur ce même site une référence pour un excellent bouquin ( CSS 2 : Pratique du design web, de Raphaël Goetter) : il est pas cher et t'apprendra toutes les bases (et plus...).

Bon courage !
Bonjour

#bloc{margin : 0 10[#red]px[/#] 0 5[#red]px[/#] ;}


Attention de bien défnir les unités quand les valeurs sont différentes de zéro.

ul#bloc1 {...} défini la liste ayant l'id bloc1

#bloc1 ul {...} défini les listes contenues dans bloc1

Autre précision, ul n'est pas une classe mais un élément.

Pour les histoires de hiérarchie je viens de répondre à Pan sur un autre sujet tu y trouveras un lien sur les cascades css

Probleme-avec-la-hierarchie

a écrit :
Pour ce qui est d'attacher "la liste à la page où elle se trouve", tu peux le faire en ayant une css spéciale pour chaque page, ce qui d'un point de vue de l'optimisation et de la gestion des styles, ne me semble pas très pertinent.


Pas obligatoirement, une simple déclaration de la class ou de l'id correspondante dans la css courante peut-être suffisante.

<body id="mapage">
<div>
<ul>
.....
</ul>
</div>
</body>



#mapage ul
{.....}

Modifié par knarf (20 Nov 2008 - 10:28)
Merci pour ces réponses!

Le livre de R.Goetter, je l'ai depuis longtemps. Mais j'avoue ne pas m'y être replongé, n'ayant pas en mémoire de chapitre sur ces combinaisons. Smiley confused

Sinon je retiens donc que l'idée de rattacher l'élément (vous faites bien de recadrer les termes) ul à une page n'est pas la solution la plus pertinent.

Reste les deux autres :
gzav a écrit :
Bonjour,

Ensuite, à mon humble avis, la solution que tu as utilisée (<ul id="liste2">) me semble être la meilleure solution et la plus simple.


Pourquoi?
J'ai utilisé l'autre option #bloc1 ul parce que ça me semble plus parlant au niveau de l'organisation de ma feuille de style. Du fait que "ul" apparait ça m'indique rapidement à quoi sert l'identifiant #bloc1 ul. D'autant plus que je peux regrouper ainsi tout les identifiants et élément ul dans ma feuille de style.
Alors qu'un identifiant #liste2 peut être isolé parmi tous les id. Vous me direz que sa dénomination ou des commentaires résoudraient le pb. Et vous auriez raison.
Bref c'est une raison marginale. Donc j'en reviens à mon "pourquoi" du départ. Smiley ohwell Smiley cligne
Re !

a écrit :
Pourquoi?


Je dirais simplement que par rapport au contexte de ta question, c'est ce qui convenait puisque c'est ce que tu mettais en avant : sachant également que dans ta feuille de style, tu aurais ul#liste2 (donc tu peux l'identifier).

Maintenant la solution de la liste rattachée au bloc convient aussi : il y a toujours (ou souvent) plusieurs solutions. Après ce sont juste des conventions personnelles, le tout étant de rester logique et cohérent dans sa CSS Smiley cligne
Bonjour,

En passant, on ne parle pas de combinaisons. Il y a en fait plusieurs concepts différents qu'il ne faut pas confondre:

1. Les propriétés CSS de raccourci (telles que margin, padding, border, background, etc.).

2. Les sélecteurs multiples (plusieurs sélecteurs CSS pour un même bloc de déclarations, les sélecteurs étant séparés par des virgules).

3. Le sélecteur de descendants (qui fait partie des sélecteurs CSS 1, donc c'est vraiment la base, à réviser d'urgence!).
Sujet clos
Aller à