OVH Cloud OVH Cloud

[css] Compter le nombre de ...

24 réponses
Avatar
Viwiv
Bonjour,

Je viens de chercher dans les arcanes de Google sans trouver de
r=E9ponse =E0 ma question.

En effet, j'aimerai savoir s'il serait possible, via une feuille de
style, de distinguer les listes contenant un seul =E9l=E9ment et plusieurs
=E9l=E9ments.

Je m'explique...

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

J'ai d=E9couvert qu'on pouvait cr=E9er des compteurs avec Css, mais il ne
me semble pas avoir trouv=E9 l=E0 un d=E9but de solution.

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

Merci.

Cordialement,

V.

10 réponses

1 2 3
Avatar
Viwiv
Bonjour Sam,

Pardon pour le "Content Management System", remplaçons par "Système de
Gestion de Contenu", si tu préfères. En l'espèce, il s'agit de
WordPress.

En effet, j'utilise l'accordéon avec la librairie JQuery : est-ce un
si mauvais choix ?

J'ai lu avec attention ton propos... J'ai vérifié le codage standard
de WordPress. Les Widgets s'affichent bien avec des noms de classe
séparés par des espaces... Exemple :

<li id="pages-5" class="widget widget_pages">
<h3 class="widgettitle">Pages</h3>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>

Cordialement,

V.
Avatar
SAM
Le 7/31/09 5:15 PM, Viwiv a écrit :
Bonjour Sam,

Pardon pour le "Content Management System", remplaçons par "Système de
Gestion de Contenu", si tu préfères. En l'espèce, il s'agit de
WordPress.



C'est WordPress qui "aide" à fabriquer le menu en accordéon ?

En effet, j'utilise l'accordéon avec la librairie JQuery : est-ce un
si mauvais choix ?



Je ne connais pas trop, mais un menu qui ne fonctionnerait qu'en
Javascript est pour moi un mauvais choix.
Ne te reste qu'a t'assurer que ça fonctionne (pas forcément à
l'identique) avec le JS désactivé.

Encore que ... de ttes façons y a déjà rien qui fonctionne sans JS si je
n'me trompe ?

J'ai lu avec attention ton propos... J'ai vérifié le codage standard
de WordPress. Les Widgets s'affichent bien avec des noms de classe
séparés par des espaces... Exemple :

<li id="pages-5" class="widget widget_pages">



Oui, la classe 'widget' et celle 'widget_pages'
(et autant celle 'widget' ou sa copine ne sert qu'au javascript du menu
en accordéon)

<h3 class="widgettitle">Pages</h3>



Alors là ça m'espatouffle !
... y a déjà un h3, faut en plus le classifationner !?
M'enfin que ne ferait-on pour justifier jQuery ? ;-)


<ul>
<li>...</li>
<li>...</li>
</ul>
</li>

Cordialement,



itou et toujours.

--
sm
Avatar
belzebuth
Viwiv wrote:
<li id="pages-5" class="widget widget_pages">


Bonjour,

Tu n'as rien au-dessus qui serait pris par défaut?

Comme SAM l'a souligné cela ne devrait pas fonctionner.

Cdt
Avatar
Viwiv
Bonjour,

Je pense avoir trouvé un début de solution, grâce à vos vigoureux
messages.

Les marqueurs, générés dynamiquement par une fonction, provoquait les
espaces dans l'affichage des noms des classes. En remplaçant...

<li id="%1$s" class="widget %2$s">
par
<li id="%1$s" class="widget-%2$s">

... le problème semble résolu, même si un élément a du m'échapp er,
puisque la majorité des thèmes de WordPress utilise la première
syntaxe !

Bien à vous,

V.
Avatar
Viwiv
Re...

Nos messages se sont croisés.

Non, l'ajout de l'accordéon avec JQuery est de mon cru. Je comprends
tes remarques et je les partage. Or, avant cette implémentation, j'ai
vérifié : si JavaScript est désactivé dans le navigateur, les conte nus
s'affichent. Ainsi, les informations demeurent accessibles. C'est, à
mon sens, un poids moyen entre allègement des informations présentes
sur les pages et accessibilité.

Bien à toi,

V.
Avatar
Viwiv
Bonjour,

Complément d'information...

Non la syntaxe
<li id="%1$s" class="widget-%2$s">
fait perdre le bénéfice de la classe générique "widget".

La réponse plus satisfaisante est :
<li id="%1$s" class="widget widget-%2$s">

Cordialement,

V.
Avatar
Mickaël Wolff
Olivier Miakinen wrote:

Euh... le contraire, non ?

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



Et je dirais meme

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

Faut vraiment que je refasse mes lunettes. J'avais lu qu'il voulait
des boites. :D
--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Avatar
Mickaël Wolff
SAM wrote:
Je ne comprends absolument pas qu'il faille ttes ces classes !


Pour bien séparer les concepts à mon avis.

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 ?



"John Doe"@example.com est une adresse valide au sens de la RFC 822

c'est quoi ça ?


Le logiciel de Blog, en fait.

avec des espaces ? vraiment ?


Oui,ça un sens. L'attribut HTML class est une liste de tokens (~mots).

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Avatar
Olivier Miakinen
Le 31/07/2009 17:03, belzebuth m'a répondu :

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



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



Non, ce n'est pas ce que je voulais dire, d'autant que je ne connaissais
pas CSS2Properties. Je voulais juste dire qu'un certain nombre des
sélecteurs définis dans CSS2 (et CSS2.1) ne sont pas encore implémentés
dans tous les navigateurs. Cela dit, comme ça fait longtemps que je n'ai
pas essayé avec Internet Explorer, il est possible que ça marche dans
IE7 en mode de respect des standards (c'est-à-dire par exemple avec
doctype HTML 4.01).

Une recherche rapide me donne ceci :
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
... et je confirme que ce n'est pas ce dont je parlais.

--
Olivier Miakinen
Avatar
SAM
Le 7/31/09 11:13 PM, Olivier Miakinen a écrit :

Je voulais juste dire qu'un certain nombre des
sélecteurs définis dans CSS2 (et CSS2.1) ne sont pas encore implémentés
dans tous les navigateurs. Cela dit, comme ça fait longtemps que je n'ai
pas essayé avec Internet Explorer, il est possible que ça marche dans
IE7 en mode de respect des standards (c'est-à-dire par exemple avec
doctype HTML 4.01).



La liste des CSS supportées par les IEs :
<http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx>
et la condition pour IE8:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
(y sont touj aussi dingues chez M$ !)

Quant aux joyeusetés relatives au doctype, peut-être ici :
<http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx>

En tous cas ça ne marche touj pas, même dans IE8, ne seraient-ce que les
pseudos des CSS3 :
<http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoelements>

Astuces pour palier certains "manques" :
<http://www.gatellier.be/blog/css-pseudo-classes-internet-explorer/>
(sans doute à intégrer dans des commentaires conditionnels adaptés, tant
qu'on y est)

Une recherche rapide me donne ceci :
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
... et je confirme que ce n'est pas ce dont je parlais.



Ha! Tien? Ça ça pourrait intéresser yoyo sur f.c.l.javascript

--
sm
1 2 3