supp marge externe d'1 DIV dans 1 body [HTML]Résolu/Fermé

Question

Bonsoir, Je suis coincé sur un Tp: je n'arrive pas à supprimer une toute petite marge entre le body et ma div id="corps"! Voici le html: TP6-ex2_2

couleur de fond: bleu

couleur de fond: vert

couleur de fond: blanc

couleur de fond: jaune

couleur de fond: rouge

et voici le css: body{background-color: black; padding-top: 0%;} div{ text-align: center; } #corps{ margin-top: 0%; position: relative; top: 0%; height: 400px; line-height: 400px; background-color: red; } #case1{ height: 30px; width: 160px; line-height: 30px; position: absolute; top: 0%; left: 0%; background-color: blue; } #case2{ height: 30px; width: 160px; line-height: 30px; position: absolute; top: 0%; right: 0%; background-color: green; } #case3{ height: 30px; width: 160px; line-height: 30px; position: absolute; top: 370px; left: 0%; background-color: white; } #case4{ height: 30px; width: 160px; line-height: 30px; position: absolute; top: 370px; right: 0%; background-color: yellow; } Quelqu'un pourrait-il m'aider s'il vous plait? Merci!

arthezius · Answer

Si tu met un div dans le body et que tu le place en relative, il reste une marge autour.
Essai en absolute. Le bloc sera directement placé par rapport au bord de la fenêtre du navigateur.
J'ai déjà fait ce constat.

letsfire_89 · Answer

Ah merci! Je n'avais pas vu que j'avais laissé ma div id="corps" en relative!

Voici mon nouveau css corrigé:

div{
   text-align: center;
  }
  
#corps{
	   position: absolute;
	   top: 0px;
	   left: 0px;
	   right: 0px;
	   height: 400px;
	   line-height: 400px;
	   background-color: red;
	  }
	  
#case1{
	   height: 30px;
	   width: 160px;
	   line-height: 30px;
	   position: absolute;
	   top: 1px;
	   left: 1px;
	   background-color: blue;
	  }
	  
#case2{
	   height: 30px;
	   width: 160px;
	   line-height: 30px;
	   position: absolute;
	   top: 1px;
	   right: 1px;
	   background-color: green;
	  }
	  
#case3{
	   height: 30px;
	   width: 160px;
	   line-height: 30px;
	   position: absolute;
	   top: 369px;
	   left: 1px;
	   background-color: white;
	  }
	  
#case4{
	   height: 30px;
	   width: 160px;
	   line-height: 30px;
	   position: absolute;
	   top: 369px;
	   right: 1px;
	   background-color: yellow;
	  }

Un nouveau problème est apparu: les icônes du W3C en bas de ma page ne s'affichent plus!
Qu'est ce qu'il se passe?

arthezius · Answer

S'ils ne sont pas inclu dans le div corp, ils doivent se trouver caché sous le div.

letsfire_89 · Answer

En effet. 

Ca veut dire que tout ce qui suit ma div id="corps" doit être positionné de façon absolue pour éviter d'être engloutie par cette dernière?

arthezius · Answer

Si la hauteur du div corps est variable en hauteur, tu ne pourra pas placer les autres éléments suivant ce div.
Un placement en relative tiens compte des autres éléments pour la placement. Un placement en absolute n'en tiens plus compte.

Exemple:
Supposons que sur une page a ton div corps soit à 500px en hauteur. Tu vas donc placer l'élément du dessous à au moins 500px du haut de la page.
Si sur la page b, le div corp se retrouve à 600px, l'élément du dessous se retrouvera masqué.

La solution:
Une solution simple est de tout placer dans un div container qui sert à placer les éléments dans la page.
C'est celui-ci que tu va éventuellement centrer dans la page et que tu placera en absolute. Tout le reste viendra se placer à l'intérieur en relative.

letsfire_89 · Answer

Merci! Votre réponse était très claire.

SOLUTION:

Il faut mettre la div en position: absolute; et la "coller" avec top: 0px; par exemple.

Attention à la suite qui rique d'être cachée par cette même div. Dans ce cas, voir le message précédent.

Supp marge externe d'1 DIV dans 1 body [HTML]

6 réponses

Discussions similaires

Newsletters