display:inline menu horizontal

**gregreg** · 05/10/2009, 01h23

bonsoir

je galere pour acquerir la validation W3C
ce qui me pose pb c un menu horizontal et la fonction display que je voudrais utiliser en inline mais qd je le fais mes boutons menus ne sont pas de la meme taille dans firefox et si je passe en inline-block, IE me fait un menu vertical

je donne mon code css ainsi que le html au cas ou une ame genereuse se pencherait sur le probleme

(c'est un peu long ok mais c vierge, ca pourra servir a qui en veut

)

la fonction se trouve ds "#navbar 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
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
#page {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:780px;
	min-height:612px;
	border-width:1px;
	}
 
#header {
	margin:0;
	padding:0;
	width:780px;
	height:93px;
	}
 
#navbar {
	margin-bottom:2px;
	text-decoration:none;
	width:780px;
	float:left;
	height:24px;
	float:left;
	}
 
#navbar a:link, a:visited, a:active {
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:caption;
	}
 
#navbar a:hover{
	color:black;
	text-align:center;
	}
 
#navbar ul {
	margin:0;
	padding:0;
	width:780px;
	list-style-type:none;
	}
 
#navbar li {
	display:inline;
	width:100px;
	height:auto;
	border-width:3px;
	border-style:outset;
	border-color:#ffff99;
	background-color:#67E198;
	}
 
#content {
	margin:0;
	width:780px;
	height:475px;
	min-height:475px;
	display:block;
	clear:left;
	}
 
#footer {
	display:block;
	margin:0;
	width:780px;
	height:20px;
	float:left;
	background-color:#bbbbbb;
	color:white;
	}
 
#header1 {
	margin:0;
	width:125px;
	height:93px;
	float:left;
	}
 
#header2 {
	margin:0;
	width:530px;
	height:93px;
	float:left;
	font-family:caption;
	font-weight:bold;
	font-size:36px;
	color:white;
	Background-color:#67E198;
	}
 
#header2 a:link, a:visited, a:active {
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:caption;
	}
 
#header2 a:hover{
	color:black;
	text-align:center;
	}
 
#header3 {
	margin:0;
	width:125px;
	height:93px;
	float:right;
	}
 
#coll {
	margin-bottom:5px;
	width:130px;
	height:470px;
	min-height:470px;
	float:left;
	Background-color:#67E198;
	}
 
#contentmilieu {
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:0px;
	width:510px;
	height:470px;
	min-height:470px;
	float:left;
	Background-color:#67E198;
	}
 
#contentcolcadre {
	margin:5px;
	background-color:white;
	border-width:1px;
	border-color:black;
	border-style:solid;
	}
 
#contentmilieucadre {
	width:500px;
	margin:5px;
	background-color:white;
	border-width:1px;
	border-color:black;
	border-style:solid;
	}
 
#titrepage {
	width:500px;
	margin:0;
	font-size:20px;
	}
 
#coll a:link, a:visited, a:active {
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:caption;
	}
 
#coll a:hover{
	color:black;
	text-align:center;
	}
 
#coll ul {
	margin:5px;
	padding:0;
	width:115px;
	}
 
#coll li {
	display:block;
	margin:0;
	width:110px;
	height:auto;
	border-width:3px;
	border-style:outset;
	border-color:#ffff99;
	}

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
	<TITLE></TITLE>
<link rel="stylesheet" type="text/css" href="css.css">
</HEAD>
<BODY>
<center>
<div id="page">
	<div id="header">
		<div id="header1"><img src="entete1.jpg"></div>
 
		<div id="header2"><A href="index.html">TITRE</A></div>
		<div id="header3"><img src="entete2.jpg"></div>
	</div>
	<div id="navbar">
		<ul>
		<li><A href="index.html">Accueil</A></li>
		<li><A href="index.html">Accueil</A></li>
		<li><A href="index.html">Accueil</A></li>
		<li><A href="index.html">Accueil</A></li>
		</ul>
	</div>
	<div id="content">
		<div id="coll">
		<ul>
		<li><A href="index.html">Accueil</A></li>
		<li><A href="index.html">Accueil</A></li>
		<li><A href="index.html">Accueil</A></li>
		<li><A href="index.html">Accueil</A></li>
		</ul>
			<div id="contentcolcadre">texte</div>
		</div>
		<div id="contentmilieu">
			<div id="contentmilieucadre"> texte</div>
			<div id="contentmilieucadre">
 texte</div>
		</div>
		<div id="coll">	
			<div id="contentcolcadre">texte</div>
		</div>
	</div>
 
	<div id="footer">copyright</div>
</div>
</center>
</body>

**sebhm** · 05/10/2009, 10h00

Bonjour,

je galere pour acquerir la validation W3C

si tu veux cette validation, il faut ecrire les balises en minuscule et fermer le <html>

je voudrais utiliser en inline mais qd je le fais mes boutons menus ne sont pas de la meme taille dans firefox

c'est normal, car ils sont justement inline, donc pas de width possible (c'est IE qui fait n'importe quoi, comme d'hab

)

tu devrais t'en sortir sans le inline, avec un truc du genre

Code :

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

1
2
display: block;
float: left;

**gregreg** · 05/10/2009, 10h25

merci pour les elements de reponse sebhm

pour le W3C je m'occupe du css tout d'abord mais je prends note de tes remarques (surtout pour la casse, la balise html c juste un mauvais copier/coller)

g essaye avec le display:block et le float left mais le centrage est decale

**sebhm** · 05/10/2009, 12h50

il faudrait je pense que tu donnes au div 'navbar' une taille qui contiennent uniquement ta liste.
Tes <li> font 100px + 3px de bordure de chaque coté => navbar.width : 424px

et comme navbar se centre (bon j'espere que c'est le cas chez toi, j'ai fait pas mal de modif dans ton code avant d'en arriver là...), ca doit être OK.
Par contre, je ne sais pas à quoi sert le float:left pour navbar (en double en +)

pleins d'exemple utiles ici

**Erwan31** · 05/10/2009, 14h03

Attention ta déclaration de doctype fait basculer les navigateurs graphiques en mode de rendu Quirks car elle est incomplète (faire une recherche pour les détails).
Tu devrais trouver des déclaration complète dans la FAQ.

Envoyé par sebhm

tu devrais t'en sortir sans le inline, avec un truc du genre

Code :

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

1
2
display: block;
float: left;

Le display:block est inutile, le flottement converti l'élément en boîte de bloc
de manière transparente.

**Macmillenium** · 05/10/2009, 14h44

Envoyé par sebhm

si tu veux cette validation, il faut ecrire les balises en minuscule et fermer le <html>

HTML autorise les balises, attributs et valeurs d'attributs en majuscule.

**sebhm** · 05/10/2009, 15h17

je crois toujours que tout le monde va faire du XHTML, strict de surcroit ...

un jour... j'aurai raison

**gregreg** · 05/10/2009, 18h22

il faudrait je pense que tu donnes au div 'navbar' une taille qui contiennent uniquement ta liste.
Tes <li> font 100px + 3px de bordure de chaque coté => navbar.width : 424px

g essaye avec 424px : ok pour firefox mais pas pour IE, tjs un decalage
IE ne semble pas prendre en compte les border-width : avec 400px c nickel .. mais que sous IE parce que sous firefox y a plus assez de place

par contre c le doctype qui a resolu le pb
merci a tous pour votre aide

j'aurai bien mis resolu ds le sujet mais je peux plus l'editer dsl

**sebhm** · 05/10/2009, 20h18

( Pour 'Résolu', y'a un bouton en bas du POST )

En effet, le Doctype va t'aider, il va notamment faire que IE va se comporter comme Firefox pour les tailles des boites (voir quirk mode)

display:inline menu horizontal [CSS 2.1]

CSS

Vue hybride

Discussions similaires

Partager

Partager