Bonjour,
je suis actuellement en train de développer un site et j'ai un problème d'affichage de div selon la résolution du PC. L'affichage se passe très bien en résolution 1280x800 mais en plus basse résolution c'est décalé...
L'architecture du site est assez classique: un header, un bloc de contenu, un footer le tout contenu dans un container. Toutes les tailles (largeur/hauteur des div en positionnement) en CSS sont codées en pixels et pas en em ou %. Les div concernées par le décalage sont positionnées en absolute.
URL de la page (en test sur un de mes serveurs...): http://www.cv-ingenieurs.com/
Code 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>Mairie de Ladeveze</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
function slideSwitch() {
var $active = $('#diapo IMG.active');
if ( $active.length == 0 ) $active = $('#diapo IMG:last');
var $next = $active.next().length ? $active.next()
: $('#diapo IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
//-->
</script>
<script type="text/javascript" src="javascript/jquery.tabs.js"></script>
<script type="text/javascript" src="javascript/menu.js"></script>
<link href="style/css_ladeveze.css" rel="stylesheet" type="text/css" />
<link href="style/menu.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div id="container">
<div id="header"><!-- end #header !-->
<div id="soho_solo"><a href="http://www.soho-solo-gers.com"><img src="images/soho_solo.jpg" /></a></div>
<div id="val_d_adour"><a href="http://www.val-adour.com"><img src="images/paysduvaldadour.gif" /></a></div>
<div id="boutons_langues">
<a href="index.php?langue=fr"><img src="images/flag_FR_b.gif" border="0"></a>
<a href="index.php?langue=eng"><img src="images/flag_EN_b.gif" border="0"></a>
</div>
</div>
<div id="diapo">
<img src="images/fetes.jpg" alt="" class="active" />
<img src="images/village.jpg" alt="" />
<!-- end #diapo !--></div>
<div id="menu">
<div id="onglets">
<ul class="navonglets">
<li class="actif"><a href="#onglet_1">Accueil</a></li>
<li><a href="#onglet_2">Vie municipale</a></li>
<li><a href="#onglet_3">Vie locale</a></li>
<li><a href="#onglet_4">Animations</a></li>
<li><a href="#onglet_5">Tourisme</a></li>
</ul>
<div class="onglet" id="onglet_1">
<div class="sous_lien">
<div align="left"> <a href="index.php?langue=fr"><strong>Mot du maire et Actualité</strong></div>
</div>
</div>
<div class="onglet" id="onglet_2">
<div class="sous_lien">
<div align="left"><a href="conseil.php?langue=fr"><strong>Conseil</strong></a><a href="commissions.php?langue=fr"><strong>Commissions</strong></a> <a href="syndicats.php?langue=fr"><strong>Syndicats</strong></a><a href="bulletinsdinfo.php?langue=fr"><strong>Bulletins d'informations</strong></a><a href="horaires.php?langue=fr"><strong>Horaires</strong></a><a href="compterendu.php?langue=fr"><strong>Compte-rendus du conseil</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_3">
<div class="sous_lien">
<div align="left"><a href="associations.php?langue=fr"><strong>Associations</strong></a><a href="comite_des_fetes.php?langue=fr"><strong>Comité des Fêtes</strong></a><a href="artisanat.php?langue=fr"><strong>Artisanat</strong></a><a href="agriculture.php?langue=fr"><strong>Agriculture</strong></a><a href="sante.php?langue=fr"><strong>Santé</strong></a><a href="ecole.php?langue=fr"><strong>Ecole</strong></a><a href="commerce.php?langue=fr"><strong>Commerces</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_4">
<div class="sous_lien">
<div align="left"><a href="fetesanim.php?langue=fr"><strong>Fêtes et Animations</strong></a></div>
</div>
</div>
<div class="onglet" id="onglet_5">
<div class="sous_lien">
<div align="left"><a href="histoire.php?langue=fr"><strong>Histoire</strong></a><a href="patrimoine.php?langue=fr"><strong>Patrimoine</strong></a><a href="Oudormir.php?langue=fr"><strong>Où dormir ? Où manger ?</strong></a><a href="liens.php?langue=fr"><strong>Liens utiles</strong></a>
</div>
</div>
</div>
</div>
</div>
<div id="mainContent">
<div id="contenu">
<div class="cornerBox">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="cornerBoxInner">
<h1> Mot du Maire </h1>
<p>
<font color=red>EN COURS</>
</p></div> </div>
</div>
<!-- end #mainContent !--></div>
<div id="footer">
<p align="center">Mentions légales - Copyright Commune de Ladevèze - A propos</p> </div>
<!-- end container !--></div>
</body>
</html>
Code CSS:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
#container {
width:900px;
height:auto;
background:#4e8432;;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
z-index:0;
}
#header {
height:156px;
background-image:url(../images/header.jpg);
}
#boutons_langues{
position:absolute;
left:975px;
top:180px;
z-index:10;
}
#soho_solo{
position:absolute;
left:17px;
top:83px;
width:80px;
height:47px;
}
#val_d_adour{
position:absolute;
left: 10px;
top: 17px;
}
a img{
border:none;
}
#diapo{
position:absolute;
width:400px;
height:80px;
left: 10%;
top: -23px;
z-index:10;
}
#diapo IMG {
position:absolute;
top:151px;
left:395px;
z-index:18;
}
#diapo IMG.active {
z-index:20;
}
#diapo IMG.last-active {
z-index:19;
}
#mainContent {
position:relative;
background-image:url(../images/main_repeat.jpg);
background-repeat:repeat-y;
height:auto;
padding-left: 38px;
padding-top: 150px;
z-index:5;
}
#menu {
position:absolute;
width:810px;
height:150px;
background-image:url(../images/menu.jpg);
left: 222px;
top: 216px;
z-index: 20;
}
#boutons_langue{
position:absolute;
left: 904px;
top: 104px;
}
#contenu {
width:825px;
top:180px;
}
#footer {
position:absolute;
width:900px;
height:60px;
background-image:url(../images/footer.jpg);
}
/*Cadre arrondi*/
.cornerBox {
position: relative;
width: auto;
background-color:#ffffff;
}
.corner {
position: absolute;
width: 10px;
height: 10px;
background:url(../images/coin.jpg) no-repeat;
font-size: 0%;
}
.cornerBoxInner {
padding: 10px;
}
.TL {
top: 0;
left: 0;
background-position: 0 0;
}
.TR {
top: 0;
right: 0;
background-position: -10px 0;
}
.BL {
bottom: 0px;
left: 0;
background-position: 0 -10px;
}
.BR {
bottom: 0px;
right: 0px;
background-position: -10px -10px;
}
Voilà si vous trouvez le problème dans ces codes merci de me dire !
Configuration: Windows Vista
Firefox 3.0.11
1080p resolution
