28172 sujets

CSS et mise en forme, CSS3

[Résolu] Position relative différente avec ou sans border.

Je désir positionner différentes zones avec position:relative; height et width ...

Mais le problème c'est que le résultat est différent (sur safari et FF) selon que j'applique ou non une bordure!

Pour une fois Smiley smile , sur IE le comportement me semble logique.
Explication par l'image:

avec les bordures sur FF - Safari -IE7 :
upload/19622-withborder.jpg


sans les bordures sur FF - Safari -IE7 :
upload/19622-withoutbor.jpg

Mon code html :
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="CSS/test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="main">
      <p id="text">text pour l'essai</p>
    </div>
    <div id="footer">
      Pied de page
    </div>
  </body>
</html>


mon css :
   #main{
  height: 500px;
  width: 70%;
  position: relative;
  left: 60px;
  top:20px;
  background-color:#ccffff;  /*for debug */
  /* border:1px  blue solid;   for debug */
}

#text{
  margin-top: 150px;
  margin-left: 130px;
  margin-right: 100px;
}

#footer{
  height: 30px;
  width: 80%;
  position: relative;
  left: 30px;
  top:40px;
  text-align:center;
  background-color:#ff9900;  /*for debug */
  /*border:1px  blue solid;    for debug */
}


Merci de m'aider à comprendre pourquoi et à modifier mon code pour avoir si possible pour les trois le comportement "avec bordures" même si je les enlève.

NB: le site sur lequel je travail comporte davantage de zone mais le problème est le même.
Modifié par dupy (19 Feb 2009 - 12:39)
Merci pour l'encouragement pertinent à ne pas utiliser la propriété position à tort et à travers ...

Néanmoins je ne comprend pas pourquoi :

- Lorsque je décale légèrement en relatif une zone définie par <div>, sa position serra conforme à mes attente si je lui ajoute une propriété border (left: 60px; top:20px;).

- Mais que cette même zone se décalera suivant la valeur margin-top de l'élément contenu à l'intérieur de ma zone si je met border en commentaire. (--> left 60px Smiley smile , top 20px +150px Smiley decu ).

Et cela sur FF et Safari mais pas sur IE.

Peut-on se fier à position: relative; pour décaler une zone définie par un <div> ou son comportement dépendra du contenu?

En attendant je vais revoir les types de positionnement que j'utilise en priorité ...
dupy a écrit :
Et cela sur FF et Safari mais pas sur IE.

À vue de nez, je dirais que c'est une conséquence normale de la fusion des marges. Et que le rendu dans Internet Explorer 6-7 est anormal (celui dans IE8 devrait être normal), à cause d'un effet du HasLayout.

Un peu de lecture:
http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

dupy a écrit :
Peut-on se fier à position: relative; pour décaler une zone définie par un <div> ou son comportement dépendra du contenu?

Tu peux t'y fier pour décaler un objet par rapport à sa position normale à l'écran. Le positionnement relatif n'aura à priori pas de conséquence sur cette position normale (en dehors du décalage).
En effet il s'agit d'une fusion des marges.

Ce qui est surprenant c'est que la fusion s'effectue entre une marge supérieur ( margin-top:150px) et une position vertical (position:relative top:20px).

Par contre cela me permet de comprendre pourquoi cela disparait avec un border.

Je vais contourner ce problème avec du padding (padding: 1px 0;) dans mon #main.

Merci encore pour ton aide.
dupy a écrit :
Ce qui est surprenant c'est que la fusion s'effectue entre une marge supérieur ( margin-top:150px) et une position vertical (position:relative top:20px).

Non. Il y a d'abord une fusion des marges qui se produit (vire le positionnement relatif, tu le verras clairement). Ce qui nous donne la position normale du bloc. Ensuite tu décales le bloc visuellement via le positionnement relatif, mais ça c'est une tout autre affaire, et les deux n'interagissent pas.
Sujet clos
Aller à