Css3, list, counter

Bonjour,
j'ai un problème en css3 avec une liste et un counter.

J'ai une liste qui se forme en deux colonnes avec une mise en forme personnalisée des puces.

Je cherche une solution pour garder mes deux colonnes, et enlever la numérotation sur les éléments de classe titre et réinitialiser mon "counter" après chaque élément titre.

Comment dire à ma liste tu vas ds tel ou tel colonne et réinitialiser la numération.

J'ai essayé un "counter-reset: item" et un "list-style: none" mais sa ne fonctionne pas.

L'idée c'est d'avoir quelque chose de ce genre la :

Colonne 1:
3 Métiers
1. Sonorisation
2. Eclairage
3. Scène

3 Plateformes
1. Bron
2. Corbelin
3. Brégnier-Cordon

Colonne 2:
3 Activités
1. Sonorisation
2. Eclairage
3. Scène

et voici mon code actuel :

<div id="column">
<ul id="entree">
<li class="titre">3 Métiers</li>
<li>Sonorisation</li>
<li>Eclairage</li>
<li>Scène </li>
<li class="titre">3 Activités</li>
<li>Prestation</li>
<li>Location</li>
<li>Vente</li>
<li class="titre">3 Plateformes</li>
<li>Bron, Rhône (69)</li>
<li>Corbelin, Isère (38)</li>
<li>Brégnier-Cordon, Ain (01)</li>
</ul>
</div>

#column div {
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;
-moz-column-gap:31px;
-webkit-column-gap:31px;
-o-column-gap:31px;
column-gap:31px;
-webkit-column-rule-width:1px;
-webkit-column-rule-color:#999999;
-webkit-column-rule-style:dotted;
-moz-column-rule-width:1px;
-moz-column-rule-color:#999999;
-moz-column-rule-style:dotted;
-o-column-rule-width:1px;
-o-column-rule-color:#999999;
-o-column-rule-style:dotted;
column-rule-width:1px;
column-rule-color:#999999;
column-rule-style:dotted;
}

#column p {
text-align: justify;
}

#entree li.titre {
list-style-type: none;
counter-reset: item;
font-size: 1.5em;
text-transform: uppercase;
}

#entree li {
display: list-item;
list-style-type: none;
counter-increment: item;
margin-bottom: 10px;
font: 15px 'trebuchet MS', 'lucida sans';
font-style: italic;
display:block;
width : 28%;
height : 20px;
float:left;
}

#entree li[float="left"] + li {
float:none;
}

#entree li:before {
content: counter(item);
padding: 0 10px 3px;
margin-left: 20px;
margin-right: 8px;
vertical-align: top;
background: #999999;
-moz-border-radius: 60px;
border-radius: 60px;
font-weight: bold;
font-size: 0.8em;
color: white;
}

Je vous remercie d'avoir pris le temps de lire tout ça.

Bonne journée

Bonjour,

sémantiquement parlant, ton code ne correspond pas à ce que tu demandes : tu devrais avoir trois items principaux avec chacun trois sous-items :

<ul>
  <li> Item
    <ul>
      <li>Sous-item</li>
      <li>Sous-item</li>
      <li>Sous-item</li>
    </ul>
  </li>
  <li> Item
    <ul>
      <li>Sous-item</li>
      <li>Sous-item</li>
      <li>Sous-item</li>
    </ul>
  </li>  
  <li> Item
    <ul>
      <li>Sous-item</li>
      <li>Sous-item</li>
      <li>Sous-item</li>
    </ul>
  </li>
</ul>

Ceci te permettra de définir un counter-reset sur ul ul , et counter-increment sur ul ul li ( avec des classes ce serait encre mieux ). Tu pourrais même - si besoin est - définir un deuxième compteur sur ton premier niveau.

Pour l'affichage, le plus simple est d'utiliser :before.

Parcoures ce lien afin d'en savoir plus et trouver un exemple concret.

Bonne continuation, j'espère avoir aidé !

PS : les compteurs css existent depuis Css 2.1 !
Modifié par Ten (09 Nov 2012 - 13:01)

Bonsoir,
je suis entièrement d'accord avec toi, la sémantique ne me convenait pas et j'avais auparavant utilisé une balise <hx> pour définir chaque titre.

je t'avouerai que c'est la première fois que j'utilise les counters, je n'en ai jamais eu l'utilité.

désolé d'avoir posté au sein du forum css3, je suis allé un peu vite et comme j'essaye d'utiliser au maximum les possibilités de css3 sur mon site, j'ai posté par ici.

je suis allé faire un tour sur ton lien, très intéressant.

merci beaucoup en tout cas, j'ai résolu mes problèmes de counter, reste encore quelques soucis d'affichage.

une dernière question concernant les colonnes, j'ai un léger problème d'affichage.
est-il possible d'éviter un retour à la ligne au bout de deux éléments.

je ne sais pas si je suis assez clair sur ce dernier point.

merci à bientôt

Ta demande est bien placée ne t'en fais pas, la remarque sur les origines des compteurs était plutôt la minute culturelle

Concernant ton problème de retour à la ligne, c'est effectivement confus : n'est-ce pas le but d'une liste que de retourner à la ligne pour chaque nouvel item ?

Je ne suis pas sûr d'avoir bien compris, donc n'hésites pas à faire un dessin - ou mieux, une page d'exemple.

très bien, je suis rassuré

si bien sure c'est sur le but d'une liste, mais je cherche à contrôler en réalité mes retours à la ligne.

Ma capture d'écran ci-dessous est assez explicite ou je me lance dans un bon vieux pavé ?

merci à toi

Dans cette capture, les <li> sont en float: left; ou pas ? Ça y ressemble énormément en tout cas !!

Est-ce que tu pourrais faire une démo sur jsfiddle par exemple ? Car à priori l'usage des colonnes css3 signifie que les items sont alignés verticalement, et dans ton image il semble qu'elle soit alignée horizontalement..

oui tout à fait, j'utilise un float:left :

.ssentree li {
font: 15px 'trebuchet MS', 'lucida sans';
font-style: italic;
list-style-type: none;
counter-increment: item;
margin-bottom: 10px;
display: block;
width: 28%;
height: 16px;
float: left;
}

.ssentree li[float="left"] + li {
float:none;
}

je t'ai mis un essai en ligne sur http://3jmusic.fr/test/ sa te permettra peut être d'y voir plus clair.

Bonjour,

Alors alors, il y a pas mal de choses qui ne vont pas :
1 - Pourquoi mettre un <br /> entre tes <li>, alors que par définition elles définissent une ligne chacune ? Ça gêne énormément ta gestion de la mise en forme.
2 - Tu mets des display: inline, float: left, display: block et display: list-item : c'est un peu beaucoup. Si tu supprimes tout ça, tes listes reviennent à un ordre normal, et à partir de là on va pouvoir travailler.
3 - Pour plus de sémantique, tes <ul class="ssentree"> doivent être à l'intérieur des <li> de premier niveau.
4 - Tu dois préciser des dimensions à ta <div id="column">, si je ne m'abuse 490px de large, et appliques-lui un float:right afin de la mettre au même niveau que ton image à gauche.
5 - Ensuite ça devient plus simple : tu définis un float: left; et un width: 50% sur tes <li> de premier niveau : et voilà !

Par la suite si tu veux plutôt telle liste en haut à droite, ou en bas à gauche, tu n'auras plus qu'à intervertir tes <li>.

Est-ce que ça correspond à ce que tu voulais ?

bonjour
alors pour le problème de <br/>, c'est surement du au passage code/design de dreamweaver cs 6 que j'ai a l'essai actuellement, j'ai du faire un retour à la ligne dans la vue design sans le vouloir. je ne le connais pas bien, sa me change profondément de mon TextMate, mais je me suis dit qu'il ne fallait pas mourir idiot et tout essayer.

j'ai un peu dégrossi ta réponse, effectivement j'ai bien compris le problème de sémantique. Après tout chaque <ul class="ssentree"> correspond à un <li> de premier niveau. c'est bien ça ?

j'ai également planché sur l'ensemble, et je ne veux au final plus avoir cette image à cette endroit, mais plus tôt en haut de ma présentation.

ensuite je voudrai 3 colonnes pour les parties 3 métiers, 3 plate-formes, etc...

tu peux voir le résultat en ligne sur http://www.3jmusic.fr/test/

j'ai cependant un problème,
pourquoi lorsque j'applique un display: list-item à mon .ssentree li mes sous-listes ne se mette pas l'une en dessous de l'autre ?

autre question, pourquoi mes 3 colonnes ne se répartissent pas sur la largeur total de ma page.

je te remercie de te pencher sur mon problème.

a bientôt

Pour la sémantique, c'est bien ça.

Concernant ton css, en réalité ton display:list-item n'est pas appliqué car c'est les instructions sur #entree li qui sont prioritaires - et pour mémoire il s'agit de float:left et width: 30% . Pour ce problème, écrit plutôt #entree > li, et ça devrait résoudre ton souci en ne ciblant que les li directement enfant du ul#entree.

Et en réalité, c'est le seul obstacle restant.

La question de la largeur totale, c'est parce qu'elles sont contenues dans ton article.content auquel tu as appliqué une largeur de 860px. Mais à mon avis, c'est très bien comme ça !

d'accord donc je peux utiliser également des opérateurs pour définir des priorités. parfait, je ne connais que le "+" que j'ai découvert par hasard je t'avouerai.

je ne me suis jamais acheté de livre sur css, j'ai toujours appris sur le tas, content de découvrir encore des choses, qui sont au final basique !

cela fonctionne parfaitement, merci beaucoup.

dans l'idée j'aurai bien voulu centrer mes colonnes par rapport au texte/image précédent, mais sans utiliser un padding-left à moins qu'il y est quelque chose de plus propre ?

Non, les paddings et les marges risquent d'être ta meilleure solution pour ça

Tu peux trouver pas mal d'articles, astuces et explications sur Alsacréations - classées par difficulté.

Bonne continuation !

bonjour,

en regardant ta page, je vois un premier probleme du au flottant, ton premier li se cale contre l'image et ta 3eme liste passe en dessous des deux premiere.
Manque un clear sur l'un des parents des li de premier niveau.
Ensuite pour le centrage , un text-align:center sur le parent et un text-align:left sur les li numéroté devrait se rapproché de la mise en forme voulu.

Pour les :before des listes , tu peut les ratrapper avec un text-indent négatif sur le li parent.

Enfin pour centrer l'ensemble, on peut donner une largeur a #entree ou #entree > li en pixel.

Voila un exemple ou je choisis inline-block pour le parent ul , text-align:center pour #columnMetier et width sur li + text-indent negatif.

#entree ul {
	margin-bottom: 25px;
display:inline-block;}
#columnMetier {text-align:center;/* centrage de #entree et de ses textes */}
#entree {
width:auto;/* pas de largeur, li s'en chargera */
display:inline-block;/* inclus l'effet de clear:both;*/
}

#entree > li {
	list-style-type: none;
	text-transform: uppercase;
	float: left;
text-indent:-30px;/* on rattrape les :before des listes enfants pour se recentrer sur le texte uniquement */
width:200px;/* width + padding = environ 1/3 de largeur de l'article */
padding:0 0 0 60px;/* decollent les textes des listes du bord gauche*/
	

}
#entree li[float="left"] + li {
	float:none;
}

.ssentree li {
 	font: 15px 'trebuchet MS', 'lucida sans';
	font-style: italic;
	text-transform: lowercase;
    list-style-type: none;
	display: list-item;
    counter-increment: item; 
    margin-bottom: 10px;
	height: 16px;
text-align:left;/* annulation des centrages de textes */
text-indent:0;/* garanti  contre l'annulation de l'indentation négative du parent (FF, ...autres ? )*/
}

.ssentree li:before {
	content: counter(item); 
    padding: 0 10px 3px;
	margin-left: 20px;
    margin-right: 8px;
    vertical-align: top;
    background: #999999;
    -moz-border-radius: 60px;
    border-radius: 60px;
    font-weight: bold;
    font-size: 0.8em;
    color: white;
}

Voilou l'idée

Il y a bien sur d'autre approche avec width ou display:table pour #entree en marge automatique , column-count aussi bien sur.
pour Text-align je ne vois pas trop d'autres soluces.
text-indent ou marge négative pour #entree > li
...

Cordialement
++

Bonsoir à tous,
je vous remercie bien je viens de me repencher sur mon problème et tout est réglé.

merci de votre réactivité,
et je vais profiter pour aider à mon tour à chaque fois que j'aurai la possibilité

a bientôt