[XHTML] Quelques questions pour XHTML Strict

Version imprimable

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:

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>

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

Code:

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

Pour ca :

Code:

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:

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" :)

28/08/2006, 23h05
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
29/08/2006, 01h45
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 ?
30/08/2006, 10h47
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.

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

Alors d'abord le fichier 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
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:

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