[XHTML] Avis sur un code XHTML/CSS

**babyshambles76** · 11/09/2007, 19h26

Bonjour à tous,

je poste içi mon code xhtml/css afin que vous puissiez me donner votre avis, je l'ai tester sur le navigateur Dreamweaver (IE et Firefox), il marche...
Le problème est que dans la fenetre d'affichage "création" de dreamweaver, il ne s'affiche pas du tout comme sur le navigateur, toutes les images sont chamboulées.
Je voulais savoir si cela été important étant donné qu'en pratique, mon site fonctionne comme je le veux.
Je voulais savoir aussi si il avait des modifications à apporter sur une chose que j'aurais mal faite.

Pour vous faciliter la compréhension: les div "haut" "gauche" "droite" ect... sont des div auxquel j'ai mis une image de fond et que jai positionné comme un mini puzzle afin d'obtenir au final une seul image (qui sera la page d'accueil) et sur laquel il y a 2 bouton "entrer" et "sortir".

Voila merci d'avance pour vos réponses. Cordialement.

Le code XHTML:

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
<!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>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="communs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style2 {font-size: 14px}
.Style3 {color: #B5FE52}
.Style4 {color: #858585}
.Style5 {color: #c0f76b}
body {
        background-color: #FFFFFF;
}
-->
</style>
</head>
 
<body>
<div class="conteneur">
        <div class="haut"></div>
        <div class="gauche"></div>
        <div class="milieu1"></div>
		<div class="milieu2"></div>
		<div class="milieu3"></div>
        <div class="droite"></div>
        <div class="bouton1"><a href="home.htm" class="bouton1"></a></div>
		<div class="bouton2"><a href="www.google.fr" class="bouton2"></a></a></div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p align="center">&nbsp; </p>
        <p align="center"><span class="Style2"><span class="Style3"><span class="Style5">Powered by Julien PARENT</span> |</span> <a href="mailto:babyshambles76@hotmail.fr" class="Style4">babyshambles76@hotmail.fr</a></span></p>
</div>    
</body>
</html>

Le 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
/* CSS Document */
.conteneur {
    margin: 0 auto;
	height: 600px;
	width: 600px;
	}
.haut {
    position: absolute;
    height: 236px;
	width: 600px;
	margin-left: 0px;
	margin-top: 0px;
	background: url(images/haut.jpg) no-repeat left bottom ;
	}
 
.gauche {
    position: absolute;
	height: 308px;
	width: 364px;
	margin-left: 0px;
	margin-top: 236px;
background: url(images/gauche.jpg) no-repeat left bottom ;
	}
.milieu1 {
    position: absolute;
	height: 279px;
	width: 84px;
	margin-top: 265px;
	margin-left: 364px;
	background: url(images/milieu1.jpg) no-repeat left bottom ;
	}
.milieu2 {
    position: absolute;
	height: 308px;
	width: 19px;
	margin-top: 236px;
	margin-left: 448px;
	background: url(images/milieu2.jpg) no-repeat left bottom ;
	}
.milieu3 {
    position: absolute;
	height: 279px;
	width: 84px;
	margin-top: 265px;
	margin-left: 467px;
	background: url(images/milieu3.jpg) no-repeat left bottom ;
	}
.droite {
    position: absolute;
	height: 308px;
	width: 49px;
	margin-left: 551px;
	margin-top: 236px;
	background: url(images/droite.jpg) no-repeat left bottom ;
	}
	a.bouton1 {
    position: absolute;
	height: 29px;
	width: 84px;
	margin-left: 364px;
	margin-top: 236px;
	background: url(images/bouton1.jpg) no-repeat left bottom ;
	}
 
a.bouton1:hover {
background: url(images/bouton1vert.jpg) no-repeat left bottom ;}
a.bouton2 {
    position: absolute;
	height: 29px;
	width: 84px;
	margin-left: 467px;
	margin-top: 236px;
	background: url(images/bouton2.jpg) no-repeat left bottom ;
	}
a.bouton2:hover {
background: url(images/bouton2vert.jpg) no-repeat left bottom ;
 
}

**Bisûnûrs** · 11/09/2007, 19h38

Il ne faut pas se fier à l'interpréteur HTML de Dreamweaver. Si ton site rend correctement sur IE et Firefox alors tout va pour le mieux.

Un conseil, tu devrais indenter correctement ton code, que ce soit HTML ou CSS, ça sera beaucoup plus pratique et agréable à maintenir.

**babyshambles76** · 11/09/2007, 20h05

Merci de votre reponse, oui je compté deja mettre un peu d'ordre dans mon code un jour ou je n'auré rien a faire. ^^
D'autres avis ?

**Auteur** · 12/09/2007, 12h58

bonjour,

j'ai un doute :

Code html :

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

1
2
<p align="center">..........</p>

mais je ne suis pas sûr que cet attribut passe la validation W3C XHTML 1.0.

**mikaoul** · 13/09/2007, 13h08

Salut,
Je crois qu'il est recommandé d'utiliser le sélecteur id au lieu de classe pour le positionnement des boites, étant donné que seule une boite aura cette position.

Au niveau CSS, ne serait-il pas mieux d'utiliser des unités relatives (% ou em) à la place des fixe (px) notamment pour le positionnement. Cela permet entre autre à ton site de s'adapter en fonction des résolutions.

[XHTML] Avis sur un code XHTML/CSS

HTML

Vue hybride

Discussions similaires

Partager

Partager