Sujet Précédent Sujet Suivant

Décalage de div en absolute selon résolution

Fermé
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009 - 19 juin 2009 à 17:33
 Mat - 13 avril 2011 à 15:02
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 !

5 réponses

Réponse 1 / 5
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
19 juin 2009 à 17:42
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.
0
Réponse 2 / 5
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009
19 juin 2009 à 18:09
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
0
Réponse 3 / 5
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
19 juin 2009 à 18:44
Essaye encore avec les div.

mets ca dans le css de la div de ton menu :

margin-right: auto;
margin-left: auto;
0
Réponse 4 / 5
windsurfer00 Messages postés 16 Date d'inscription jeudi 29 novembre 2007 Statut Membre Dernière intervention 7 septembre 2009
20 juin 2009 à 16:22
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 256
22 juin 2010 à 12:12
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.
0
Mat
13 avril 2011 à 15:02
Ton idée est bonne mais ta div "centrale" ne sera pas centrée, elle sera à 152px de la gauche, se qui change beaucoup selon les résolutions.

Ou alors il y a quelque chose que je n'ai pas compris
0

Discussions similaires

Impossible de télécharger photos messenger
Morgane -
Utilisateur anonyme -

1 réponse
Erreur temporaire de résolution de « deb.debian.org ».
MERRiii -
Fredordetre -

3 réponses
Qu'est ce que la résolution native
neptunox04 -
Zalzadar_dz -

5 réponses
impossible recevoir photo avec messenger
cristo5 -
cristo5 -

3 réponses
Smart IPTV décalage de son
Cynco -
bazfile -

1 réponse