28221 sujets

CSS et mise en forme, CSS3

[Résolu] Liste numéroté de question d'une page d'aide

Bonjour,

Vous coderiez comment cela ?

upload/418-piaide.jpg
Le jpg est pas bon, normalement les numéros de questions se suivent.

Mes problèmes :
Comment gérér le suivi de na numérotation entre les deux blocs sachant que j'ai 2 ol li en float. Est ce possible ?

En suite, pour numéroter les réponses ? à l'arrache ou c'est faisable en css ? je sais que cela marche sur certains navigateurs mais pas tous.

bref, si vous avez le temps de me faire des propositions sur comment coder cela corectement, ce serait génial !


Et bon dimanche !
Modifié par juliofromlille (13 Feb 2005 - 14:35)
j'ai fait un essai pour les colonne. En plaçant un <div> tout les X éléments de liste avec un float left on obtient l'effet voulu. Mais ce n'est pas validé, les list ne pouvant contenir que des <li> et les les <li> devant avoir pour parent une list <ul> ou <ol> et pas un <div>.

Le float retire aussi les listes du flux courant. Il faudra donc chipoter pour qu''un cadre les englobe.

http://www.mentalwarp.com/~moob/tmp/alsa/liste.htm


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>liste en colonne</title>
<style type="text/css">
<!--
ol {
	background: red;
	padding: 20px;
	list-style-type:decimal} /*bizarre, sans ceci IE6 considère qu'il s'agit d'une liste à puce... */
ol div {
	float:left;
	background: green;
	margin-left: 30px}
ol li {
	background: blue;
	margin: 2px}
-->
</style>
</head>

<body>
<ol>
<div>
<li>BONJOUR</li>
<li>BONJOUR</li>

<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
</div>

<div>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
<li>BONJOUR</li>
</div>
</ol>
</body>
ouai merci.. en fait je pense pas que je puisse garder la numérotation. Je vais tricher un peu.

Je viens aussi de teste par mal de trucs qui merdouille aussi...

Merci Brice !
En CSS2.0, avec :

div {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counter(item,decimal-leading-zero) ". ";
counter-increment: item;
}

<div>
<ol>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</div>


Mais Opera est à peu près le seul à savoir le faire. IE numérotera les deux listes séparément, Firefox n'affichera aucune numérotation avec ce code, etc.
Merci Denis. C'est bien ce qu'il me semblait aussi.

Bon et bien passons le sémantiquement correct et faisons du chartgraphiquement correct. Smiley rolleyes
si tu utilises du php pour afficher tes questions à partir d'une base MySQL tu peux aussi utiliser des puces images avec une génération des listes par boucle for mais bonjour la charge serveur à ce moment là!
En l'occurence cette page est statique, elle n'évoluera pas de beaucoup.

Je vais donc garder la numérotation.

Merci !
Ca fera pas avancer le smilblick par rapport à ce que tu veux exactement, mais pourquoi ne pas afficher les <li> en width: 50% et float: left ;
Ca te fera les 2 colones, mais pas dans le même ordre... mais tout dépend de ce que tu veux bien sûr.

Si ta page est statique, le mieux c'est de faire la numérotation à la main, la numérotation CSS étant peu implémentée.
Dans ce cas si tes questions sont rangée par catégorie utilise une balise <hx> pour chaque groupe de liste afin de garder une cohérence dans ta charte graphique Smiley smile 
<div id="questions"> 
          <ol> 
            <li>&gt; <a href="#">001. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;1</a></li> 
            <li>&gt; <a href="#">002. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;2</a></li> 
            <li>&gt; <a href="#">003. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;3</a></li> 
            <li>&gt; <a href="#">004. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;4</a></li> 
            <li>&gt; <a href="#">005. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;5</a></li> 
          </ol> 
          <ol> 
            <li>&gt; <a href="#">006. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;6</a></li> 
            <li>&gt; <a href="#">007. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;7</a></li> 
            <li>&gt; <a href="#">008. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;8</a></li> 
            <li>&gt; <a href="#">009. &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;9</a></li> 
          </ol> 
        </div> 
        <br class="spacer"/> 
        <div class="box_aide"> 
          <h2 name="01"><span class="numero">001.</span> &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;1</h2> 
          <p> Texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse <br /> 
            texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse <br /> 
            texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse.</p> 
        </div> 
        <div class="box_aide"> 
          <div><a href="#menu">Haut de page</a></div> 
          <h2 name="02"><span class="numero">002.</span> &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;2</h2> 
          <p> Texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse <br /> 
            texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse <br /> 
            texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse.</p> 
        </div> 
        <div class="box_aide"> 
          <div><a href="#menu">Haut de page</a></div> 
          <h2><span class="numero">003.</span> &eacute;nonc&eacute; de la rubrique d&rsquo;aide n&deg;3</h2> 
          <p> Texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse <br /> 
            texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse <br /> 
            texte de la r&eacute;ponse texte de la r&eacute;ponse texte de la r&eacute;ponse.</p> 
        </div>



C'est pas ultra propre mais cela passe..
Modifié par juliofromlille (13 Feb 2005 - 14:47)
Sujet clos
Aller à