Décalage de div en absolute selon résolution
windsurfer00
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
Mat -
Mat -
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="https://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 !
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="https://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 !
A voir également:
- Décalage de div en absolute selon résolution
- Absolute uninstaller - Télécharger - Divers Utilitaires
- Réduire résolution image - Guide
- Div c++ - Télécharger - Langages
- Cette resolution n'est pas prise en charge par cette tv modifiez la ✓ - Forum Format et connectique vidéo
- Impossible de charger l'image haute résolution messenger ✓ - Forum Mail
5 réponses
C'est la position absolute de ton menu qui fait ça j'imagine... Au pire, utilise des table. je ne sais pas ce qu'en pense les développeurs plus avancés, mais avec les normes du w3c ça devient plus chaud de travailler en div.
Bon ok je vais essayer avec des table ça coute rien d'essayer, mais c'est dommage quand même d'être obligé de se prendre la tête. J'ai fait bien gaffe de positionner le div père donc à priori ça devrait être partout pareil... relou je comprends pas...
Merci à toi en tous cas
Merci à toi en tous cas
Essaye encore avec les div.
mets ca dans le css de la div de ton menu :
margin-right: auto;
margin-left: auto;
mets ca dans le css de la div de ton menu :
margin-right: auto;
margin-left: auto;
Ok pas mal comme idée, mais ça ne marche toujours pas. Le souci est toujours là. Dans le même genre j'ai essayé de positionner le menu avec des marges sans positionnement absolu du tout? Ca marche au niveau de la position mais du coup mon background disparaît (c'est une bande fine en repeat-y puisque la hauteur du contenu est automatique) sur toute la dimension de la div du menu... et là non plus je sais pas pourquoi.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
le soucis est que tu est en absolu, donc positionnement par rapport a l'écran, et non a ton site.
pour centrer un site web, même si tu as des résolution différentes, c'est en réalité assez simple.
une div "centrale" que tu centre horizontalement.
ensuite si tu veux placer des éléments, met les dans ta div centrale "entre les deux balises <div></div>.
et met les en position relative. comme cela, si tu met un élément a 2 px de la gauche, ce sera par rapport a ta div centrale et non au bord de la page. donc ta div centrale se centrera par rapport a la résolution d'écran du visiteur et tes éléments seront toujours a la même place dans cette div / ta page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
<body>
<div id="centrale" style="position: absolute;width: 750px;left: 152px;top:15px; height:203px; background-color:#C0C0C0">
<div id="image" style="position: relative; left: 4px; top: 50px;"> <img border="0" src="http://www.supinfo-projects.com/i/cat/net.gif" width="59" height="61">cette image est positionnée par rapport a son conteneur, la div centrale (ce bout de texte aussi)</div>
<p> <p> <p> <p> <p>
ceci est la div centrale (en gris)<p>
elle sera toujours centree sur la page, donc se deplacera en fonction de la taille d'ecran.<p>
mais l'image sera toujours a 4px de la gauche ce cette div et 50 du
haut.<p>
donc le contenu de cette div sera toujours bien placé.
</div>
</body>
</html>
le code est moche et peut se placer dans un css, mais c'est juste pour donner un exemple.
pour centrer un site web, même si tu as des résolution différentes, c'est en réalité assez simple.
une div "centrale" que tu centre horizontalement.
ensuite si tu veux placer des éléments, met les dans ta div centrale "entre les deux balises <div></div>.
et met les en position relative. comme cela, si tu met un élément a 2 px de la gauche, ce sera par rapport a ta div centrale et non au bord de la page. donc ta div centrale se centrera par rapport a la résolution d'écran du visiteur et tes éléments seront toujours a la même place dans cette div / ta page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
<body>
<div id="centrale" style="position: absolute;width: 750px;left: 152px;top:15px; height:203px; background-color:#C0C0C0">
<div id="image" style="position: relative; left: 4px; top: 50px;"> <img border="0" src="http://www.supinfo-projects.com/i/cat/net.gif" width="59" height="61">cette image est positionnée par rapport a son conteneur, la div centrale (ce bout de texte aussi)</div>
<p> <p> <p> <p> <p>
ceci est la div centrale (en gris)<p>
elle sera toujours centree sur la page, donc se deplacera en fonction de la taille d'ecran.<p>
mais l'image sera toujours a 4px de la gauche ce cette div et 50 du
haut.<p>
donc le contenu de cette div sera toujours bien placé.
</div>
</body>
</html>
le code est moche et peut se placer dans un css, mais c'est juste pour donner un exemple.
