Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

[css] Compter le nombre de <li>...

28 views
Skip to first unread message

Viwiv

unread,
Jul 30, 2009, 12:29:17 PM7/30/09
to
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.

Olivier Miakinen

unread,
Jul 30, 2009, 1:33:58 PM7/30/09
to
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

unread,
Jul 30, 2009, 2:46:08 PM7/30/09
to
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

unread,
Jul 30, 2009, 8:07:30 PM7/30/09
to
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

unread,
Jul 31, 2009, 2:30:08 AM7/31/09
to
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

unread,
Jul 31, 2009, 9:23:33 AM7/31/09
to
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

unread,
Jul 31, 2009, 10:29:40 AM7/31/09
to
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

unread,
Jul 31, 2009, 10:40:45 AM7/31/09
to
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

unread,
Jul 31, 2009, 10:52:18 AM7/31/09
to
... 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.

SAM

unread,
Jul 31, 2009, 11:03:46 AM7/31/09
to
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

belzebuth

unread,
Jul 31, 2009, 11:03:21 AM7/31/09
to
Olivier Miakinen wrote:
> Bonjour,
>
>
> Cela dit, même CSS2 n'est pas encore implémenté dans tous les navigateurs.
>
>
Bonjour aussi,

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

Cdt


Viwiv

unread,
Jul 31, 2009, 11:15:36 AM7/31/09
to
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.

SAM

unread,
Jul 31, 2009, 11:36:25 AM7/31/09
to
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

belzebuth

unread,
Jul 31, 2009, 11:37:58 AM7/31/09
to
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

Viwiv

unread,
Jul 31, 2009, 11:55:26 AM7/31/09
to
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'échapper,
puisque la majorité des thèmes de WordPress utilise la première
syntaxe !

Bien à vous,

V.

Viwiv

unread,
Jul 31, 2009, 11:58:46 AM7/31/09
to
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 contenus
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.

Viwiv

unread,
Jul 31, 2009, 1:18:54 PM7/31/09
to
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.

Mickaël Wolff

unread,
Jul 31, 2009, 4:28:50 PM7/31/09
to
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

unread,
Jul 31, 2009, 4:36:12 PM7/31/09
to
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

Olivier Miakinen

unread,
Jul 31, 2009, 5:13:39 PM7/31/09
to
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

SAM

unread,
Jul 31, 2009, 7:33:11 PM7/31/09
to
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

SAM

unread,
Aug 1, 2009, 11:04:11 AM8/1/09
to
Le 7/31/09 7:18 PM, Viwiv a �crit :
> 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">

Je reviens � la charge
quant � ta profusion de classes dans le HTML de ce menu
(dont � propos desquelles je ne comprends pas le pourquoi)

Moi, chez jQuery (et m�me d'autres sites de d�mo et +)
je ne vois pas d'emploi de classes et m�me d'ids si ce n'est le rep�re
pour l'ensemble du truc-bazard :

<http://docs.jquery.com/UI/Accordion>

Me semble qu'alors �a te simplifierait grandement la vie en n'ayant plus
de soucis ni pour les noms de class ni pour leurs associations.

et en employant ta syntaxe qui m'est incompr�hensible
(que sont ces '%n$s' ?
une sorte d'�criture de classes r�pertori�es dans un array ?)
il devrait suffire de :

<ul id="menu" class="accordeon">
<li><a href="p1.htm">menu 1</a>
<span>blabla du menu 1</span>
<ul>
<li><a href="p1-1.htm">ss-menu 1.1</a></li>
<li><a href="p1-2.htm">ss-menu 1.2</a></li>
<li><a href="p1-3.htm">ss-menu 1.3</a></li>
</ul>
</li>

Ha? Tien? y a pu de '%$truc' ...
(pourquoi rester esclave d'un CMS, quand qques lignes simples peuvent
convenir ?)

Et si c'est pour "fabriquer" � la demande des menus diff�rents au
travers du 'Content Management System' je suppose que :
<ul id="menu" class="accordeon %x$ss">
devrait suffire ?
( x = index du choix de menu, ss = StyleSheets ??? )

Autres d�mos :
(tt un tas d'exemples, vertical, horizontal, styl�s)
<http://www.catswhocode.com/blog/8-amazing-jquery-accordions>
dont celui-ci qui change les styles des 'titres' suivant leurs positions
<http://berndmatzner.de/jquery/hoveraccordion/>

Amusant :
<http://interface.eyecon.ro/demos/carousel.html>
et autres jQuery plug-ins :
<http://interface.eyecon.ro/demos/?page=demos>

--
sm

--
sm

Viwiv

unread,
Aug 2, 2009, 6:17:14 AM8/2/09
to
Bonjour Sam,

La profusion de classes n'est nullement liée à l'emploi de
l'accordéon. Au point où j'en suis dans mes travaux, aucune propriété
dans ma feuille de style ne se rapporte à ce script ! :)

Néanmoins, je te remercie pour tes liens, que j'avais déjà consulté.
Au demeurant, mon accordéon est d'une syntaxe plus simple que les
exemples cités dans les liens.

Pour comprendre la logique de WordPress, tu peux lire cet article, qui
me semble constituer une excellente introduction, même si elle est
datée :
http://www.css4design.com/blog/tutoriel-wordpress-2-2-la-sidebar-a-la-loupe-comprendre-les-widgets-et-declarer-une-war

Bien à toi,

V.

SAM

unread,
Aug 2, 2009, 12:11:46 PM8/2/09
to
Le 8/2/09 12:17 PM, Viwiv a �crit :
> Bonjour Sam,
>
> La profusion de classes n'est nullement li�e � l'emploi de
> l'accord�on. Au point o� j'en suis dans mes travaux, aucune propri�t�
> dans ma feuille de style ne se rapporte � ce script ! :)

Boudiou ! Non ?
M�zalors ... � quoi sert-ce ?

> N�anmoins, je te remercie pour tes liens, que j'avais d�j� consult�.
> Au demeurant, mon accord�on est d'une syntaxe plus simple que les
> exemples cit�s dans les liens.

Heu ... le html truff� de classes et sur-classes, je ne trouve pas �a
d'une syntaxe *plus* simple ;-)

> Pour comprendre la logique de WordPress, tu peux lire cet article, qui

> me semble constituer une excellente introduction, m�me si elle est
> dat�e :

Les blogs ... je ne supporte pas, j'en ai horreur, c'est le + souvent
d'innommables foutoirs.
Les CMS, je n'ai pas encore eu le courage de m'en approcher.
�a me semble hyper compliqu� et bien chiant � utiliser.
(sans compter que je n'aime pas trop "travailler" � l'aveugle: �a
produit tt un tas de code qu'on ne peut maitriser m'a t-il sembl�,
yaka voir le mal que se donne Bruno Bichet au lien ci-dessous)

> http://www.css4design.com/blog/tutoriel-wordpress-2-2-la-sidebar-a-la-loupe-comprendre-les-widgets-et-declarer-une-war

En attendant de le lire ... je vois :
- 97ko de "donn�es" (*)
- 200ko de gadgets (JS et CSS)
- 117ko d'images
... tr�s "utiles" sinon "indispensables" comme des smileys par exemple

(*) ces "donn�es" �tant l'url ci-dessus
les donn�es appel�es ind�pendamment profusent donc
Finalement ... dans les 425ko de cette page il y a combien de ko
utiles et n�cessaires ?

Ha! enfin le contenu : div id="post-98"
... qui arrive dans le div "container" (introduisant d'abord des
distractions comme des navBar non affich�es et divers google-trucs qui
doivent certainement bien acc�l�rer le chargement!)
... qui commence +/- par une vcard tr�s incompl�te (juste une url)
... qui apr�s les commentaires (non tri�s :-( )
finit par re-pubs google, cette fois + proche du sujet
(qui ne s'affichent m�me pas enti�rement chez moi)

> Bien � toi,

Ha! Tien, au fait :
comment modifie-t-on les FdS dans ce WordPress ?
(pour qu'enfin je puisse voir dans leur entier les exemples de code
donn�s dans ce billet - je suis oblig� de faire "afficher code source de
la s�lection" pour chacun)

> V.

Bon, pass�e ma grognerie, j'ai tent� de lire et
... n'ai pas vraiment compris ... sauf que :
- Bruno Bichet essaie de bidouiller les fichiers php du moteur WP
- qu'on utilise une(ou des ?) fonction(s) du moteur pour tenter
d'ins�rer un widget. Reste encore � voir ce que �a peut �tre.

Breffle, partant de l� et apr�s les pr�misses :
[code]
<?php if ( function_exists('register_sidebar') )
$widgetWrap = array(
'before_widget' => '<div id="%1$s" class="widget %2$s">'
... etc
[/code]
je ne vois pas ce qui emp�chera d'includer l� :
[code]
<div id="sidebar">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. /
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
[/code]
qque chose de propre ?
(le fichier du menu en accord�on d�pourvu de ttes ces classes qui
m'apparaissent maintenant +/- comme des mots-cl� de gestion de BdD)
[code-suite]
<?php endif; ?>
</ul>
</div>
[/code-suite]


Mais ... comme je n'ai pas vraiment compris l'bazar peut-�tre
simplifie-je un peu les possibilit�s de personnalisation du machin ?

� moins que tu ne sois en train de tenter de cr�er ce widget de menu en
accord�on?
Auquel cas on dirait que c'est d�j� fait:
<http://www.spicyexpress.net/general/accordion-the-new-wordpress-ajax-widget-to-enhance-your-sidebar-functions/>
(je te dis pas le temps que c'truc prend � se charger ... !)
<http://www.fran6art.com/plugins-wordpress/accordion-un-widget-ajax-pour-votre-sidebar/>
et ... pas vu de d�mo de type "accord�on" ... :-(

--
sm

Viwiv

unread,
Aug 2, 2009, 12:41:48 PM8/2/09
to
Sam !

Comme tu le réclames à cor et à cri (!), je te donne le code de mon
accordéon :

$(document).ready(function()
{
$("#sidebar_widget ul.accordion").hide();
$("#sidebar_widget h3.widgettitle").css('color','#FFD778').css
('cursor','pointer');
$("#sidebar_widget ul.accordion:first").show();
$("#sidebar_widget li:first").show();
$("#sidebar_widget h3.widgettitle:first").css('color','#64B5CC').css
('cursor','auto');
$("#sidebar_widget h3.widgettitle").click(function()
{
if(!$(this).next().is(':visible'))
{
$("#sidebar_widget ul.accordion").slideUp('normal');
$("#sidebar_widget h3.widgettitle").css('color','#FFD778').css
('cursor','pointer');
}
$(this).css('color','#64B5CC').css('cursor','auto').next().slideDown
("normal");
});
});

Donc, tu vois, je reprends le balisage par défaut de WordPress, qui
peut certainement être amélioré (!), pour gérer ce gadget.

En fait, je ne veux pas un énième Widget, mais l'inclure en standard à
un thème. Je m'en sers déjà en production (je ne vais pas t'ennuyer
avec le lien), car il y a une différence de comportement entre
Internet Explorer et Mozilla Firefox. Avec le premier navigateur, les
bordures se touchent quand il se déplie, et je n'aime guère. Je
voulais profiter d'une mise à jour de WordPress, où la gestion des
Widgets a été revue, pour résoudre le problème, mais je crois que je
vais abandonner.

Je comprends ta perplexité avec WordPress. Pour ma part, je ne m'en
sers pas comme outil de weblogue, mais, après adaptation, comme
(modeste) de site de presse sur une grande ville du Sud-Ouest de la
France. J'ai trouvé la démarche plus simple que de partir d'un site ab
nihilo, même si je n'ai pas vraiment gagné de temps : il m'a fallu
apprendre à "coller" à ce système de gestion de contenu.

Tu pouvais grogner, je n'y ai vu que de la correction fraternelle. :)

Bien à toi,

V.

0 new messages