Petit bug sous firefox !

**Joe-La-Boule** · 16/01/2007, 20h55

Bonjour je poste car j'ai un petit probleme ici --> http://antony.developpez.com/ .
Il y a un bug SEULEMENT sous Firefox car sous ie ca marche impec'

!

Voila le code 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
 
<!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>Espace perso de Antony Coucke</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
   </head>
   <body>
 
	<center id="ban">
	</center>
 
		<ul id="menu">
		     <h4>Menu</h4>
			<li><a href="http://antony.developpez.com/index.php">Accueil</a></li>
			<li><a href="http://antony.developpez.com/tutoriels/blender/">Articles Blender</a></li>
			<li><a href="http://www.developpez.net/forums/member.php?u=107891">Profil</a></li>
			<li><a href="http://www.developpez.net/forums/private.php?do=newpm&u=107891">Me contacter</a></li>
		</ul>	
 
		<div id="contenu">
		 <h4>Bienvenue sur Antony.developpez.com</h4>
 
		 <p class="center">
			Page perso en construction...
		 </p>
 
		</div>
 
 
		<div id="foot">
		Copyright © 2000-2007 www.developpez.com
		</div>
 
   </body>
</html>

Code CSS :

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
#ban
{
width: 456px;
height: 275px;
background-image: url("images/ban.jpg");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
 
#menu
{
margin-top: 50px;
list-style-type: none;
float: left;
border: outset gray 2px;
text-align: left;
width: 10%;
background-color: #ddeeff;
margin-right: auto;
margin-bottom: 200px;
margin-left: auto;
}
 
#menu h4
{
background-color: white;
display: block;
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: verdana, "sans serif";
background-color: #f78c18;
}
 
#menu li
{
widht: 100%;
font-family: courier, "sans serif";
margin: 6px 0px 6px;
}
 
a
{
 
font-size: 12px;
text-decoration: none;
font-family: verdana, "sans serif";
}
 
a:link
{
	color: #22229C;
}
a:visited
{
	color: #22229C;
}
a:hover,a:active
{
	color: #FF4400;
}
 
 
 
 
#contenu
{
background-color: #ddeeff;
width: 85%;
border: outset gray 2px;
margin-left: auto;
margin-top: 50px;
margin-bottom: 200px;
margin-right: auto;
}
 
#contenu p
{
margin: 5px;
}
 
#contenu h4
{
background-color: white;
display: block;
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: verdana, "sans serif";
background-color: #f78c18;
}
 
 
 
 
#foot
{
background-color: #f78c18;
width: 100%;
margin-bottom: 0px;
margin-top: auto;
border: outset gray 2px;
margin-left: auto;
margin-right: auto;
color: white;
text-align: center;
font-family: verdana, "sans serif";
padding: 0px;
font-weight: bold;
}
 
 
 
 
.center
{
text-align: center;
}

Je poste également sur le forum css car je sais pas exactement d'ou vient le bug

!

merci !

otna

**TheBlue** · 16/01/2007, 21h24

Bonsoir.
J'ai constaté le problème moi aussi ! ça arrive de temps en temps, et quand je coince un problème comme le présent, je n'ai qu'utiliser ma IE Tab (c'est courante surtout pour des programmes en javaScript) Or pour le bug, j'en sais rien, et je veux savoir

Merci

**MasterOfChakhaL** · 16/01/2007, 22h24

Salut,

Tu devrais commencer par valider ton xhtml, puis ton css. http://web.developpez.com/faq/html/?...HTML_validator

Avec ton doctype, l'élément center n'existe pas. Tu n'as pas le droit de placer un élément h4 dans un élément ul.
Pour connaitre l'imbrication autorisée pour les différents éléments, tu peux te référer à l'outil de Giminik http://giminik.developpez.com/xhtml/

pour centrer ta bannière, tu peux faire ainsi:

Code html :

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

<h1>&nbsp;</h1>

Code css :

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

1
2
3
4
5
h1 {
  background: transparent url(images/ban.jpg) center top no-repeat;
  height: 275px;
  text-align: center;
}

Le text-align est là au cas où tu aurais envie de rajouter un peu de texte pour ton titre, c'est conseillé pour le référencement. (Rien ne t'empêche d'ajouter un padding-top pour que le texte ne s'écrive pas par dessus l'image).

**Joe-La-Boule** · 16/01/2007, 22h57

code 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
 
<!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>Espace perso de Antony Coucke</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
   </head>
   <body>
 
	<center id="ban">
	</center>
 
		<ul id="menu">
		   	<li class="titre">Menu</li>
			<li><a href="http://antony.developpez.com/index.php">Accueil</a></li>
			<li><a href="http://antony.developpez.com/tutoriels/blender/">Articles Blender</a></li>
			<li><a href="http://www.developpez.net/forums/member.php?u=107891">Profil</a></li>
			<li><a href="http://www.developpez.net/forums/private.php?do=newpm&u=107891">Me contacter</a></li>
		</ul>	
 
		<div id="contenu">
		 <span class="titre">Bienvenue sur Antony.developpez.com</span>
 
		 <p class="center">
			Page perso en construction...
		 </p>
 
		</div>
 
 
		<div id="foot">
		Copyright © 2000-2007 www.developpez.com
		</div>
 
   </body>
</html>

code 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
 
#ban
{
width: 456px;
height: 275px;
background-image: url("images/ban.jpg");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
 
#menu
{
margin-top: 50px;
list-style-type: none;
float: left;
border: outset gray 2px;
text-align: left;
width: 10%;
background-color: #ddeeff;
margin-right: auto;
margin-bottom: 200px;
margin-left: auto;
}
 
#menu .titre
{
background-color: white;
display: block;
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: verdana, "sans serif";
background-color: #f78c18;
}
 
#menu li
{
widht: 100%;
font-family: courier, "sans serif";
margin: 6px 0px 6px;
}
 
a
{
 
font-size: 12px;
text-decoration: none;
font-family: verdana, "sans serif";
}
 
a:link
{
	color: #22229C;
}
a:visited
{
	color: #22229C;
}
a:hover,a:active
{
	color: #FF4400;
}
 
 
 
 
#contenu
{
background-color: #ddeeff;
width: 85%;
border: outset gray 2px;
margin-left: auto;
margin-top: 50px;
margin-bottom: 200px;
margin-right: auto;
}
 
#contenu p
{
margin: 5px;
}
 
#contenu .titre
{
background-color: white;
display: block;
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: verdana, "sans serif";
background-color: #f78c18;
}
 
 
 
 
#foot
{
background-color: #f78c18;
width: 100%;
margin-bottom: 0px;
margin-top: auto;
border: outset gray 2px;
margin-left: auto;
margin-right: auto;
color: white;
text-align: center;
font-family: verdana, "sans serif";
padding: 0px;
font-weight: bold;
}
 
 
 
 
.center
{
text-align: center;
}

Tu pourrai me dire si c'est convenable car ca marche pas non plus pourtant je vois pas ou se situe le pb

! merci de vouloir maider

otna

**Joe-La-Boule** · 17/01/2007, 13h59

j'ai testé mais ca change rien

la jecomprend vraimment pas ce qui cloche sur firefox

**MasterOfChakhaL** · 17/01/2007, 14h53

salut,

Quand tu mets un float, ton élément n'est pas totalement retiré du flux. Le reste du flux normal est censé s'écouler autour. Je pense que firefox interpréte tes propriétés comme il faut. Sous Opéra aussi ta page a un rendu dans le même esprit (même si ce n'est pas tout a fait pareil).

peut-être pourrais-tu t'inspirer de la structure suivante.

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
<!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">
	<head>
		<title>
			Test a la YO-staiile
		</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<link rel="stylesheet" type="text/css" href="tonfichier.css" />
</head>
<body>
	<h1>Bienvenue sur mon site</h1>
	<div id="container">
		<div id="content">
			content: bla bla bla
		</div>
		<div id="menu">
			menu: bla bla bla
		</div>
 
	</div>
	<div id="footer">
		Bas de page: bla bla bla
	</div>
</body>
</html>

et le css:

Code css :

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
 
* {
	margin: 0;
	padding: 0;
}
 
#menu, #content, #container, #footer, h1 {
	border: 1px solid red;
}
 
 
#container {
	position: relative;
	background-color: #CFC;
}
 
#menu {
	position: absolute;
	top: 0;
	left:0;
	width: 10%;
 
}
 
#content {
	margin-left: 15%;
}
 
h1 {
	text-align: center;
	padding-top: 200px;
	background: transparent url(mon-image.gif) center top no-repeat;
}

J'ai été obligé d'ajouter un élément, ce qui au niveau sémantique ne se justifiait pas.
D'après mes test, ca marche a peu près comme tu veux (je crois).
Si ton contenu et forcément plus long que ton menu (ce qui est courant) tu ne devrais pas avoir à modifier le css.
Si il y a des erreurs ou si tu as besoin de précision... n'hésite pas

**Joe-La-Boule** · 17/01/2007, 15h10

Merci master

**Joe-La-Boule** · 17/01/2007, 20h18

j'ai enfin reglé un des deux bugs mais mes divs se placent les uns au dessus des autres

!
je sens que je vais jamais voir le bout !
aidez moi pleaze

**MasterOfChakhaL** · 17/01/2007, 20h41

il faudrait que tu mettes à jour la page pointée dans le lien de ton premier message ou alors que tu mettes ton code...

**Joe-La-Boule** · 17/01/2007, 20h46

Voila le lien est actualisé

!

code 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
 
#ban
{
width: 456px;
height: 275px;
background-image: url("images/ban.jpg");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
 
#menu
{
margin: 0;
padding: 0;
width: 10%;
float: left;
margin-bottom: 150px;
background-color: #ddeeff;
border: outset gray 2px;
}
 
#menu ul
{
list-style-type: none;
text-align: left;
padding: 0px;
margin: 0px;
}
 
#menu h4
{
background-color: white;
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: verdana, "sans serif";
background-color: #f78c18;
}
 
#menu li
{
padding: 0px;
font-family: courier, "sans serif";
margin: 6px 0px 6px;
}
 
a
{
font-size: 12px;
text-decoration: none;
font-family: verdana, "sans serif";
}
 
a:link
{
	color: #22229C;
}
a:visited
{
	color: #22229C;
}
a:hover,a:active
{
	color: #FF4400;
}
 
 
 
 
#contenu
{
margin: 0;
padding: 0;
background-color: #ddeeff;
width: 80%;
border: outset gray 2px;
}
 
 
#contenu h4
{
background-color: white;
display: block;
padding: 0px;
margin: 0px;
text-align: center;
color: white;
font-family: verdana, "sans serif";
background-color: #f78c18;
}
 
 
 
 
#foot
{
margin: 0;
background-color: #f78c18;
width: 100%;
margin-top: 50px;
border: outset gray 2px;
color: white;
text-align: center;
font-family: verdana, "sans serif";
padding: 0px;
font-weight: bold;
}

code HTML :

Code html :

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
 
<!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>Espace perso de Antony Coucke</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
   </head>
   <body>
 
	<div id="ban">
	&nbsp;
	</div>
 
		<div id="menu">
			<h4>Menu</h4>
		   <ul>
			<li><a href="http://antony.developpez.com/index.php">Accueil</a></li>
			<li><a href="http://antony.developpez.com/tutoriels/blender/">Articles Blender</a></li>
			<li><a href="http://www.developpez.net/forums/member.php?u=107891">Profil</a></li>
			<li><a href="http://www.developpez.net/forums/private.php?do=newpm&u=107891">Me contacter</a></li>
	           </ul>
		</div>	
 
		<div id="contenu">
		<h4>Bienvenue sur Antony.developpez.com</h4>
		<center>En construction</center>
 
		</div>
 
 
		<div id="foot">
		Copyright © 2000-2007 www.developpez.com
		</div>
 
   </body>
</html>