Discussion :

[alex830001]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[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

[c_s_s]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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

[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.