CSS pour menu en plusieurs colonnes de 5 liens

Version imprimable

Bonjour,

J'ai un menu en colonne dont le code dans la feuille de style est le suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#liste_forum li{padding-left:22px; margin-bottom:0.3em; background-color:transparent; background-repeat:no-repeat; background-position:left 1px; width:200px;}
#liste_forum li a{font-weight:normal; text-decoration:none; font-size:1.5em; list-style-type:none;}
#liste_forum li a:hover{text-decoration:underline;}
 
/* Puces par matière de la liste des forums */
#liste_forum li#puce_eco{background-image:url(images/liste_puce_eco.gif);}
#liste_forum li#puce_histoire_geo{background-image:url(images/liste_puce_histoire_geo.gif);}
#liste_forum li#puce_francais{background-image:url(images/liste_puce_francais.gif);}
#liste_forum li#puce_langues{background-image:url(images/liste_puce_langues.gif);clear:both;}
#liste_forum li#puce_philo{background-image:url(images/liste_puce_philo.gif);}
#liste_forum li#puce_maths{background-image:url(images/liste_puce_maths.gif);}
#liste_forum li#puce_info{background-image:url(images/liste_puce_info.gif);clear:both;}
#liste_forum li#puce_physiques{background-image:url(images/liste_puce_physiques.gif);}
#liste_forum li#puce_svt{background-image:url(images/liste_puce_svt.gif);}
#liste_forum li#puce_expose{background-image:url(images/liste_puce_expose.gif);clear:both;}
#liste_forum li#puce_divers{background-image:url(images/liste_puce_divers.gif);}
#liste_forum li#puce_autre{background-image:url(images/liste_puce_autre.gif);}

Je voudrais que les liens se présentent automatiquement en colonne de 5 éléments.
c'est à dire si j'ai par exemple 14 boutons dans le menus alors à l'affichage il apparait en ligne une colonne de 5, une colonne de 5 et une de 4.

Je ne sais pas si cela est possible directement dans les réglages de la CSS. Si oui pouvait vous me dire comment m'y prendre?

merci pour votre aide.

11/12/2008, 22h34
c_s_s

Bonjour,

Si tu sais combien de colonnes tu auras, alors il y a moyen de faire quelque chose.
Si le nombre de colonnes est variable, alors je ne vois pas de solution en CSS2.

Ce sera possible en CSS3 avec le Multi-column layout.
12/12/2008, 17h59
alex830001

bonjour,

merci pour ta réponse. je connais le nombre de colonne (2) je pense que je vais essayé de faire simple et de juste placer mes liens dans des blocs div.

J'ai essayé de faire deux bloc div avec un float left mais lorsque je met un float dans le deuxieme bloc div mon footer monte par dessus le menu...

Si quelqu'un peut jeter un coup d'oeil: la page est celle çi:

http://www.solveurs.com/index2.php

merci

Comme tes éléments de liste (<li>) ont une largeur fixe de 222px (200 +22), tu peux leur attribuer une propriété flottante et mettre ta liste non ordonnée (<ul>) dans un conteneur ayant une largeur fixe de 444px.

Ainsi, les éléments se positionneront les uns à côté des autres, mais comme il n'y aura de la place que pour deux éléments sur une ligne, ils se mettront automatiquement à la ligne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
#bloc_liste {
	width:444px;
}
#liste_forum li {
	float:left; 
	padding-left:22px; 
	margin-bottom:0.3em; 
	background-color:transparent; 
	background-repeat:no-repeat; 
	background-position:left 1px; 
	width:200px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="bloc_liste">
	<ul>
		<li id="puce_eco"><a title="" href="viewforum.php?f=4">Economie - Finance</a></li>
		<li id="puce_eco"><a title="" href="viewforum.php?f=4">Marketing</a></li>
		<li id="puce_histoire_geo"><a title="" href="viewforum.php?f=10">Histoire-Géo</a></li>
		<li id="puce_francais"><a title="" href="viewforum.php?f=7">Français - Philo</a></li>
		<li id="puce_francais"><a title="" href="viewforum.php?f=7">Droit</a></li>
		<li id="puce_langues"><a title="" href="viewforum.php?f=9">Langues</a></li>
		<li id="puce_philo"><a title="" href="viewforum.php?f=8">Philosophie</a></li>
		<li id="puce_maths"><a title="" href="viewforum.php?f=5">Mathématiques</a></li>
		<li id="puce_info"><a title="" href="viewforum.php?f=6">Informatique</a></li>
		<li id="puce_physiques"><a title="" href="viewforum.php?f=11">Physique-Chimie</a></li>
		<li id="puce_svt"><a title="" href="viewforum.php?f=12">SVT</a></li>
		<li id="puce_expose"><a title="" href="viewforum.php?f=17">Exposé - Rapports</a></li>
		<li id="puce_divers"><a title="" href="viewforum.php?f=18">Divers</a></li>
	 </ul>
</div>

;)

12/12/2008, 18h56
alex830001

je viens d'appliquer ta solution mais le menu tiens en une seule colonne. idem si j'augmente la largeur du bloc à 500 px
12/12/2008, 20h35
c_s_s

Tu n'as pas mis de propriété float:left sur tes listes...

Au passage, tu devrais mettre tes styles dans une feuille de style externe plutôt que de tout écrire directement dans le HTML, ce serait beaucoup plus pratique.

j'ai touché le code entre temps.

alors voila ce que j'ai actuellement

Dans la CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#bloc_liste {
width:444px;
}
 
#liste_forum{list-style:none; list-style-image:none; list-style-type:none; list-style-position:outside;}
#liste_forum li {
	float:left; 
	padding-left:22px; 
	margin-bottom:0.3em; 
	background-color:transparent; 
	background-repeat:no-repeat; 
	background-position:left 1px; 
	width:200px;
}
 
#liste_forum li a{font-weight:normal; text-decoration:none; font-size:1.0em; list-style-type:none;}
#liste_forum li a:hover{text-decoration:underline;}
/* Puces par matière de la liste des forums */
#liste_forum li#puce_eco{background-image:url(images/liste_puce_eco.gif);}
#liste_forum li#puce_histoire_geo{background-image:url(images/liste_puce_histoire_geo.gif);}
#liste_forum li#puce_francais{background-image:url(images/liste_puce_francais.gif);}
#liste_forum li#puce_langues{background-image:url(images/liste_puce_langues.gif);clear:both;}
#liste_forum li#puce_philo{background-image:url(images/liste_puce_philo.gif);}
#liste_forum li#puce_maths{background-image:url(images/liste_puce_maths.gif);}
#liste_forum li#puce_info{background-image:url(images/liste_puce_info.gif);clear:both;}
#liste_forum li#puce_physiques{background-image:url(images/liste_puce_physiques.gif);}
#liste_forum li#puce_svt{background-image:url(images/liste_puce_svt.gif);}
#liste_forum li#puce_expose{background-image:url(images/liste_puce_expose.gif);clear:both;}
#liste_forum li#puce_divers{background-image:url(images/liste_puce_divers.gif);}
#liste_forum li#puce_autre{background-image:url(images/liste_puce_autre.gif);}

Dans la html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="bloc_liste">
	<ul>
		<li id="puce_eco"><a title="" href="viewforum.php?f=4">Economie - Finance</a></li>
		<li id="puce_eco"><a title="" href="viewforum.php?f=4">Marketing</a></li>
		<li id="puce_histoire_geo"><a title="" href="viewforum.php?f=10">Histoire-Géo</a></li>
		<li id="puce_francais"><a title="" href="viewforum.php?f=7">Français - Philo</a></li>
		<li id="puce_francais"><a title="" href="viewforum.php?f=7">Droit</a></li>
		<li id="puce_langues"><a title="" href="viewforum.php?f=9">Langues</a></li>
		<li id="puce_philo"><a title="" href="viewforum.php?f=8">Philosophie</a></li>
		<li id="puce_maths"><a title="" href="viewforum.php?f=5">Mathématiques</a></li>
		<li id="puce_info"><a title="" href="viewforum.php?f=6">Informatique</a></li>
		<li id="puce_physiques"><a title="" href="viewforum.php?f=11">Physique-Chimie</a></li>
		<li id="puce_svt"><a title="" href="viewforum.php?f=12">SVT</a></li>
		<li id="puce_expose"><a title="" href="viewforum.php?f=17">Exposé - Rapports</a></li>
		<li id="puce_divers"><a title="" href="viewforum.php?f=18">Divers</a></li>
	 </ul>
</div>

Citation:

Tu n'as pas mis de propriété float:left sur tes listes...

Dois je remplacer les listes comme ceçi?

Code:

<li id="puce_divers" style float: "left"><a title="" href="viewforum.php?f=18">Divers</a></li>

Il y a quelque chose qui ne colle pas.

Je ne vois pas de #liste_forum dans le code HTML de ta page ?

Du coup, il vaudrait mieux faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#bloc_liste {
width:444px;
}
 
#bloc_liste li {
	float:left; 
	padding-left:22px; 
	margin-bottom:0.3em; 
	background-color:transparent; 
	background-repeat:no-repeat; 
	background-position:left 1px; 
	width:200px;
}
 
#bloc_liste li a{font-weight:normal; text-decoration:none; font-size:1.0em; list-style-type:none;}
#bloc_liste li a:hover{text-decoration:underline;}
/* Puces par matière de la liste des forums */
#bloc_liste li#puce_eco{background-image:url(images/liste_puce_eco.gif);}
#bloc_liste li#puce_histoire_geo{background-image:url(images/liste_puce_histoire_geo.gif);}
#bloc_liste li#puce_francais{background-image:url(images/liste_puce_francais.gif);}
#bloc_liste li#puce_langues{background-image:url(images/liste_puce_langues.gif);clear:both;}
#bloc_liste li#puce_philo{background-image:url(images/liste_puce_philo.gif);}
#bloc_liste li#puce_maths{background-image:url(images/liste_puce_maths.gif);}
#bloc_liste li#puce_info{background-image:url(images/liste_puce_info.gif);clear:both;}
#bloc_liste li#puce_physiques{background-image:url(images/liste_puce_physiques.gif);}
#bloc_liste li#puce_svt{background-image:url(images/liste_puce_svt.gif);}
#bloc_liste li#puce_expose{background-image:url(images/liste_puce_expose.gif);clear:both;}
#bloc_liste li#puce_divers{background-image:url(images/liste_puce_divers.gif);}
#bloc_liste li#puce_autre{background-image:url(images/liste_puce_autre.gif);}

12/12/2008, 21h56
alex830001

ah oui ok je comprends comment ça fonctionne maintenant.

Je viens de faire la modif, maintenant il va bien chercher les images mais le menu toujours sur une colonne et sous FF c'est la cata le menu part dans le footer ( à moins que ce soit l'inverse)
12/12/2008, 23h29
c_s_s

Le bloc qui contient ta liste fait 444px de large mais tu as une marge de 1.5em sur la balise <ul>.

Au final, tu as : 222 + 222 +1.5em ... ce qui est plus grand que 444px... donc il n'y a pas assez de place pour mettre 2 <li> côte à côte.

Mets la marge gauche (1.5em) sur ton #bloc_liste plutôt que sur le <ul>.

Pour le reste, ajoute un overflow:hidden et un clear:both sur #content, ça devrait aller mieux.
13/12/2008, 10h35
alex830001

je ne vois pas à quel endroit il est indiqué une marge de 1,5em sur la balise ul.

J'ai donc agrandi le #bloc_liste pour que ça puisse rentrer.

J'ai ensuite ajouté un overflow:hidden et un margin:0 sur #content comme tu l'as dit.

le résultat est bon dans IE. C'est mieux dans FF mais c'est pas encore ça, le footer est maintenant à sa place mais la deuxieme colonne du menu as des espaces irreguliers et le #content est décalé sur la droite.

Je ne desespere pas, ça va finir par fonctionner ^^ merci beaucoup pour ton aide.
13/12/2008, 12h19
c_s_s
Citation:

Envoyé par alex830001

je ne vois pas à quel endroit il est indiqué une marge de 1,5em sur la balise ul.

stylesheet.css (line 399)
Code:

1 2 3 .postbody li, ol, ul { margin:0pt 0pt 0pt 1.5em; }
Citation:

Envoyé par alex830001

J'ai ensuite ajouté un overflow:hidden et un margin:0 sur #content comme tu l'as dit.

Il faut également ajouter un clear:both
13/12/2008, 13h21
alex830001

ça fonctionne! le #content s'est repositionné correctement sur FF.

Un grand merci, je suis vraiment content que ça fonctionne. :mrgreen: