tableau ou div?

Version imprimable

11/04/2006, 14h06
brotelle

tableau ou div?

Bonjour,

Je suis en train de faire un site et je suis une débutante alors j'aurais aimé l'avis de plusieurs expers :D . C'est mieux de faire un site avec des div ou avec des tableaux?
11/04/2006, 14h18
franculo_caoulene

Salut,

:recherch:
11/04/2006, 14h21
10-nice

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.
11/04/2006, 14h24
SIBELIUS

Citation:

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.

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:

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>

11/04/2006, 14h30
franculo_caoulene

:tagcode:
11/04/2006, 14h39
10-nice

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

Peux-tu essayer avec les styles css suivant:

Code:

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!!

11/04/2006, 16h39
blueice

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.

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

voilà mon nouveau code html :

Code:

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:

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;
}

11/04/2006, 16h43
brotelle

Ah et j'ai oublié de dire, je ne peux pas vous donner une url parce que le site n'est pas en ligne...
11/04/2006, 16h58
franculo_caoulene

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