[Résolu]Domptage de puces ...

Bonjour a tous ,
Voila actuellement jai une petit soucis avec une liste a puce , je m'explique j'ai donc une liste de type :

     <div class="Groupe1">
	<ul>
    		<li class="type"><a href="#">lien1</a></li>
    		<li><a href="#">lien2</a></li>
		<li><a href="#">lien3</a></li>
		<li><a href="#">lien4</a></li>
		<li class="type"><a href="#">lien1</a></li>
		<li><a href="#">lien2</a></li>
	</ul>
	</div><div class="Groupe2">
	<ul>
    		<li class="type"><a href="#">lien1</a></li>
    		<li><a href="#">lien2</a></li>
		<li><a href="#">lien3</a></li>
	</ul>

Et j'aurais besoin de styler cette liste en colones (4) pour que cela s'integre mieu a ma page, j'essaie avec des position:relative ou fixed mais ca ne m'avance pas quelle est selon vous la meilleure proprieté pour faire cela??
merci d'avance de vos reponses
Modifié par thedarkshaman (01 Aug 2006 - 11:35)

Je capte pas ce que tu veux. Tu veux mettre 4 colonnes qui contiennent quoi ?
Car, je compte 2 groupes. A moins que tu es 2 autres groupes, c'est ca ?

Salut,

Je n'ai également pas très bien compris ce que tu souhaites réaliser. Souhaites tu réaliser 4 colonnes qui contiennent 4 liens chacune? Ou bien comme le dis norky, tes 4 colonnes sont les Groupe1, 2 ... .
Je pense qu'il nous faudrait un peu plus de précision pour t'aider .

En tout cas tu peux toujours essayer d'utiliser la propriété float à appliquer sur tes colonnes.

j'éspère que cela t'aidera, et n'hésite pas à nous en dire plus .
Modifié par ymhotepa (11 Jul 2006 - 15:21)

merci de vos réponses je vais essayer d'eclaircir tout ca ,
j'ai donc une liste de lien pour une forme d'annuaire, dans des balises ul li groupées par des div et je souhaiterai au lieu d'une liste tout en longueur de placer mes groupes dans des colones afin d'ameliorer la lisibilité,au depard je pensais utiliser uin tableau mais bon c'est pas accessible et je n'aime pas trop ca donc je cherche une methode pour le faire en css ..

Donc, tu veux 4 div en colonnes ? c'est ca ?
C'est pas écrit comment faut faire ca dans la FAQ ALSA ??
Cherche sur le site, il me semble que tu as tout ce qu'il faut pour y arriver.

EDIt : apparement, j'ai pas trouvé sur ALSA
voici un lien qui devrai t'aider :
http://www.alistapart.com/articles/multicolumnlists/

Merci des tes info cela ma beaucoup aider
++

Salut a tous ,
j'ai donc finis par mettre en place la methode que tu m'as connseiller en la modifiant un peu je suis arrivé au résultat voulu , encore un fois merci beaucoup !
Maintenant mon probleme est que le résultat n'est pas su tout le meme sous ie , il s'affiche tres bien sous firefox :
http://thedarkshaman.free.fr/css/firefox_rules.png

pose de gros probleme d'affichage sous ie :
http://thedarkshaman.free.fr/css/ie_sucks.png

je pense qu'il doit y avoir un lien avec la propiété float mais je n'arriva pas resoudre le probleme .
Je met un peu de code :
- xhtml :

<div class="wrapper">
<ol>
<li class="pays"><a href="#">algérie</a></li><br />
<li class="ville"><a href="#">Alger</a></li>
<li class="pays"><a href="#">ARGENTINE</a></li><br />
<li class="ville"><a href="">Buenos-Aires</a></li>
<li class="pays"><a href="">AUSTRALIE</a></li><br />
<li class="ville"><a href="#l">Adelaide</a></li>
<li class="ville"><a href="#l">Melbourne</a></li>
<li class="ville"><a href="#">Perth</a></li>
<li class="ville"><a href="#">Sydney</a></li>
<li class="pays"><a href="#">AUTRICHE</a></li><br />
<li class="ville"><a href="#">Innsbruck</a></li>
<li class="ville"><a href="#">Vienne</a></li>
</ol>
</div>

- css :

div.wrapper{margin-bottom:1em;}
ol{width:40em;list-style:none;}
ol li{float: left;color:#666666;font-size:10px;width:15em;padding: 10px 0 0 5px;}
ol li.pays{text-transform: capitalize;clear:left;margin-top: 2em;color:#4f6e2b;font-size:12px;float:left;width:15em;padding:10px 15px 0 16px;background:url(../imgs/moddatearrow.gif) 0 14px no-repeat}
ol li.ville{margin-left: 1em;width:auto;float: left;}
br{clear:left;}

Voila donc si vous pouvez m'aider ou m'indiquer un lien ca le ferais .
Merci d'avance et vive ALSACREATIONS
Modifié par thedarkshaman (26 Jul 2006 - 11:20)

Personne pour me filer un petit coup de pouce ???

Bonjour thedarkshaman

Je vais essayer... Perso, j'aurais fait autrement

Parce que ta liste n'est pas très logique là... Si je comprend bien, tu listes, dans la même liste des pays et leurs villes... Tu pourrais peut-être obtenir un meilleur résultat en affichant les pays dans un balise "Hn" et les ville dans une liste, ce qui pourrait donner :

<hn>Pays1</hn>
<ul>
<li>Ville1</li>
<li>Ville2</li>
<li>Ville3</li>
<li>Ville4</li>
</ul>

<hn>Pays2</hn>
<ul>
<li>Ville1</li>
<li>Ville2</li>
<li>Ville3</li>
<li>Ville4</li>
</ul>

Merci de ta répose dominique je connaissais pas cette balise je vais l'essayer de suite ...
Au niveau de ma structure j'avais choisi cette solution sur le conseil de nORKY , et aussi car je dois bien évidement generer toute cette liste de manière dynamique et que ce code css me permettais de rajouter un ou des element en liste sans toucher ni xhtml ni css ...
yaurais pas moyen de modifier juste le css et de conserver la structure xhtml ou celle ci n'est vraiment pas intéressante ??
++
Modifié par thedarkshaman (26 Jul 2006 - 14:18)

Sinon c'est pas possible de "forcer" le float par ce qu'en fait il y a que ca qui plante sous ie ..
Modifié par thedarkshaman (26 Jul 2006 - 16:51)

Je suis surpris que tu ne connaisses pas cette balise... Pour être sûr qu'on parle bien de la même chose, il s'agît des balise de titre : h1 à h6... hn est utilisé quand on ne connaît pas la valeur...

Ben ! Je ne suis pas certain que ce soit un problème de float, mais ce qui me gêne le plus c'est l'ordonnancement de tes données, il ne me paraît pas très logique.

Il n'y a pas de problème à utiliser le code que je te propose dans une page dynamique, je viens juste de réaliser un plan de site conséquent sous spip en utilisant ce modèle et je n'ai aucun soucis d'affichage sur les navigateurs testés
Modifié par dominique (26 Jul 2006 - 18:24)

Salut dominique merci de tes conseils/réponses ,
alors je viens de terminer mon nouveau script dynamique , et je respecte la structure que tu conseillée, ca passe très bien merci beaucoup .
Bien éevidement ie mùe joue encore des tours , mais ce ne sont plus les mêmes je vous montre :
sous firefox :
http://thedarkshaman.free.fr/css/firefoxer.png

sous ie :
http://thedarkshaman.free.fr/css/ie_shame.png

Bon en fait j'ai remarquer qu'un certain nombre de propriétés css ne s'éxécutent pas sous ie , par exemple text-transform: capitalize; , ensuite le placement et l'
interlignage , même la taille des caracteres n'est pas la même j'avoue ne pas trop comprendre (j'utilise bien la même feuille de style que sous firefox ).
Voici le code css associé :

div.wrapper{margin-bottom:1em;}/* (toute la liste hn+li est dans ce div */
ol{width:40em;list-style:none;}
ol li{float: left;color:#666666;font-size:10px;width:15em;padding: 10px 0 0 5px;}
hn.pays{text-transform: capitalize;clear:left;margin-top: 2em;margin-left: 2.5em;color:#4f6e2b;font-size:12px;float:left;width:15em;padding:10px 15px 0 16px;background:url(../imgs/moddatearrow.gif) 0 14px no-repeat}
ol li.ville{text-transform: capitalize;margin-left: 0em;width:auto;float: left;}
ol li a{color:#4f6e2b;font-weight:bold}
ol li.pays a{color:#4F6E2B;font-weight:bold}
ol li.ville a{color:black;font-weight:bold}
br{clear:left;}/* stop the float */

je remet un petit bout de la structure xhtml pour etre sur :

<div class="wrapper"><ol>
</ol><hn class="pays"><a href="#">algerie</a></hn><ol><br>
<li class="ville"><a href="#">alger</a></li>
</ol><hn class="pays"><a href="#">argentine</a></hn><ol><br>
<li class="ville"><a href="#">buenos-aires</a></li>
</ol><hn class="pays"><a href="#">australie</a></hn><ol><br>
<li class="ville"><a href="#">adelaide</a></li>
<li class="ville"><a href="#">melbourne</a></li>
<li class="ville"><a href="#">perth</a></li>
<li class="ville"><a href="#">sydney</a></li>
</div>

voila si vous avez des idées/conseils n'hésitez pas
Modifié par thedarkshaman (28 Jul 2006 - 12:26)

Il me semble que pour ce que tu veux faire, tu pourrais aussi bien enlever les br, et remplacer les 'float: left'; par des 'display: block;'.
Aprés quelque réajustage de marges cela devrait fonctionner sous IE.
Pour les float j'ai déja eu des problémes aussi, ils ont un comportement vraiment aléatoire sous IE.

Tu devrais aussi remplacer les balises <hn> qui n'existent pas en html par une balise au choix entre <h1>, <h2>, <h3> ... comme te l'as dit Dominique.

Merci encore de vos réponses
ca se met en place et avec vos conseil j'approche bien du but,
maintenant j'ai un soucis avec les noms de pays sous ie je n'arrive pas a l'aligner avec la liste de ville en dessous, j'essaye donc d'appliquer une marge ou un padding spécial a ie avec le hack du _ , mais apparement cela ne suffit pas .
Sinon ma propriété capitalize ne semble pas fonctionner sous ie est - ce que cela vous est deja arrivé aussi?
je vous met le code css associé :

ol{width:40em;list-style:none;}
ol li{display: block;color:#666666;font-size:10px;width:15em;padding: 10px 0 0 5px;margin: 0 0 0 0;}
h4.pays{_margin-left: 15px;margin-left: 2.5em;text-transform: capitalize;clear:left;margin-top: 2em;color:#4f6e2b;font-size:12px;float:left;width:15em;padding:10px 15px 0 16px;background:url(../imgs/moddatearrow.gif) 0 14px no-repeat}
ol li.ville{text-transform: capitalize;;margin-left: 0em;color:#666666;font-size:10px;width:auto;float: left;}
ol li a{color:#4f6e2b;font-weight:bold}
ol li.pays a{color:#4F6E2B;font-weight:bold}
ol li.ville a{color:black;font-weight:bold}
br{clear:left;}

++
Modifié par thedarkshaman (31 Jul 2006 - 11:53)

Voila je viens de trouver la solution pour le style je la met donc ici :

div.wrapper{margin-bottom:1em;}/* separate the list from subsequent markup */
ol{width:40em;list-style:none;}
ol li{text-transform: capitalize;display: block;color:#666666;font-size:10px;width:15em;padding: 10px 0 0 5px;margin: 0;}
h4.pays{text-transform: capitalize;margin: 0 0 0 30px;padding: 70px 15px 0 16px;clear:left;color:#4f6e2b;font-size:12px;width:15em;background:url(../imgs/moddatearrow.gif) 0px 73px no-repeat;}
ol li.ville{font-size:10px;width:auto;float: left;}
ol li a{color:#4f6e2b;font-weight:bold}
ol li.pays a{}
ol li.ville a{color:black;}
br{clear:left;margin: 0;padding: 0;}

Voila si vous avez des comments ou si ca peut vous servir
++
Modifié par thedarkshaman (31 Jul 2006 - 18:44)