Menu arrondi en extensible. IE / FF

**Sword'** · 01/11/2006, 12h22

Bonjour a tous.

Je suis en train de coder un site extensible avec des arrondis mais je n'arrive pas du tout sur le menu.

Cela fait plusieurs heures que je me bats avec et sans résultats.

Voici le résultat: Voir Ici
Je le trouve très bizarre sous IE comme sous FF

Voici mes codes.

XHTML:

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
<!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>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
   </head>
   <body>
 
   	<!-- ***** La bannière ***** -->
	<div id="banniere">
 
	</div>
 
	<!-- ***** La speed_barre ***** -->	 
	<div id="speed_barre">
 
	     <ul>
		    <li> <a href="#">Accueil </a></li>
			<li> <a href="#">Forum </a></li>
			<li> <a href="#">Chat' </a></li>
			<li> <a href="#">Livre d'or </a></li>
			<li> <a href="#">L'équipe </a></li>
			<li> <a href="#">Nous contacter </a></li>
			<li> <a href="#">S'inscrire </a></li>
			<li> <a href="#">Se connecter </a></li>
	     </ul>
 
	</div>
 
 
 
<div id="menu">
 
         <div class="haut_gauche_menu">
		 </div>
 
		<div class="haut_menu">
		   <h3> Tutoriels </h3>
		 </div>
 
		 <div class="haut_droite_menu">
         </div>
 
 
		<div class="contenu_menu">
		   <ul>
		      <li> <a href="#">Tuto n°1 </a></li>
			  <li> <a href="#">Tuto n°2 </a></li>
			  <li> <a href="#">Tuto n°3 </a></li>
			  <li> <a href="#">Tuto n°4 </a></li>
		   </ul>
		</div>
 
		<div class="bas_gauche_menu">
		</div>
 
		<div class="bas_menu">
		</div>
 
		<div class="bas_droite_menu">
		</div>
</div>
 
 
 
<p> <br/> </p>
 
    </body>
	</html>

CSS:

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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
/* La bannière */
#banniere
{
	height:88px;
	width:579px;
 
	background-image:url("logo.png");
 
	margin:auto;
}
 
/* La speed barre */
#speed_barre
{
	margin-left:19%;
	margin-top:3%;
	margin-bottom: 5%;
}
 
#speed_barre li
{
	display:inline;
 
	padding:1px;
}
 
#speed_barre ul
{
	list-style-type:none;
}
 
#speed_barre a
{
	height:100px;
	width:auto;
 
	background-color:#E2E2E2;
	color:navy;
 
	padding-left:4px;
	padding-right:4px;
	padding-top:8px;
	padding-bottom:8px;
 
	text-decoration:none;
	font-weight:700;
	font-size:15px;
}
 
#speed_barre a:hover
{
	height:auto;
	width:auto;
 
	background-color:#C4CDD9;
	color: #FFA500;
 
	text-decoration:none;
	font-weight:700;
	font-size:15px;
}
 
 
/* ************************ MENU ************************************** **/
.haut_gauche_menu
{
   height: 21px;
   width: 26px;
 
   background-image: url("image/menu_01.gif");
 
   float: left; /* Pour bien mettre l'image a gauche */
}
 
.haut_droite_menu
{
   float: left;
   height: 21px;
   width: 22px;
 
   background-image: url("image/menu_05.gif");
}
 
.haut_menu
{
  float: left;
  margin-left: 0px; /* A modifier en fonction des marges */
 
  height: 21px;
  width: 13%;
 
  background-image: url("image/menu_03.gif");
}
 
 
/* Contenu menu */
.contenu_menu
{
	height:auto;
	width:16.5% !important;
	width:16.7%;
 
	background-color:#E2E2E2;
 
	margin-left: 0.4%;
	margin-top:1.9%;
	margin-right:0%;	
}
 
/* Bas menu */
 
.bas_gauche_menu
{
   height: 16px;
   width: 19px;
 
   background-image: url("image/bas_menu_02.gif");
 
   float: left; /* Pour bien mettre l'image a gauche */
   margin-left: 1px;
}
 
.bas_droite_menu
{
   float: left;
   height: 16px;
   width: 22px;
 
   background-image: url("image/bas_menu_06.gif");
}
 
.bas_menu
{
  float: left;
  margin-left: 0px; /* A modifier en fonction des marges */
 
  height: 16px;
  width: 13%;
 
   background-image: url("image/bas_menu_04.gif");
}
 
 
#menu ul
{
   margin: 0px;
   padding: 0px;
 
   list-style-type: none;
}
 
#menu li
{
   text-align: center;
}
 
#menu a
{
	background-color:#E2E2E2;
	color:navy;
 
	text-decoration :none;
	font-weight: 700;
 
	display: block;
	width: 100%;
}
 
#menu a:hover
{
	background-color:#C4CDD9;
	color: #FFA500;
}
 
#menu
{
  margin-left: 2%;
  float: left;
}
 
 
h3
{
  margin: 0px;
  color: white;
 
  text-align: center;
  font-size: 16px;
 
  padding-top: 1px;
}

Merci d'avance pour votre aide car je sèche.

Cordialement.

. : Sword' : .

**jmjmjm** · 01/11/2006, 20h44

En gros ce que tu veux faire c'est ce que j'ai fait sur ce site : http://www.judo-beaugency.com/2/

si c'est bien ca repond moi et je t'aiderais ou te passerais les sources pour que tu regardes !!

**jmjmjm** · 01/11/2006, 20h46

Tiens je suis passer sur mon site car je pense que c'est efectivement ce que tu cherche :

CSS :

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
/***************************************************/
/*                   APERCU PHOTO                  */
/***************************************************/
#CadreApercu {
	width:130px;
	margin-left:15px;
	background:url("../Images/PetiteResolution/Haut.gif") left top no-repeat;
	padding-top:6px;
	margin-top:15px;
}
 
#CadreApercuB {
	background:url("../Images/PetiteResolution/Bas.gif") left bottom no-repeat;
	padding-bottom:7px;
}
 
#CadreApercu h1 {
	padding:0px;
	margin:0px;
	text-align:center;
	font:bold 12px Arial, Helvetica, sans-serif;
	line-height:17px;
	background-color:#FC0;
}
 
#ApercuImage {
	padding:7px 5px 0px 5px;
	text-align:center;
	background-color:#ffeda6;
 
}

et XHTML 1.0 STRICT

Code :

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

1
2
3
4
5
6
<div id="CadreApercu">
	<div id="CadreApercuB"> 
		<h1>Apercu Photos</h1>
		<div id="ApercuImage"><img src="Images/dojo ext1_p.jpg"  width="115" alt="Apercu Photos" /></div>
	</div>
</div>

ET voila j'espere t'avoir aidé !!

**Sword'** · 01/11/2006, 21h11

Effectivement c'est un menu comme ceci que j'essaie de faire mais je n'arrive pas a comprendre ton code car dans la logique des choses, si l'on veut faire en extensible, il faut créer un div pour chaque coins ( 4 ), un pour le milieu des coins ( 2 ) et un autre ou il y aura le contenu ( 1 ) en tout sa feras 7 et la tu n'en a que 2 !!!

La tu ne fait pas un menu extensible mais seulement le corps je crois.

**Sword'** · 01/11/2006, 21h44

Bon désolé j'ai réussi a résoudre mon problème tout seul.

Mais par contre il y a toujours un problème... la hauteur des images est différentes sous IE et FF.

Résultat a cette adresse
Même avec les !important; et en changant la valeur des height, cela ne fait rien.

XHTML:

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
<div id="menu">
 
         <div class="haut_gauche_menu">
		 </div>
 
		<div class="haut_menu">
		   <h3> Tutoriels </h3>
		 </div>
 
		 <div class="haut_droite_menu">
         </div>
 
 
		<div class="contenu_menu">
		   <ul>
		      <li> <a href="#">Tuto n°1 </a></li>
			  <li> <a href="#">Tuto n°2 </a></li>
			  <li> <a href="#">Tuto n°3 </a></li>
			  <li> <a href="#">Tuto n°4 </a></li>
		   </ul>
		</div>
 
		<div class="bas_gauche_menu">
		</div>
        <div class="bas_menu">
        </div>		
		<div class="bas_droite_menu">
		</div>
</div>

CSS:

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
.bas_gauche_menu
{
   height: 17px;
   width: 19px;
 
   background-image: url("image/bas_menu_02.gif");
 
   float: left; /* Pour bien mettre l'image a gauche */
   margin-left: 1px;
   margin-bottom: 5px;
}
 
.bas_droite_menu
{
   float: left;
   height: 15px;
   width: 18px;
 
   background-image: url("image/bas_menu_06.gif");
}
 
.bas_menu
{
  float: left;
  margin-left: 0px; /* A modifier en fonction des marges */
 
  height: 17px;
  width: 13.5%;
 
  background-image: url("image/bas_menu_04.gif");
}

**Candygirl** · 02/11/2006, 10h22

Hello,

Il me semble que tu te compliques beaucoup la vie. Un code du genre devrait suffire si j'ai bien compris ce que tu souhaites, pour peu que tu retouches tes images de coins en les coupants à raz le gris:

Code :

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

1
2
3
4
5
6
7
8
9
<div id="menu">
  <h3><span>Tutoriels</span></h3>
  <ul>
    <li> <a href="#">Tuto n°1 </a></li>
    <li> <a href="#">Tuto n°2 </a></li>
    <li> <a href="#">Tuto n°3 </a></li>
    <li> <a href="#">Tuto n°4 </a></li>
  </ul>
</div>

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
#menu {
  width:15%;
  background:#E2E2E2 url(image/bas_menu_06.gif) no-repeat bottom right;
  padding:0;
}
 
#menu h3 {
  background:#C0C0C0 url(image/menu_01.gif) no-repeat top left;
  padding:0; margin:0;
  text-align:center;
}
 
#menu h3 span {
  display:block;
  padding:2px 20px;
  background:url(image/menu_05.gif) no-repeat top right;
}
 
#menu ul {
  background:url(image/bas_menu_02.gif) no-repeat bottom left;
  padding: 0 0 15px 0;
}

EDIT:
oups, J'ai fait une petit erreur, je pnese; le padding-bottom est à appliquer au ul et pas au #menu; je corrige.

EDIT2:
2 autres erreurs de corrigées; un positionnement à right pour le background du span et virer la couleur de background du ul.

Menu arrondi en extensible. IE / FF

CSS

Vue hybride

Discussions similaires

Partager

Partager