Bonjour, je bloque depuis un petit moment sur l'affichage correct de mon site 800x600 (sous FF et IE). le body se place ok (bien centré) mais mon conteneur de site se décale vers la droite lorsque l'écran est plus petit. voici le lien http://www.maisonmartimor.com.
est-ce que quelqu'un pourrait m'expliquer ce que j'ai omis de faire ?
html :
<!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>accueil martimor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="icon" type="image/gif" href="images/icone.gif" />
<link rel=stylesheet type=text/css href=index.css />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="site">
<div style="position:absolute; width:201px; height:284px; z-index:4; left: 657px; top: 147px;"><img src="images/maison_devant.jpg" title="Manu et Lou" Alt="Manu et Lou" width="200" height="282" />
</div>
<div class="texte_accueil" style="z-index:2;">Situé au coeur de la bastide de Mazères, cet hôtel particulier, possède une architecture qui n'est pas sans rappeler celles des grandes demeures toulousaines. <br />
<br />Bâtie en 1740 et habitée par la même famille depuis lors, nous vous proposons cinq chambres d'hôtes de caractère au charme d'antan associé au confort des plus modernes.<br /><br />Cosmopolite ou terroir, la table est généreuse et les produits locaux y ont une place de choix.</div>
<div class="bouton-page" style="top: 342px;">ACCUEIL</div>
<div class="boutons" style="top: 372px;"><a href="chambre.html">LES CHAMBRES</a></div>
<div class="boutons" style="top: 402px;"><a href="tarifs.html">TARIFS</a></div>
<div class="boutons" style="top: 432px;"><a href="alentours.html">ALENTOURS</a></div>
<div class="boutons" style="top: 462px;"><a href="acces.html">PLAN D'ACCES</a></div>
<div class="boutons" style="top: 492px;"><a href="contact.html">CONTACT</a></div>
</div>
<div class="anim"><span><marquee style="direction="left" scrollamount="2.5" scrolldelay="30">- Bienvenue dans l'ancien comté de Foix, au
coeur de l'Ariège -</marquee></span></div>
</body>
</html> |
css:
body {
background-image: url(images/fond_web.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
background-color: #CCCCCC;
font-family: Verdana;
color: #FF9900;
font-weight: 500;
width: 800px;
height: 600px;
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}
#site {
position:relative;
margin-left:auto;
margin-right:auto;
width: 100%;
text-align: left; /* on rétablit l'alignement normal du texte */
}
.texte_accueil {
position: absolute;
width: 285px;
height:auto;
margin-left: 300px;
font-family: Georgia;
font-weight: bold;
font-size: 15px;
color: #333333;
left: 44px;
top: 151px;
}
.boutons {
position: absolute;
text-align:center;
width: 136px;
height:auto;
left: 132px;
font-family: Georgia;
font-weight: bold;
font-size:14px;
color: #333333;
z-index: 8;
}
.boutons a:link {
color:#333333;
text-decoration: none;
}
.boutons a:visited {
color:#333333;
text-decoration: none;
}
.boutons a:hover {
color: #FFFFFF;
text-decoration: none;
}
.bouton-page {
position: absolute;
text-align:center;
width: 136px;
height:auto;
left: 132px;
font-family: Georgia;
font-weight: bold;
font-size:14px;
color: #FFFFFF;
z-index: 8;
}
.anim {
width: auto;
margin-left: 150px;
margin-right: 150px;
height:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
} |
inutile de vous dire que je parcoure les divers forums à la recherche d'une explication mais je n'y arrive pas.... je crois que je n'ai pas encore tous les bons réflexes d'un webmaster...
Merci d'avance de votre aide
Caro
