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

Résolu
letsfire_89 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -  
letsfire_89 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -
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: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>TP6-ex2_2</title>  
        <link rel="stylesheet" media="screen" type="text/css" title="feuille1" href="ex2_2.css"/>
    </head>
    <body>
        <div id="corps">
			<div id="case1">
				 couleur de fond: bleu
			</div>
			<div id="case2">
				 couleur de fond: vert
			</div>
			<div id="case3">
				 couleur de fond: blanc
			</div>
			<div id="case4">
				 couleur de fond: jaune
			</div>
			couleur de fond: rouge
		</div>
        <p>
            <a href="http://validator.w3.org/check?uri=referer">
			    <img src="http://www.w3.org/Icons/valid-xhtml10"
                 alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
	        </a>
	        <a href="http://jigsaw.w3.org/css-validator/check/referer">
                <img style="border:0;width:88px;height:31px"
                 src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
                 alt="CSS Valide !"/>
            </a>
        </p>
    </body>
</html>


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!
A voir également:

6 réponses

Réponse 1 / 6
arthezius Messages postés 3538 Date d'inscription   Statut Membre Dernière intervention   475
 
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.
0
Réponse 2 / 6
letsfire_89 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   261
 
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?
0
Réponse 3 / 6
arthezius Messages postés 3538 Date d'inscription   Statut Membre Dernière intervention   475
 
S'ils ne sont pas inclu dans le div corp, ils doivent se trouver caché sous le div.
0
Réponse 4 / 6
letsfire_89 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   261
 
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?
0

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

Posez votre question
Réponse 5 / 6
arthezius Messages postés 3538 Date d'inscription   Statut Membre Dernière intervention   475
 
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.
0
Réponse 6 / 6
letsfire_89 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   261
 
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.
0

Discussions similaires

Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Barrette de RAM externe ca existe?
Stayms -
error404 -

16 réponses
Calculer une remise % par rapport à une % et une marge %
Kubynator -
Kubynator -

15 réponses
Qu'est-ce qu'un appel externe
Utilisateur anonyme -
baptiste -

19 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses