Modification du placement du menu par CSS

**dlamo** · 20/07/2007, 13h14

Bonjour j'utilise un menu déroulant mis en forme en CSS mais je n'arrive pas à le modifier pour qu'il réponde à ceci :
Le menu doit rester sur une seule ligne horizontale prenant les 3/4 gauche de la page (cela doit fonctionner en 800 ou en 1024 !!) uniquement sur IE 5.5 et 6 (hélas, pas de firefox...). (Pour info le dernier 1/4 sera utilisé par autre chose...)
Voici le css issu d'ici justement

mais adapté à mon besoin, que dois-je changer pour le positionner correctement, mes essais ne fonctionnent pas

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
* { /* ça veut dire quoi cette étoile ? */
margin:0px;
padding:0px;
}
 
/*moi je voudrais calé à gauche !!!! pas centré ! :( */
#centrer {
margin-left:0;
margin-right:auto;
width:980px;
} 
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
	position:relative;
	display:inline;
	float:right;
	width:150px;
	cursor:pointer;
	display:block;
	background:none;
	height:22px;
	color:white;
	background-color:#3366cc;
	background-image:url(../img/img_new/coin.png);
	background-repeat:no-repeat;
	font-variant: small-caps;
	text-align:center;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
text-align:left;
}
 
#menu ul li ul li a {
font-size:14px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
text-decoration:none;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
}
 
#smenu1 li a:hover {
background:#f8dce8;
}
 
#smenu1 li a {
color:white;
background-color:#df9dc4;
}
 
#smenu2 li a:hover {
background:#b4ad70;
}
 
#smenu2 li a {
color:white;
background-color:#a19a55;
}
 
#smenu3 li a:hover {
background:#f47e8f;
}
 
#smenu3 li a {
color:white;
background-color:#f16075;
}
 
#smenu4 li a:hover {
background:#8bb58b;
}
 
#smenu4 li a {
color:white;
background-color:#76a674;
}

voici le html (pardon !)

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="css/menu_der.css" type="text/css" />
	<script type="text/javascript" src="js/menu_der.js"></script>
</head>
<body>
<div id="centrer">
 <div id="menu">
	<ul>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Nos activités
			<ul id="smenu4">
				<li><a href="budget.php">Budget</a></li>
				<li><a href="camping.php">Camping</a></li>
				<li><a href="cerebral.php">Cérébral club</a></li>
				<li><a href="chasse.php">Chasse</a></li>
				<li><a href="cinema.php">Chèques cinéma</a></li>
				<li><a href="culture.php">Culture</a></li>
				<li><a href="dessins.php">Dessins de Noël</a></li>
				<li><a href="enfants.php">Enfants</a></li>
				<li><a href="fete_meres.php">Fête des mères</a></li>
				<li><a href="fin_annee.php">Fêtes fin d'année</a></li>
				<li><a href="participation.php">Part. financière</a></li>
				<li><a href="prets.php">Prêts</a></li>
				<li><a href="section_autonome.php">Section autonome</a></li>
				<li><a href="serrechevalier.php">Serre chevalier</a></li>
				<li><a href="socios.php">Socios</a></li>
				<li><a href="soirees.php">Soirées</a></li>
				<li><a href="sporting.php">Sporting club</a></li>
				<li><a href="vac_ete.php">Vacances d'été</a></li>
				<li><a href="vac_hiver.php">Vacances d'hiver</a></li>
				<li><a href="weekend">Week ends</a></li>
			</ul>
		</li>
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);">Les formulaires
			<ul id="smenu3">
				<li><a href="sports.php">Les sports</a></li>
				<li><a href="creche.php">La crêche</a></li>
				<li><a href="balneo.php">La balnéothérapie</a></li>
				<li><a href="#">Les enfants</a></li>
				<li><a href="#">Les prêts</a></li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);">Les offres
			<ul id="smenu2">
 
				<li><a href="partenaires.php">Nos partenaires</a></li>
				<li><a href="billetterie.php">La billetterie</a></li>
				<li><a href="annonces.php">Vos annonces</a></li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);">Découvrir le CE
			<ul id="smenu1">
				<li><a href="role.php">Le rôle du CE</a></li>
				<li><a href="specificites.php">Ses spécificités</a></li>
				<li><a href="elections.php">Les élections</a></li>
				<li><a href="seances.php">Séances plénières</a></li>
				<li><a href="equipe.php">Notre équipde</a></li>
			</ul>
		</li>
	</ul>	
</div>	
</div>	
<div align="left"></div>
</body>
</html>

Au secours !!! ....je suis perdu

Merci d'avance

**Damouille** · 20/07/2007, 13h50

Bah, tu nous as pas mis le html donc difficile de tester. Mais si tu rajoutes
display: inline;
sur le premier niveau ca s'affiche en ligne.

**dlamo** · 20/07/2007, 14h16

voilà j'ai rajouté le html pardon !

Le inline ne change rien, par contre j'ai trouvé ! c'est le float:right qui devait passer à float-left ... avec biensur les modif que ça implique dans l'ordre du menu.... mais au moins ça fonctionne

**Damouille** · 20/07/2007, 14h42

J'ai vidé le style de #centré et changé le float:right en left dans #menu ul li

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:black;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
#menu ul{
 
}
ul, li {
list-style-type:none;
background: #333;
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:left;
width:125px;
cursor:pointer;
display:block;
background:none;
height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
}
 
#smenu1 li a:hover {
background:#f8dce8;
}
 
#smenu1 li a {
color:white;
background-color:#df9dc4;
}
 
#smenu2 li a:hover {
background:#b4ad70;
}
 
#smenu2 li a {
color:white;
background-color:#a19a55;
}
 
#smenu3 li a:hover {
background:#f47e8f;
}
 
#smenu3 li a {
color:white;
background-color:#f16075;
}
 
#smenu4 li a:hover {
background:#8bb58b;
}
 
#smenu4 li a {
color:white;
background-color:#76a674;
}

Ca fait un menu qui s'aligne à gauche.

**dlamo** · 23/07/2007, 11h44

En effet, c'était facile ... Merci bcp

**Damouille** · 23/07/2007, 11h59

Sinon, pour tes remarques dans le css.

l'asterix *. C'est le selecteur universel. Il concerne toute les balises. Dans ce cas, il definit tous les padding et margin à 0, jusqu'a ce qu'il soit réécrit plus tard dans le css.

Et pour la div #centrer, c'est le margin: auto; qui centre. Il met les memes marges à droite et à gauche.

Modification du placement du menu par CSS

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager