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.
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
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 { ... }
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.
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
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
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 !
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
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 }
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
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; }
Pourquoi ? Quel est l'intérêt de la déclaration *vide* ? Aurai-je manqué quelque chose ? !
Merci.
Cordialement,
V.
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;
}
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; }
Pourquoi ? Quel est l'intérêt de la déclaration *vide* ? Aurai-je manqué quelque chose ? !
Merci.
Cordialement,
V.
Olivier Miakinen
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
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 !
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
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…">À propos…</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’accessibilité du site">Politique d’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.
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…">À propos…</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’accessibilité du
site">Politique d’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 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…">À propos…</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’accessibilité du site">Politique d’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".
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 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
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 ?
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 ?
