[CSS] menu deroulant qui deplace le texte

**titor** · 05/02/2006, 15h50

Salut à tous j'ai réalisé un menu deroulant grace a un tuto sur http://developpez.com
Ensuite pour continuer ma page html, j'ecris du texte seulement, lorsque mon pointeur de souris passe sur le menu pour l'ouvrir, le texte se décale completement.
Auriez-vous une idée ?
Je joins mon code source
La page index.html

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
<html>
<head>
	<title>Index</title>
	<link rel="stylesheet" type="text/css" href="mon_style.css">
</head>
<body>
<img src="titre.png">
<ul id="menuDeroulant">
	<li><a href="#">Jonglage</a>
		<ul class="sousMenu">
			<li><a href="/jonglages/theorie.html">Un peu de théorie</a></li>
			<li><a href="/jonglages/balles.html">Les Balles</a></li>
			<li><a href="/jonglages/massues.html">Les Massues </a></li>
			<li><a href="/jonglages/cerceaux.html">Les cerceaux</a></li>
		</ul>
	</li>
	<li><a href="#">Diabolo</a>
		<ul class="sousMenu">
			<li><a href="/Diabolo/theorie.html">Un peu de théorie</a></li>
			<li><a href="/Diabolo/base.html">Les bases</a></li>
			<li><a href="/Diabolo/figures.html">Les figures</a></li>
		</ul>
	</li>
	<li><a href="/phorum">Forum</a>
	</li>
	<li><a href="#">Divers</a>
		<ul class="sousMenu">
			<li><a href="#">Videos</a></li>
			<li><a href="#">Script php</a></li>
			<li><a href="#">Programmes en cours</a></li>
		</ul>
	</li>
	<li><a href="mailto:titor76@free.fr">Contact</a>
	</li>
</ul>
<p><br><br>Hello et bienvenue a tous sur mon site. Vous apprendrez a jongler et a vous amuser, à vous concentrer, tout cela grâce à l'art qu'est le jonglage !!
Sur cette page je vous présente les différents menus et aussi ce qui va composer le site.</p>
 
<p><br>Tout d'abord, vous trouverez dans la section <font color="blue">Jonglages</font> des techniques et des méthodes pour apprendre a jongler avec les différents instruments de jonglages (balles, massues, foulards, cerceaux, etc). Ceci se fera à l'aide de vidéos et d'images explicatives. Vous pourrez télécharger
les vidéos dans la section divers.</p>
<p><br>Enfin, dans la section <font color="blue">Diabolo</font>, vous trouverez des vidéos où je vous explique comment démarrer et faire tourner votre diabolo, puis progressivement des figures vous seront expliquées, pour que vous puissiez pleinement profiter de votre diabolo.</p>
<p><br>Dans la section <font color="blue">Forum</font>, vous pourrez poser toutes vos questions, et dans la mesure du possible j'essaierai de vous répondre le plus vite possible.</p>
<p><br>Dans la section <font color="blue">Divers</font>, vous pourrez trouver du divers ;). Enfin plus sérieusement, vous trouverez des créations diverses de mon dernier mois de juillet, à savoir des montages vidéos sur différents thèmes tels que le clonage ou encore sur le thème de Star Wars.</p>
<p><br>Enfin le dernier lien que vous pouvez voir sur le côté est à utiliser si vous avez un problème au niveau du site web. Pour toute question sur le jonglage, prière d'utiliser le forum.</p>
</body></html>

Et la feuille de style

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
111
112
113
114
115
116
117
118
119
120
121
122
/* commentaire sur l'attribut body 
tout d'abord on met la taille du texte en 
-ARIAL et taille = 15px
-pas de marge ni de remplissage*/
body	
{
	font: 15px, arial;
	margin: 0;
	padding: 0;
}
/*notre menuDeroulant
Presence du signe # car c'est un ID
-taille 600px
-list-style-type => pas de puces et autres
-*/
#menuDeroulant
{
	width : 1024px;
	list-style-type : none;
	margin: 0px;
	margin-left : 120px;
	padding : 0;
	border : 0;
}
/*float => fait flotter les elements <li> et permet l'affichage horizontal ou utiliser display : inline*/
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}
/*Ce bloc va s'appliquer à la classe .sousMenu*/
#menuDeroulant .sousMenu
{
	list-style-type : none;
	margin : 0;
	padding : 0;
	border :0;
}
/*Ceci s'applique pour l'heritage des proprietes des elements li du menu*/
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
/*Celui ic va s'appliquer aux elements li du sousMenu*/
#menuDeroulant li
{
	float : left;
	width : 150px;
	margin : 0;
	padding : 0;
	border : 0;
}
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display : block;
	height : auto;
	color : #FFF;
	background : #4585EA;
	margin : 0;
	padding : 4px 8px;
	border-right : 1px solid #fff;
	text-decoration : none;
}
#menuDeroulant li a:hover { background-color: #4585EA; }
#menuDeroulant li a:active { background-color: red; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
	display : block;
	color : #FFF;
	margin : 0;
	padding : 0;
	text-decoration : none;
}
 
#menuDeroulant .sousMenu li a:hover
{
	background-color : red;
}
/*Permet d'obetnir desseparateurs entre les elements li des sous menus*/
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
/*ce qui permet d'afficher ou non le menu*/
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
 
/*Le Css pour le reste des balise autres que le menu*/
 
img/*Permet de mettre un petit espace entre le haut de la fenetre et l'image qui est le logo*/
{
	margin-top : 5px; 
 
}
 
p
{
	position : aboslute;
	margin: 0px;
	margin-left : 120px;
}

**Kerod** · 05/02/2006, 17h02

HUm j'ai juste modifié la position comme ceci :

Code :

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

#menuDeroulant li:hover > .sousMenu { display: block; position: absolute }

et vu que ca chevauche le texte il faut mettre un background-color pour eviter la transparence entre les li

d'où :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 background-color:#4585EA;
}

ps : Normal que ca fonctionne pas sous IE le hover ??

**AlphaYoDa** · 05/02/2006, 17h18

ps : Normal que ca fonctionne pas sous IE le hover ??

Sous ie, le hover ne marche que pour des liens (balise a), peut-être peux-tu entourer le tout d'un lien fictif.. ?

**titor** · 05/02/2006, 17h52

Merci a toi kerod, sa marche.
Pour ce qui est de IE j'ai lu sur le tuto que le menu ne semblait pas completement compatible avec IE car quand on passe la souris sur le menu sa ne s'affiche pas il faut cliquer dessus.
Encore merci Kerod comme sa je vais pouvoir continuer a developper mon site.

Merci
titor

[CSS] menu deroulant qui deplace le texte

CSS

Discussions similaires

Partager

Partager