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