Pages html css plus rien ne marche

**totodu038** · 16/05/2009, 00h11

Bonjour,

Voila j'ai un gros soucie, sa fait 3 jours je galère à créer une page toute simple qui ne veut plus marcher.

Je m'explique, en faite j'aimerais créer une pages html avec en haut au centre la banniere, dessous les onglets, de chaque coté de la banniere une image (donc une image à droite et une image à gauche),et tout en bas de la page une animation qui tourne tout le temps.
Le soucie c'est que rien ne veux marcher.
Je m'explique quand je tape le code sous dreamweaver, je regarde le rendu sur la fenetre création, tout est au centre parfait nickel, quand je l'ouvre sur internet rien ne va plus les deux images de fond son complètement décalé.
J'ai chercher sur les forums, sur google, trouvais pas mal de reponse, mais rien n'a resolu mon probleme. Donc voila je viens demander de l'aide parce que la j'arrive plus a rien, sa fait 3 jours je cherche et rien ne marche.

Merci d'avance...

Mon code:

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans titre</title> 
<style type="text/css"> 
<!-- 
.Style1 {font-family: Georgia, "Times New Roman", Times, serif} 
.Backgroundbouton {color:green; text-align:left; background: } 
#FondG{ position: absolute; left: 190px; padding-top:0px; margin-top:Opx; padding-right:0px; height:1000px; width: 100px; margin-right:0px; border-style:hidden; top: 34px;} 
#FondD{ position: absolute; left: 1100px; padding-top:0px; margin-top:Opx; padding-right:0px; height:1000px; width: 100px; margin-right:0px; border-style:hidden; top: 34px;} 
--> 
</style> 
</head> 
 
 
<body> 
<span id="FondG"> 
<table width="100px" height="1000px" border=0 align=> 
<tr> 
<td colspan=0><img src="images/fond_g.png" width="100" height="1000" /></td> 
</tr> 
</table></span></id> 
<span id="FondD"> 
<table width="100px" height="1000px" border=0 align=> 
<tr> 
<td colspan=0><img src="images/fond_d.png" width="100" height="1000" /></td> 
</tr> 
</table></span></id> 
<table width="800px" border=0 align=center> 
<tr> 
<td colspan=0><img src="images/banniere.jpg" height="140" width="800" border=0 align=center></td> 
</tr> 
</table> 
<table width="800px" border=0 align=center > 
<tr> 
<td height="10" align=center> <div class="Style1 Backgroundbouton "><a href= "liens"> 
Le festival</div></td> 
 
<td ><div class="Style1"> 
Festival IN</div> 
</td> 
<td align=center> 
<div class="Style1"> 
Festival OFF</div> 
</td> 
<td align=center> 
<div class="Style1"> 
Tremplin découverte</div> 
</td> 
<td align=center> 
<div class="Style1"> 
Billeterie</div> 
</td> 
<td align=center> 
<div class="Style1"> 
Contact</div> 
</td> 
<td align=center> 
<div class="Style1"> 
Presse</div> 
</td> 
<td align=center> 
<div class="Style1"> 
L'année</div> 
</td> <td align=center> 
<div class="Style1"> 
Archive</div> 
</td> 
</table> 
</body> 
</html>

**12monkeys** · 16/05/2009, 00h48

Bonsoir

Ton code a 44 erreurs à la validation, il faudrait les résoudre avant de penser à aller plus loin :

Un élément span est de type en ligne, il ne peut pas contenir un élément de type block comme table...

Tu fermes des balises </id> sans même les ouvrir, mais ce n'est pas nécessaire : vu qu'une telle balise n'existe pas, donc à supprimer...

Une valeur d'un attribut doit être entre guillemets :

Code :

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

border=0 align=>

à remplacer :

Code :

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

border="0">

Une mise en page en tableaux c'est pas adapté... Comment faire une mise en page avec CSS : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**totodu038** · 16/05/2009, 02h15

Merci,

Oui, effectivement je me suis aperçu grace au document en lien que j'avais fait n'importe quoi.

J'ai recréer ma page, mais j'ai encore des petit soucie.

1- J'arrive pas à inserer mes bando de maniere a ce qu'il soit a droite et gauche.

2- Je ne vois absolument pas comment centrer toute ma pages.

Dite moi si j'ai encore fais des erreur.

Voici mon code CSS :

code:

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
div {
	text-align:center;
	} 
div#bandeau {
	width:800px;
	height:120px;
	background-image:url(images/banniere.jpg);
	}
 
div#bandeau_gauche {
	float:left;
	width:100px;
	height:1000px;
	background-image:url(images/fond_g.png);
	}
div#bandeau_droite {
	float:left;
	width:100px;
	height:1000px;
	background-image:url(images/fond_d.png);
	}
 
ul#tabnav 
{
   font: bold 11px Georgia, Times New Roman, Times, serif;
   list-style-type: none;
   padding-bottom: 24px;
   margin: 0;
   float:left;
}					
 
ul#tabnav li 
{
   float: left;
   height: 21px;
   background-color: #C4CFFF;
   margin: 2px 2px 0 2px;
   border: 1px solid #3300CC;
}				
 
ul#tabnav li.active 
{
   border-bottom: 1px solid #fff;
   background-color: #fff;
}	
 
#tabnav a 
{
   float: left;
   display: block;
   color: #FF6600;
   text-decoration: none;
   padding: 4px;
}	
 
#tabnav a:hover 
{
   background: #fff;
}	
 
div#contenu {
	width:800px;
	height:900px;
	background-color:withe;
	clear:both;
	float:left; 
 
	}
div#piedpage {
	width:800px;
	height:90px;
	clear:both; 
 
	}

Voici mon code HTML:

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="feuille_style.css"> 
 
</head>
 
<body>
 
<div id="bandeau"></div>
<ul id="tabnav">
   <li class="active"><a href="#">Voiture</a></li>
   <li><a href="#">Vélo</a></li>
   <li><a href="#">Avion</a></li>
   <li><a href="#">Bateau</a></li>
  <li><a href="#">Pieds</a></li>
   <li><a href="#">Vélo</a></li>
   <li><a href="#">Avion</a></li>
   <li><a href="#">Bateau</a></li>
   <li><a href="#">Pieds</a></li>
</ul>
 
 
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div> 
 
</body>
</html>

Voila, merci d'avance

**12monkeys** · 16/05/2009, 13h29

Il reste une toute petite erreur :

Code html :

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

<link rel="stylesheet" type="text/css" href="feuille_style.css" />

Rajout du /

Pour le reste cela me parait meilleur. Mais dans ton exemple il manque les deux bandeaux gauche et droite.

Tout va dépendre de la configuration de tes images... Personnellement je centrerait le site et je mettrait les 2 bandeaux dans une image mise en arrière plan :

http://xhtml.developpez.com/faq/?pag...orizontalement

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
body {
  margin : 0px; 
  padding : 0px;
  text-align: center; /* pour résoudre le bug de centrage de IE */
  background-image: url(img1.jpg);
  background-repeat:repeat-y;
  background-position: top center;
}
 
#centrer {
  margin-left : auto;
  margin-right : auto;
  width : 800px;
  text-align : left;  /* pour résoudre le bug de centrage de IE */
}

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="feuille_style.css" /> 
</head>
 
<body>
 
<div id="centrer">
<div id="bandeau"></div>
<ul id="tabnav">
   <li class="active"><a href="#">Voiture</a></li>
   <li><a href="#">Vélo</a></li>
   <li><a href="#">Avion</a></li>
   <li><a href="#">Bateau</a></li>
  <li><a href="#">Pieds</a></li>
   <li><a href="#">Vélo</a></li>
   <li><a href="#">Avion</a></li>
   <li><a href="#">Bateau</a></li>
   <li><a href="#">Pieds</a></li>
</ul>
 
 
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div> 
</div>
 
</body>
</html>

**totodu038** · 17/05/2009, 00h00

Rolala, merci beaucoup de toute cette aide sa fait vrement plezir!!

Mais encore desolé, je vien de m'apercevoir que quand je rentre mes vrés titres dans les onglets, ils ce mettent sur deux voir même trois lignes. Or j'ai beau essayer de changer rajouter des width des heigth et tout ca, rien ne change.

J'ai aussi essayé de faire que le bandeau ou ce trouve mes onglet fasse 800px de large mais impossible à realiser, même avec le lien que tu m'a passé.

Et je vais faire comme tu m'a di mettre un fond cela sera beaucoup plus simple! (mais en css ou juste en html?lequel et le mieu??)

Désolé du dérangement vous allez croire que je cherche pas...

Merci d'avance

Mon code 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
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
 
div {
	text-align:center;
	} 
div#bandeau {
	width:800px;
	height:120px;
	background-image:url(images/banniere.jpg);
	}
 
ul#tabnav 
{
   font: bold 11px Georgia, Times New Roman, Times, serif;
   list-style-type: none;
   padding-bottom: 10px;
   margin: 0;
   float:left;
 
}					
 
ul#tabnav li 
{
   float: left;
   height: 20px;
   background-color: #C4CFFF;
   margin: 10px 10px 0 10px;
   border: 1px solid #3300CC;
   width:10px;
 
}				
 
ul#tabnav li.active 
{
   border-bottom: 1px solid #fff;
   background-color: #fff;
}	
 
#tabnav a 
{
   float: left;
   display: block;
   color: #FF6600;
   text-decoration: none;
   padding: 4px;
}	
 
#tabnav a:hover 
{
   background: #fff;
}	
 
div#contenu {
	width:800px;
	height:900px;
	background-color:withe;
	clear:both;
	float:left; 
 
	}
div#piedpage {
	width:800px;
	height:90px;
	clear:both; 
 
	}
 
body {
  margin : 0px; 
  padding : 0px;
  text-align: center; 
  background-image: url(img1.jpg);
  background-repeat:repeat-y;
  background-position: top center;
}
 
#centrer {
  margin-left : auto;
  margin-right : auto;
  width : 800px;
  text-align : left; 
}

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="feuille_style.css" /> 
</head>
 
<body>
 
<div id="centrer">
<div id="bandeau"></div>
<ul id="tabnav">
   <li class="active decalage"><a href="#">Le festival</a></li>
   <li><a href="#">Festival IN</a></li>
   <li><a href="#">Festival OFF</a></li>
   <li><a href="#">Tremplin découverte</a></li>
  <li><a href="#">Billetterie</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Presse</a></li>
   <li><a href="#">Le reste de l'année</a></li>
   <li><a href="#">Archive</a></li>
</ul>
 
 
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div> 
</div>
 
</body>
</html>