Discussion :

[Mystic_Snake]

bonjour, je vous expose mon petit souci:
On m'a demandé de faire un petit site internet, et je suis confronté à un souci dont je ne connais pas la cause. J'ai décidé de faire 2 versions, une en design extensible, et l'autre en design fixe centré.
J'ai opté pour une barre de menu en HTML/CSS (en faisant des display bloc sur des listes) sans passer par d'autres langages (c'est un de mes impératifs), par contre, alors que tout marche dans le design extensible, avec le design fixe j'ai un problème:
Quand mon menu se déroule, j'ai un décalage de tout le texte qui se situe en dessous. Avez vous une idée d'où ça peut venir?
Le souci vient du positionnement relatif de ma barre de menu que j'ai du utiliser, puisque si je bidouille en mettant un positionnement absolu, j'ai pas ce souci. Bon, comme le design est centré, comprenez bien que je ne peux pas utiliser le positionnement absolu.

Savez-vous comment je peux faire tout rester en place dans le cadre d'en dessous?
Si vous avez besoin d'un bout de code, e veux bien le lacher mais je ne pense pas ça utile dans ce cas.

Merci d'avance.

[Erwan31]

Bon, comme le design est centré, comprenez bien que je ne peux pas utiliser le positionnement absolu.

Et pourquoi donc?

Savez-vous comment je peux faire tout rester en place dans le cadre d'en dessous?
Si vous avez besoin d'un bout de code, e veux bien le lacher mais je ne pense pas ça utile dans ce cas.

Si justement

[Mystic_Snake]

bah, dans mon cas, j'ai mis mon cadre en centré. Comment je peux tout bien aligner en permanence si je fais un positionnement absolu?


je mets le CSS et le 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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
body
{
  /* background-image: url("image mainpage/epices.jpg");*/
   width: 960px;
   background-color:#6e7b6f;
   padding-bottom:50px;
   margin: auto; /* Pour centrer */
   margin-top:0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
 
}
#menu_deroulant
{
background-repeat:no-repeat;
min-width:780px;
list-style-type:none;
margin-left:0;
padding-right:0;
border:0;
border:none;
position:absolute;
left:35px;
top:180px; 
}
 
#menu_deroulant li
{
float:left;
font-family:candles,"Australian Sunrise",Asimov, serif;
font-size:13px;
font-style:bold;
color:#F0F48B;
text-align:center;
width: 100px;
margin-right:2px;
padding:0;
border:none;
}
 
#menu_deroulant .sous_menu
{
list-style-type:none;
display:none;
margin:0;
padding:0;
border:none;
}
 
 
#menu_deroulant .sous_menu li
{
float:none;
color:#8C09F1;
width:100px;
margin-top:25px;
padding:0;
border:0;
}
 
#menu_deroulant li a:link, #menu_deroulant li a:visited
{
 display: block;
 height: 1%;
 color:#F0F48B;
 margin-bottom:3px;
 padding: 3px 8px;
 border-bottom: 0px;
 text-decoration: none;
 
 }
 
#menu_deroulant .sous_menu li a:link,#menu_deroulant .sous_menu li a:visited
{
 display: block;
 float:left;
color:#F0F48B;
 margin: 1px;
 width:75px;
 border-top: 0px;
 text-decoration: none;
  background-image:url("image mainpage/onglet_transparent.png");
}
 
#menu_deroulant .sous_menu li a:hover
{
 background-image: none;
 background: #F0F48B;
 color:#905E07;
   background-color:none;
}
 
#menu_deroulant li:hover> .sous_menu 
{ 
display: block; 
}
#menu
{
background-image:url("image mainpage/aaabis.png");
height:80px;
width:960px;
background-repeat:no-repeat; */
}
 
 
#corps
{
 
   border: 2px solid #CEA70B;
   -moz-border-radius : 8px; /* pour arrondir les coins des  cadres! */
   min-width:520px;/*largeur mini*/
   max-width:850px;/*latgeur maxi*/
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   background-color:#EA79C3; /* Une couleur de fond pour le corps */
}
 
 
#titre
{position:relative;
top:-10px;
left:-10px;
	color: rgb(116,255,122);
	font-size : 40px;
	text-decoration : underline;
	font-family : bobcat, "Kristen ITC", "Parry Hotter", serif;
} 
#message_accueil
{
	color: #d4a7ff;
	font-size : normal;
	width : 80%;
	border: thick ridge #d4a7ff;
	-moz-border-radius : 8px;
	padding : 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 100px;
	font-weight: bold;
	font-family : "Kristen ITC", "Parry Hotter", serif;
}
 
/* partie consacrée à l'en-tête=>balise */
#en_tete
{
background-image:url("image mainpage/banniere.png");
width:960px;
height:150px;
margin-bottom:0px;
}
 
/* partie consacrée au bas de page */
#pied_de_page
{
   -moz-border-radius : 8px;
   padding: 1px;
   text-align: center;
   color: white;
   background-color: #b0ffa7;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   font-weight: bold;
   font-style:italic;
   border: 2px solid black;
}

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>blabla</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="design_titre" href="mainpage_design.css"/>
   </head>
   <body>
 
	<h2 id="haut_de_page"></h2>
 
    <div id="en_tete">
 
    </div>
	<div id="menu"></div>
		<ul id="menu_deroulant">
			<li>
				<a href="#">Notre Société</a>
				<ul class="sous_menu">
					<li><a href="#">castor</a></li>
					<li><a href="#">aligator</a></li>
					<li><a href="#">musclor</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Distribution Automatique</a>
				<ul class="sous_menu">
					<li><a href="#">Boissons Chaudes</a></li>
					<li><a href="#">Boissons Froides</a></li>
					<li><a href="#">Produits Frais & Confiseries</a></li>
				</ul>
 
			</li>
			<li>
				<a href="#"><p></p>Fontaines</a>
			</li>
			<li>
				<a id="p_d" href="#">Petit Déjeuner</a>
				<ul class="sous_menu">
					<li><a href="#">Caféterie</a></li>
					<li><a href="#">Jus de Fruits</a></li>
				</ul>
 
			</li>
			<li>
				<a href="#">Service Café de Bureau</a>
			</li>
			<li>
				<a href="#">Nos références</a>
			</li>
			<li>
				<a href="#"><p></p>Contact</a>
			</li>	
		</ul>
 
<div id="corps">
 
   <div id="titre">Bienvenue sur le site de blabla</div>
<!-- 			
			<p id="message_accueil">Texte d'accueil
			</p>
 
			<p><a href="#haut_de_page" class="haut_de_page">Haut de page</a></p>
</div>
 
<div id="pied_de_page">
   <p>Site réalisé par Théo Cheng, All Rights Reserved! ThéoMachine®</p>
</div> -->
 
 </body>
 </html>

[Erwan31]

Tu n'as pas besoin de passer par un positionnement absolue pour ton menu, seulement pour des sous menus (pour pas que leur affichage interagisent avec les autres éléments du document).

[Mystic_Snake]

donc, je positionne juste les sous menus en absolu? ok, je vais essayer de suite!

merci

PS: mais c'est le même souci non?
Mes sous menu vont rester au même endroit, pas en cohérence avec le reste de la page si la taille de la fenetre varie non?

[Erwan31]

PS: mais c'est le même souci non?
Mes sous menu vont rester au même endroit, pas en cohérence avec le reste de la page si la taille de la fenetre varie non?

Si tu mets le conteneur des sous menu en position relative, le sous menu "absolue" se placera en fonction de cet item de menu et non de la zone d'affichage du navigateur.