28234 sujets

CSS et mise en forme, CSS3

[ RÉSOLU ] Décalage mystique ??

Bonjour.
Je me demande pourquoi il y a un décalage à gauche et à droite de quelques px avec le bord alors qu'il n'y en a pas pour le header.
http://i.imgur.com/yxevPgz.gif

HTML
<header>
  menu
</header>
<div class="bandeau">
</div>
<article>
  
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.


CSS
header {
  width: 100%;
	color : white;
	background-color: black;
	position:fixed;
  height: 3em;
  top:0;
  left:0;
  z-index:1;
  text-align: center;
}
.bandeau{
  background-color: yellow;
  height: 3em;
  top:3em;
  width:100%;
  position:relative;
}

article{
  top:3.5em;
  position: relative;
}


Je débute, j'ai peut-être raté une évidence. Smiley rolleyes
Modifié par hkza (26 Feb 2016 - 11:19)
Bonjour,

Difficile à dire car nous n'avons pas accès à tout le code, il manque visiblement des balises. On peut voir le CodePen ?

À première vue le Lorem Ipsum n'est intégré dans aucun paragraphe (balise <p>). il faudrait déjà commencer par là...
Je pense qu'il te reste un margin ou un padding sur le body.

Le header ne les subit pas car en position: fixed, il se réfère à l'élément html et pas au body.
Oui ça sera plus facile avec le codepen

Donc la div "bandeau" et la balise article se réfèrent au body. Mais je n'ai encore aucun padding ni margin ( enfin je crois ).

J'ai rajouté la balise p . mais j'ai toujours ce léger décalage.
Modifié par hkza (26 Feb 2016 - 09:21)
Bonjour,

hkza a écrit :
Donc la div "bandeau" et la balise article se réfèrent au body. Mais je n'ai encore aucun padding ni margin ( enfin je crois ).

Tu n'as aucune marge ou marge interne, cela ne veut pas dire que tu as 0 pour ces valeurs, cela veut dire que les valeurs par défaut s'appliquent

Je t'invite à lire cet article sur le sujet

Sur la page de test, par exemple avec Chrome, la balise body a une marge de 8px
Ahh merci les amis ! Smiley biggrin

C'est bien les marges par défaut inhérentes aux différents navigateurs testés ( pour ma part chrome et firefox ) avec des marges de 8px ! et du coup mon header en fixed s'en tape mais pas le reste.

Probleme résolu avec un reset CSS ! CQFD !
Smiley clapclap
Modifié par hkza (26 Feb 2016 - 11:19)
Sujet clos
Aller à