Discussion :

[kilkikou]

Bonsoir à tous,

Voila je suis entrain de développer un site web et j'aimerais qu'il soit aux normes strict du W3. Je sais que pour cela il faut mettre tout pour la mise en page dans les feuilles de styles. Les align, width etc sont donc interdit...Seulement voila je ne vois pas trop comment insérer certaines choses dans les feuilles de style...J'aurais besoin d'un petit coup de pouce, pour le départ comme on dit...Si vous pouvez me montrer qu'elle serait la feuille de style ( en gros ) correspondant à ce petit bou de code...Merci d'avance.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr valign="top"> 
    <td width="24"> 
      <div align="center"><img src="images/h_bg.jpg" width="24" height="106" alt=""/></div></td>
    <td class="backgroundextern"> <div align="right"><img src="images/h_pg.jpg" width="58" height="106" alt=""/></div></td>
    <td class="backgroundintern"> <div align="center"><img src="images/logo.jpg" width="345" height="65" alt=""/></div></td>
    <td class="backgroundextern"> <div align="left"><img src="images/h_pd.jpg" width="58" height="106" alt=""/></div></td>
    <td width="28"> 
      <div align="center"><img src="images/h_bd.jpg" width="28" height="106" alt=""/></div></td>
  </tr>
</table>

[kilkikou]

Voila le code HTML pour qu'il soit valide XHTML strict...Il reste à faire la feuille de style et la je bloque completement...

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
<!-- DEBUT header -->
 
<table>
  <tr> 
    <td> 
      <div><img src="images/h_bg.jpg" alt="" /></div></td>
    <td class="backgroundextern"> <div><img src="images/h_pg.jpg" alt="" /></div></td>
    <td class="backgroundintern"> 
      <div><img src="images/logo.jpg" alt="Blog de Kilkikou" /></div></td>
    <td class="backgroundextern"> <div><img src="images/h_pd.jpg" alt="" /></div></td>
    <td> 
      <div><img src="images/h_bd.jpg" alt="" /></div></td>
  </tr>
</table>
 
<!-- FIN header -->

[fallais]

Pour ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<table border="0" class="table" cellspacing="0" cellpadding="0">
  <tr valign="top"> 
    <td width="24"> 
      <div class="blabla"><img src="images/h_bg.jpg" width="24" height="106" alt=""/></div></td>
    <td class="backgroundextern1"><img src="images/h_pg.jpg" width="58" height="106" alt=""/></td>
    <td class="backgroundintern"><img src="images/logo.jpg" width="345" height="65" alt=""/></td>
    <td class="backgroundextern2"><img src="images/h_pd.jpg" width="58" height="106" alt=""/></td>
    <td width="28"> 
      <div class="blabla"><img src="images/h_bd.jpg" width="28" height="106" alt=""/></div></td>
  </tr>
</table>

JE ferais ca :

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
 
.table {
width: 80%;
}
.backgroundextern1 {
text-align: right;
}
.backgroundintern {
text-align: center;
}
.backgroundextern2 {
text-align: left;
}
.blabla {
text-align: center;
}

Mais je suis pas spécialiste de ces nouvelles "normes"

[kilkikou]

Il reste encore des éléments non comptabile XHTML strict...
Il va falloir que j'essaie jusqu'à trouver les bonnes combinations.
Je suis toujours preneur d'idée, conseil...

Merci pour ton aide Elwyn

[Candygirl]

Hello,

Le bout de code que tu montres, ne semble pas contenir des données tabulaires, mais plutôt un montage de design ?

Perso je pense que c'est un non-sens de vouloir appliquer du xhtml stricte à un tel montage. Soit, tu montes ta page en positionnant tes éléments du design à l'aide des css, soit tu restes avec un montage en tableau, mais tu as peut-être alors meilleur temps d'opter pour un autre doctype ? Le html ou xhtml transitionnel est aussi valid w3c...

Maintenant j'ai de la peine à dire comment je ferais ce montage via les css, la découpe des images pouvant être fort différente raport à un montage en tableau. Peut-être si tu peux montrer un résultat plus précis de ce que tu souhaiterais obtenir ?

[kilkikou]

Effectivement le bou de code que je montre est une partie du design de mon site web. En fait au départ je voulais tout simplement créer mon site aux normes. Donc j'ai commencer en transitionnal. Je me suis rendu compte que j'avais pas eu de mal à monter la premiere page et la faire valider en transionnal donc je me suis dis, pourquoi pas essayer en strict ?? Et c'est la que j'ai commencer à gallerer, en strict il faut bien évidemment séparer design dans les feuiles et contenu dans les pages web. Voila en gros pour l'explication du pourquoi je veux faire ca. Maintenant à vous de me dire si j'ai tort de faire ainsi, si il serait plus simple de faire autrement...

Merci pour votre aide.

[kilkikou]

Voila ou j'en suis...Est-ce que les spécialistes peut commenter, critiquer ??

Alors d'abord le fichier 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
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Georgia", helvetica, sans-serif ;
	background: #C7D3D7 ;
}
 
div#page
{
	width: 80% ;
	margin: 0 auto ;
	text-align: left ;
	background: #C7D3D7 ;
}
 
pre
{
	overflow: auto ;
}
 
* html pre
{
	width: 80% ;
}
 
 
.h_gauche
{
	background : url("images/h_bg.jpg") bottom left no-repeat ;
	padding-left : 24px;
}	
 
.gauche
{
	background : url("images/h_pg.jpg") bottom left no-repeat ;
	padding-left : 58px;	
}
 
.droite
{
	background : url("images/h_bd.jpg") right no-repeat ;
	padding-right : 24px;
}	
 
.h_droite
{
	background : url("images/h_pd.jpg") right no-repeat ;
	padding-right : 58x;	
	padding-top : 106px;
}
 
 
.centre
{
	background : url("images/h_fdintern.jpg") bottom repeat-x;
}	
 
.logo
{
	background : url("images/logo.jpg") top center no-repeat ;
}

Puis le fichier 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<meta name="Title" content="Blog de Kilkikou"/>
<meta http-equiv="Content-Language" content="fr"/>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1"/>
<meta name="Robots" content="all"/>
 
 
<title>Blog de Kilkikou</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="calendar.css" type="text/css"/>
 
</head>
<body>
 
 
 
<br/>
<br/>
 
 
 
<div id="page">
 
 
 
		<div class="h_gauche">
 
				<div class="gauche">
 
						<div class="centre">						
 
								<div class="logo">
 
										<div class="droite">
 
												<div class="h_droite">
 
												</div>
 
										</div>
 
								</div>
 
						</div>
 
				</div>		
 
		</div>
 
 
</div>		
 
</body>
</html>

Merci pour votre aide ainsi qu'amélioration...