[css] Compter le nombre de ...

Le
Viwiv
Bonjour,

Je viens de chercher dans les arcanes de Google sans trouver de
réponse à ma question.

En effet, j'aimerai savoir s'il serait possible, via une feuille de
style, de distinguer les listes contenant un seul élément et plusieurs
éléments.

Je m'explique

Dans ma feuille de style, je sépare chaque item <li> par une bordure
inférieure. Or, si la liste contient un seul item, j'aimerai que cette
bordure inférieure ne s'affiche pas pour des raisons logico-
esthétiques.

J'ai découvert qu'on pouvait créer des compteurs avec Css, mais il ne
me semble pas avoir trouvé là un début de solution.

Existe-t-il une solution simple, selon vous ?

Merci.

Cordialement,

V.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 3
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #22049311
Bonjour,

Le 30/07/2009 18:29, Viwiv a écrit :

En effet, j'aimerai savoir s'il serait possible, via une feuille de
style, de distinguer les listes contenant un seul élément et plusieurs
éléments.



Avec CSS3, on devrait pouvoir sélectionner un élément qui est à la fois
le premier et le dernier, et donc le seul :
li:first-child:last-child { ... }

http://www.w3.org/TR/css3-selectors/#first-child-pseudo
http://www.w3.org/TR/css3-selectors/#last-child-pseudo

Dans ma feuille de style, je sépare chaque item <li> par une bordure
inférieure. Or, si la liste contient un seul item, j'aimerai que cette
bordure inférieure ne s'affiche pas pour des raisons logico-
esthétiques.



Et si tu mettais une bordure entre chaque <li>, mais pas après le
dernier ? Cela fonctionnerait comme tu le souhaites quand il n'y a
qu'un seul élément, et je me demande si ce ne serait pas mieux aussi
quand il y en a plusieurs.

Du coup, tu n'as besoin que de CSS2 :
li { ... bordure *au dessus* ... }
li:first-child { ... pas de bordure ... }

Cela dit, même CSS2 n'est pas encore implémenté dans tous les navigateurs.


Cordialement,
--
Olivier Miakinen
Viwiv
Le #22035311
Bonsoir Olivier,

Merci pour cet avis précieux, qui répond parfaitement à mon besoin.

Je n'avais pas saisi, initialement, la subtilité entre bordure au-
dessus et au-dessous, mais j'ai fini par comprendre. :)

Tant pis pour les navigateurs qui n'ont pas encore implémenté le Css
2 : il faut savoir "lâcher prise" en matière de design Web, à en
croire les meilleurs auteurs. Quand je débutais,j'utilisais
Dreamweaver et étais ravi du Dhtml, laid mais efficace. Depuis j'ai
changé de religion !

Bien cordialement,

Vincent
Mickaël Wolff
Le #22035301
Olivier Miakinen wrote:

Du coup, tu n'as besoin que de CSS2 :
li { ... bordure *au dessus* ... }
li:first-child { ... pas de bordure ... }



Pour compléter, on peut aussi utiliser un sélecteur de noeud adjacent.

li { border: 1px solid black }
li + li { border-top: 0 }


--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Olivier Miakinen
Le #22035291
Le 31/07/2009 02:07, Mickaël Wolff a écrit :

Du coup, tu n'as besoin que de CSS2 :
li { ... bordure *au dessus* ... }
li:first-child { ... pas de bordure ... }



Pour compléter, on peut aussi utiliser un sélecteur de noeud adjacent.



Exact, et c'est même plus simple.

li { border: 1px solid black }
li + li { border-top: 0 }



Euh... le contraire, non ?

li + li { border-top: 1px solid black; }

--
Olivier Miakinen
Viwiv
Le #22035281
Bonjour,

Oui, j'ai testé la solution de Mickaël, qui ne m'a pas convaincue. De
plus, les sélecteurs de noeud adjacent ne semble pas mieux pris en
charge que les pseudo-classes ! :)

En revanche, Messieurs, j'ose une question complémentaire, puisque
j'avance dans la création de ma feuille de style (je n'ai pas lancer
un nouveau fil de discussion pour éviter le "bruit"). Ma curiosité est
piquée au vif.

En effet, je veux centrer une ou deux images placées dans une liste,
elle même située dans un conteneur nommé Widget...

Si j'utiise la syntaxe...

.widget.entries-syndicate ul {
padding-top: 15px;
text-align:center;
}
.widget.entries-syndicate li {
display: inline;
font-size: medium;
list-style-type: none;
}
.widget.entries-syndicate li img {
border: 2px solid #64b5cc;
margin-left: 15px;
margin-right: 15px;
}

... rien ne se passe !

Si j'utilise la syntaxe...

.widget.entries-syndicate {
}
.widget.entries-syndicate ul {
padding-top: 15px;
text-align:center;
}
.widget.entries-syndicate li {
display: inline;
font-size: medium;
list-style-type: none;
}
.widget.entries-syndicate li img {
border: 2px solid #64b5cc;
margin-left: 15px;
margin-right: 15px;
}

... ça fonctionne.

Pourquoi ? Quel est l'intérêt de la déclaration *vide* ? Aurai-je
manqué quelque chose ? !

Merci.

Cordialement,

V.
Olivier Miakinen
Le #22035271
Le 31/07/2009 15:23, Viwiv a écrit :

Oui, j'ai testé la solution de Mickaël, qui ne m'a pas convaincue.



Normal, puisqu'il faisait l'inverse de ce que tu voulais, à savoir
mettre quatre bordures partout, *sauf* la bordure supérieure à partir
du deuxième <li>.

De
plus, les sélecteurs de noeud adjacent ne semble pas mieux pris en
charge que les pseudo-classes ! :)



En effet.

[...] je veux centrer une ou deux images placées dans une liste,
elle même située dans un conteneur nommé Widget...

.widget.entries-syndicate ul [...]



Si le conteneur est *nommé* Widget, donc avec « id="Widget" », alors tu
devrais écrire « #Widget » plutôt que « .widget ». Qui plus est, il y a
alors toutes les chances pour que tu n'aies pas besoin de préciser en
plus qu'il est de classe « class="entries-syndicate" ».

Si au contraire tu arrives à détecter quelque chose avec le sélecteur
« .widget.entries-syndicate », alors c'est qu'il doit être de classe
« class="widget entries-syndicate" » ou le contraire.

Deux remarques :
1) À ce que je crois, la casse est importante aussi bien pour les
sélecteurs de classe que pour les sélecteurs d'id. Ne viens donc pas
parle de « Widget » si tu testes « widget ».
2) De mon expérience, les classes multiples ne sont pas forcément bien
gérées par les navigateurs. À manier avec précaution (ou à éviter
complètement quand on peut faire autrement).

Si j'utilise la syntaxe...

.widget.entries-syndicate {
}
[...]

... ça fonctionne.

Pourquoi ? Quel est l'intérêt de la déclaration *vide* ? Aurai-je
manqué quelque chose ? !



Tu as peut-être trouvé un contournement au bug de mauvaise gestion des
classes multiples ? Donne-nous donc le code HTML correspondant en même
temps que les définitions CSS, et dis-nous sur quel(s) navigateur(s) tu
as constaté ce phénomène !

--
Olivier Miakinen
Viwiv
Le #22035261
Bonjour,

Merci de ta réponse... Je mettais une majuscule à "Widget" car, en
mode "texte", je mets des majuscules aux anglicismes ! :)

Voici mon code... Pour la compréhension, j'ai mis également le contenu
du premier Widget, qui sert de menu de navigation :

<ul id="sidebar_widget">
<li id="ypthima-pages-4" class="widget pages">
<h3 class="widgettitle">Menu</h3>
<ul class="accordion">
<li class="page_item page-item-2"><a href="http://localhost/labo/a-
propos/" title="À propos&#8230;">À propos&#8230;</a></li>
<li class="page_item page-item-66"><a href="http://localhost/labo/
contact/" title="Contact">Contact</a></li>
<li class="page_item page-item-61"><a href="http://localhost/labo/
plan-du-site/" title="Plan du site">Plan du site</a></li>
<li class="page_item page-item-54"><a href="http://localhost/labo/
politique-daccessibilite/" title="Politique d&#8217;accessibilité du
site">Politique d&#8217;accessibilité du site</a></li>
<li class="page_item page-item-278"><a href="http://localhost/labo/
test/" title="Test">Test</a></li>
</ul>
</li>
<li id="ypthima-entries-syndicate-5" class="widget entries-
syndicate">
<h3 class="widgettitle">Syndication</h3>
<ul class="accordion">
<li><a href="http://localhost/labo/feed/"><img alt="Syndiquer les
commentaires avec un flux Really Simple Syndication" src="http://
localhost/labo/wp-content/themes/ypthima/news_black/rss.png"
title="Syndication des articles Labo avec le flux Rss" /></a></li>
</ul>
</li>
</ul>

Au demeurant, j'ai rencontré une difficulé avec les espaces dans les
noms des classes, mais le Content Management System produit ce code de
façon standard. Pour les formater dans ma feuille de style, je dois
utiliser "widget.entries-syndicate".

Merci pour ton aide bienveillante. :)

V.
Viwiv
Le #22035251
... Ma réponse était incomplète...

Voici les règles de style que j'utilise :

/* Widgets */
.widget {
margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px
}
h3.widgettitle {
border-bottom: 2px solid #ffd778;
border-top: 2px solid #ffd778;
color: #ffd778;
font-size: large;
margin : 5px 0 5px 0;
text-align: center;
}
.widget li ul {
display: block;
}
.widget ul {
margin-top:5px;
padding-top:5px;
}
.widget ul li {
border-top: dotted 1px #ffd778;
font-size: medium;
list-style-type: none;
margin-top: 1px;/**/
text-align: justify;
}
.widget ul li:first-child { /* Merci fr.comp.infosystemes.www.auteurs
*/
border-top: none;
font-size: medium;
list-style-type: none;
text-align: justify;
}
/* Widget syndicate */
.widget.entries-syndicate {
}
.widget.entries-syndicate ul {
padding-top: 15px;
text-align:center;
}
.widget.entries-syndicate li {
display: inline;
font-size: medium;
list-style-type: none;
}
.widget.entries-syndicate li img {
border: 2px solid #64b5cc;
margin-left: 15px;
margin-right: 15px;
}

Je constate le phénomène indifféremment sur Internet Explorer 8.0 et
Mozilla Firefox 3.0.12.

Cordialement,

V.
belzebuth
Le #22035241
Olivier Miakinen wrote:
Bonjour,


Cela dit, même CSS2 n'est pas encore implémenté dans tous les nav igateurs.




Bonjour aussi,

Tu veux dire CSS2Properties n'est pas encore implémenté?

Cdt
SAM
Le #22035231
Le 7/31/09 4:40 PM, Viwiv a écrit :
Bonjour,

Merci de ta réponse... Je mettais une majuscule à "Widget" car, en
mode "texte", je mets des majuscules aux anglicismes ! :)

Voici mon code... Pour la compréhension, j'ai mis également le contenu
du premier Widget, qui sert de menu de navigation :



Je ne comprends absolument pas qu'il faille ttes ces classes !

#sidebar_widget { display: inline }
#sidebar_widget li { list-style: none; margin:0; }
#sidebar_widget li h3 { color: red; }
#sidebar_widget ul { list-style: none; margin:0; display: none;}
#sidebar_widget ul li { blabla }

sauf à ce que l'accordion soit le plug-in jQuery qui nous bassine à
utiliser les classes pour retrouver ses bébés :-(

Au demeurant, j'ai rencontré une difficulé avec les espaces dans les
noms des classes,



Aussi c't'idée de mettre des espace dans des "noms" !
(tu n'as pas mis "oovi w ivoo" dans ton adresse email, pourquoi ?

mais le Content Management System



c'est quoi ça ?

produit ce code de façon standard.



avec des espaces ? vraiment ?

Pour les formater dans ma feuille de style, je dois
utiliser "widget.entries-syndicate".



rien vu dans ton extrait de code se rapportant à "widget" ni à
"entries-syndicate"

Merci pour ton aide bienveillante. :)



S'il y a un espace dans le nom de la classe ('truc chose' par ex.) le
navigateur (quand il lira <span class="truc chose"> par ex.) va chercher
dans la FdS la classe 'truc' et la classe 'chose', bien évidemment.
Et comme elles n'y seront pas ...
Vlan! Kpout.
Non ?

--
sm
Publicité
Poster une réponse
Anonyme