décalage à l'affichage sur écran + petit
décalage à l'affichage sur écran + petit - HTML/CSS - Programmation
Marsh Posté le 26-03-2007 à 12:37:28
positionnnement des éléments en absolu et tu as construit ton site en te basant sur ton écran et pas sur autre chose c'est tout 
Marsh Posté le 26-03-2007 à 12:40:07
non, mon écran est plus grand que 800x600... et en ce qui concerne les éléments en absolu, si je les enlève = TOUT est décalé....
Sujets relatifs:
- Petit Problème bizarre :)
- session, double affichage
- div de la hauteur de l'écran
- petit problème pour transfert de valeurs dans liste à choix multiple
- [PHP/MYSQL] Affichage d'un champ dans une listbox
- [VBA Excel] Eviter l'affichage de certains avertissements
- Problème d'affichage d'une table
- ergonomie ecran et code java
- problemes d'affichage de resulats de recherche
- Bounton pour pleine écran.
Marsh Posté le 26-03-2007 à 12:34:49
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