[Position: fixed ] & [Position: absolute] décalages incompréhensibles

Par F2014, il y a 11 ans

Les bases HTML/CSS

Bonjour,

En pleine construction d'un site super simple pour l'association d'un ami, jusque là tout allait bien, sauf que je rencontre actuellement deux problèmes pour la propriété "position".

En effet, dans un premier temps mon but est de rendre mon menu de haut de page toujours apparent au scroll, mais voilà, lorsque j'ajoute cette ligne de code ma barre de menu se décale sur la gauche et ne prend plus toute la largeur de la page, et la barre de menu croque un pe sur la hauteur de la div juste en dessous.

Voici ce que ça donne AVEC le

position: fixed;

:

Voici ce que ça donne SANS le 

position: fixed;

:

Voici mon code CSS: 

body{
margin:0px;
padding:0px;
}
/*PAGE D'ACCUEIL*/
/*Menu navigation*/
.nav {
background-color:#05131E;
height:90px;
text-transform:uppercase;
background-position:center center;
 -webkit-background-size: cover; /* pour Chrome et Safari */
 -moz-background-size: cover; /* pour Firefox */
 -o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
position:fixed;
}
.nav table{
padding-top:15px;
margin-left:auto;
margin-right:auto;
height:20px;
}
.nav td{
/*border:1px solid white;*/
text-align:center;
padding-left:50px;
padding-right:50px;
}
.nav td a{
color:white;
font-size:15px;
font-family:helvetica;
letter-spacing:6px;
text-decoration: none;
}
.nav td span a{
font-family:Six Caps;
font-size:40px;
}
/*Première Bande*/
#bandeLogo{
height:502px;
background: white;
background-image:url("https://imagizer.imageshack.us/v2/1083x677q90/538/JcboAJ.jpg");
background-repeat: no-repeat;
background-position:center center;
 -webkit-background-size: cover; /* pour Chrome et Safari */
 -moz-background-size: cover; /* pour Firefox */
 -o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
padding-top:68px;
}
#bandeLogo img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
}

Dans un second temps, j'ai inséré une liste d'images auxquelles il y a certains effets lors du passage de la souris (ce morceau de code n'est pas de moi, je l'ai simplement modifié légèrement pour qu'il s'intègre au mieux à mon code), et là même problème avec cette propriété "position", mais cette fois pour la valeur "absolute" donc 

position: absolute;

. Les images se décalent largement vers la droite et rien à faire pour les replacer à coup de margin. Seulement je suis obligé d'utiliser cette propriété pour que la propriété "z-index" de ce code fonctionne correctement.

Voyez plutôt:
AVEC 

position: absolute

:

SANS 

position: absolute

:

Le code HTML: 

<div id="bandeProj">Bienvenue...
        <div id="ligneImg">
            <ul>
              <li><img src="https://imagizer.imageshack.us/v2/960x886q90/540/ihZttw.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x872q90/661/HcyzaL.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x885q90/673/rhP4D8.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x884q90/913/fGpjVR.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x883q90/673/E6lF3m.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x884q90/674/sCUhLc.jpg" alt="" /></li>
              <li><img src="https://imagizer.imageshack.us/v2/960x885q90/673/PAIdPj.jpg" alt="" /></li>
            </ul>
        </div>
    </div>

Le code CSS: 

/*Le Projet*/
#bandeProj{
height:570px;
background-color:white;
color:#05131E;
text-align:center;
font-size:60px;
font-family:Niconne;
padding-top: 0px;
cursor:default;
}
#ligneImg ul{
display:inline;
width:260px;
height:260px;
margin-right:50%;
margin-left:50%;
}
#ligneImg ul li{
list-style:none;
float:left;
width:260px;
height:260px;
}
#ligneImg ul li:nth-child(8){
clear:right;
}
#ligneImg ul img{
/*position:absolute;*/
z-index:1;
height:260px;width:260px;
box-shadow:0 0 3px black;
-webkit-transition:all .5s cubic-bezier(.6,2,.4,1);
    -moz-transition:all .5s cubic-bezier(.6,2,.4,1);
     -ms-transition:all .5s cubic-bezier(.6,2,.4,1);
      -o-transition:all .5s cubic-bezier(.6,2,.4,1);
         transition:all .5s cubic-bezier(.6,2,.4,1);
}
#ligneImg ul li:hover img{
z-index:5;
-webkit-transform: scale(2);
    -moz-transform: scale(2);
     -ms-transform: scale(2);
      -o-transform: scale(2);
         transform: scale(2);
box-shadow:0 0 10px black;
}
#ligneImg ul:hover li:not(:hover) img{
-webkit-filter: grayscale(1) blur(5px);
    -moz-filter: grayscale(1) blur(5px);
     -ms-filter: grayscale(1) blur(5px);
      -o-filter: grayscale(1) blur(5px);
         filter: grayscale(1) blur(5px);
}

Ah, et j'arrive pas à centrer cette foutue liste d'image, même avec les 

margin-left:50%

et 

margin-right:50%

qui ont eu l'effet bizarre (enfin selon moi) de se centrer verticalement, et non horizontalement.

Merci d'avance tout le monde !

4 réponses

ClementParis, il y a 11 ans

Pour le problème de ton position: fixed; sur ton menu, essaye d'ajouter width: 100; à .nav dans ton CSS, ça devrait résoudre le problème.

Pour ton problème de position: absolute; il vaudrait mieux que tu ajustes la position avec les propriétés top et left qu'avec un margin.
Dans ton exemple, si tu ajoutes left: 0; à #ligneImg ul img, il devrait se remettre à sa place sur la gauche.

Arrows78, il y a 11 ans

Le positionnement "absolute" et "fixed" ont les mêmes propriétés, à la seule différence que "fixed" reste toujours au même endroit de l'écran.

Effectivement, si tu rajoute à ta classe nav un :

width: 100%;

le problème devrait être résolu.

Pour tes images, le mieux serait d'utiliser les flottants.

F2014, il y a 11 ans

Merci pour vos réponses,

La question du Position : fixed; est réglée, même si le menu croque toujours un peu sur la div du dessous, mais je vais faire en sorte d'arranger ça, ça ne devrait pas être trop compliqué.

En ce qui concerne le position: absolute; pour la suite d'images, lorsque je mets un left:0; à l'endroit que tu m'indiques, toutes les images se retrouvent bloquées dans un seul et même carré sur la gauche, ce qui fait qu'on ne voit plus qu'une seule image et qu'aléatoirement, selon mon placement de souris sur ce carré j'imagine, les images se zooment les unes après les autres... :/

ClementParis, il y a 11 ans

Je ne vois pas trop l'affichage que tu cherches à obtenir pour ton histoire de position absolute. T'as un visuel pour montrer ça ?

Dans tous les cas ce que tu dois retenir c'est qu'un élément en position: absolute; est positionné en fonction du premier élément qui le précède qui est déjà positionné (en fixed, relative ou absolute).

Si c'est pas clair, voilà un exemple. Si tu as le HTML suivant :

<ul>
    <li><img src="#" alt=""></li>
    <li><img src="#" alt=""></li>
    <li><img src="#" alt=""></li>
</ul>

et le CSS suivant : 

ul {
    position: relative;
    width: 100%;
    left: 20px;
    top: 0;
}
li {
    position: absolute;
    left: 0;
}

Cela veut dire que d'une part, tous tes <li> ont la même position, donc ils se superposent, et d'autre part, tes <li> sont situés à 0px du bord gauche du <ul> qui les contient (puisque c'est le premier élément précédent à être positionné), donc à 20px du bord gauche de la fenêtre (en admettant que le <ul> n'a pas d'élément précédent déjà positionné).