tableau ou div?

**brotelle** · 11/04/2006, 14h06

Bonjour,

Je suis en train de faire un site et je suis une débutante alors j'aurais aimé l'avis de plusieurs expers

. C'est mieux de faire un site avec des div ou avec des tableaux?

**franculo_caoulene** · 11/04/2006, 14h18

Salut,

**10-nice** · 11/04/2006, 14h21

Pour faire de la mise en page l'utilisation des divs est la plus indiquée. Elles sont beaucoup plus maléable et fonctionnelles que les tableaux.

La restructuration d'un site ou la moindre modification avec une mise en page tableau signifie une perte de temps énorme et de grosses prises de têtes, alors qu'en div c'est beaucoup plus simple, on peut travailler chaque élément d'une page séparément.

**SIBELIUS** · 11/04/2006, 14h24

Envoyé par 10-nice

Pour faire de la mise en page l'utilisation des divs est la plus indiquée.

Pour ne pas tomber dans l'erreur de "remplacer les <td> par des <div>", ce qui est très stupide, rappelons qu'une mise en page de ne fait pas en <div> mais en employant les éléments selon leur fonction : <ul> pour les listes, <h*> pour les titres, <p> pour les paragraphes, etc.
Les <div> n'ont pour fonction que de regrouper des éléments, mais n'a pas de sens propre.

Il faut éviter de vouloir mettre du <div> partout.

**brotelle** · 11/04/2006, 14h29

Je pense bien que l'utilisation de tableaux est beaucoup plus lourd et prise de tête, je l'ai testé ce matin. Mais je voulais essayer les tableaux car j'ai un gros problème par rapport aux div car sous firefox les liens ne sont pas actifs!! alors qu'avec des tableaux ils le sont, je comprends pas...
Vous avez une idée?

Voici mon 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
<!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=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link href="styles_css/renault.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="bandeau">
  <img src="images/bandeau2.png" alt="clic!" width="800" height="160"></img>
 
 
<div class="menu">
	<ul id="tabnav">
		<li class="active"><a href="#">Accueil</a></li>
   		<li><a href="groupe.php">Le groupe</a></li>
   		<li><a href="entreprise.php">L'entreprise</a></li>
		<li><a href="services.php">Services</a></li>
  	 	<li><a href="occasion.php">Véhicules d'occasion</a></li>
   		<li><a href="neuf.php">Véhicules neufs</a></li>
		<li><a href="boutique.php">La boutique</a></li>
	</ul>
 
 
</div>
</div>
 
</body>
</html>

**franculo_caoulene** · 11/04/2006, 14h30

**10-nice** · 11/04/2006, 14h39

pas de pb chez moi, testé IE, FF et opéra... les liens fonctionnent.

**brotelle** · 11/04/2006, 14h45

Peux-tu essayer avec les styles css suivant:

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
 
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
 
.bandeau {
  position:absolute;
  top: 0;
  width: 800px;
  left:18%;
  height:100%;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;				
  border-left:1px solid #000099;
  border-right:1px solid #000099;
}
 
 
.menu {
  position:relative;
  display:inline-table;
  width: 800px;
  height:8%;
  margin-left:0px;
  margin-top:3px;
  margin-bottom: 0px;	
}
 
.site {
  position:relative;
  width: 800px;
  height:100%;
  margin-left:0px;
  margin-top:189px;
  margin-bottom: 0px;
}
 
.accueil {
  position:relative;
  width: 587px;
  height:100%;
  border-left:1px solid #000099;
  margin-left:212px;
  margin-top:189px;
  margin-bottom: 0px;
  background-image:url(../images/yello.gif);
  background-repeat:repeat;
  border-left-style: dotted;
	border-left-color: #000099;
	border-left-width: 1px;
	}
 
ul#tabnav {
 
   font: bold 11px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 24px;
   border-bottom: 1px solid #000099;
   margin: 0;
 
}
 
ul#tabnav li {
   color:#000066;
   float:right;
   height: 21px;
   background-color:#E6E600;
   margin: 2px 2px 0 2px;
   border: 1px solid #000099;
}
 
ul#tabnav li.active {
   border-bottom: 1px solid #fff;
   background-color: #fff;
}
 
#tabnav a {
   float:left;
   display: block;
   color:#0000CC;
   text-decoration: none;
   padding: 4px;
}
 
#tabnav a:hover {
   background: #fff;
}

J'aurais bien aimé t'envoyer l'image mais je sais pas comment on fait!!

**blueice** · 11/04/2006, 16h39

Edite ton avant-dernier message pour mettre des balises [code]

Ensuite, je viens de tester ton code HTML et CSS, il est valide et les menus fonctionnent normalement.

**brotelle** · 11/04/2006, 16h43

Chez moi ça ne marchait pas, du coup j'ai modifié pleins de choses et maintenant ça marche...

voilà mon nouveau 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
38
39
40
 
<!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=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link href="styles_css/renault.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div align="center" class="bande">
  <img src="images/bandeau2.png" alt="clic!" width="800" height="160"></img>
 
 
<div class="menu">
	<ul id="tabnav">
		<li class="active"><a href="#">Accueil</a></li>
   		<li><a href="groupe.php">Le groupe</a></li>
   		<li><a href="entreprise.php">L'entreprise</a></li>
		<li><a href="services.php">Services</a></li>
  	 	<li><a href="occasion.php">Véhicules d'occasion</a></li>
   		<li><a href="neuf.php">Véhicules neufs</a></li>
		<li><a href="boutique.php">La boutique</a></li>
	</ul>
 
 
<div class="accueil">
	<br /><h3>Bienvenue sur le site de RENAULT Cluses! </h3>
</div>
</div>
</div>
</body>
 
</body>
</html>

Et mon 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
 
/* CSS Site Renault */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
 
h1, h2, h4, h5 { 
font-family:Times, serifHelvetica, sans-serif;
}
 
h3{font-family:Times, serifHelvetica, sans-serif;border-bottom:1px solid;color:#990000;}
 
p{font-family:Times, serifHelvetica, sans-serif;color:#663333;font-size:13px;}
 
ul{font-size:13px;color:#660000;}
 
h1.centre {
text-align:center
}
 
 a {text-decoration: none;} 
 a:hover {TEXT-DECORATION: underline;}
 
 
.menu {
  position:relative;
  display:inline-table;
  width: 800px;
  height:8%;
  margin-left:0px;
  margin-top:3px;
  margin-bottom: 0px;	
}
 
.menu_entreprise {
  float:left;
  width: 200px;
  height:20%;
  margin-left:0px;
  margin-top:50px;
}
 
 
.adresse {
  float:left;
  width: 200px;
  height:10%;
  margin-left:0px;
  margin-top:20px;
}
 
.accueil {
  float:right;
  width: 587px;
  height:100%;
  margin-top:0px;
  /*margin-left:212px;*/
  background-image:url(../images/yello.gif);
  background-repeat:repeat;
  border-left-style: dotted;
  border-left-color: #000099;
  border-left-width: 1px;
}
 
.accueil2 {
  position:relative;
  width: 571px;
  height:100%;
  margin-left:15px;
  margin-top:10px;
  background-image:url(../images/yello.gif);
  background-repeat:repeat;
}
 
ul#tabnav {
 
   font: bold 11px verdana, arial, sans-serif;
   list-style-type: none;
   padding-bottom: 24px;
   border-bottom: 1px solid #000099;
   margin: 0;
 
}
 
ul#tabnav li {
   color:#000066;
   float:right;
   height: 21px;
   background-color:#E6E600;
   margin: 2px 2px 0 2px;
   border: 1px solid #000099;
}
 
ul#tabnav li.active {
   border-bottom: 1px solid #fff;
   background-color: #fff;
}
 
#tabnav a {
   float:left;
   display: block;
   color:#0000CC;
   text-decoration: none;
   padding: 4px;
}
 
#tabnav a:hover {
   background: #fff;
}

**brotelle** · 11/04/2006, 16h43

Ah et j'ai oublié de dire, je ne peux pas vous donner une url parce que le site n'est pas en ligne...

**franculo_caoulene** · 11/04/2006, 16h58

1) ça marche? [Résolu]?
2) le titre ne correspond plus au fil... la prochaine fois poste une nouvelle question

tableau ou div?

HTML

Discussions similaires

Partager

Partager