28172 sujets

CSS et mise en forme, CSS3

Marges automatiques et borders autoritaires... Mystère mystère...

Bonsoir à la communauté Alsacréations,

tout d'abord, si jamais une réponse a déjà été donnée pour ce genre de problème excusez m'en, j'ai fait ce que je pouvais pour ne pas avoir à poser de questions inutiles.

Bref !
Voila mon problème :

Le site doit s'adapter au dimensions de l'écran de l'utilisateur. Pour ça, j'ai naturellement choisi de définir la taille des DIV en % et de positionner le tout en relative pour plus de... d'harmonie, tout ça. (Et surtout de l'automatisme c'est quand même bien...)
Logique...

Jusque là, ça va. Voila les 5 DIV composant ma page, à savoir :
-Le DIV Heart, qui finalement, les englobe tous.
-Un DIV d'espacement par rapport au top de la page.
-Un DIV correspondant a un menu horizontal
-Un DIV conteneur, qui recevra le texte, les liens, bref, le corps.
-Un DIV bas, pour faire très simple, disons que c'est un pied de page.

Pour en venir au titre étrange de ce post, voila ce qu'il se passe.
Je définis les tailles de chacun en % donc pour la longueur (la largeur elle sera toujours maximum). Et là, sublime magie de l'élément inconu fouteur de mouerde je me retrouve avec des espace supplémentaires.
Il ne devrait y avoir aucun besoin de scrolling sur cette page, hors, et c'est le problème, un scrolling vertical apparaît alors que le décompte des tailles des DIV tombe pour éviter ça, à 100% pile.

Illustration : http://img709.imageshack.us/img709/9503/screen1o.png

Mais voila ! La vie est pleine de surprises, il suffit que pour cerner le problème j'ai envie de rajouter des border aux DIVs en question pour que, (mis à part la largeur des border qui rajoutent quelques pixels et donc font apparaître un scrolling) j'arrive finalement à un écran sans défilement horizontal ou vertical (en théorie puisse que je peux vérifier que si j'enlève les border). ^^

Illustration : http://img23.imageshack.us/img23/6889/screen2vl.png

Voici le HTML :

<body>
      <div id="Heart">
	     <div id="BlankTop">
	     </div>
	     <div id="BlockSup">
		    <div id="Draw">
			   <p>Affiche toi mouerde ! [lol]</p>
			</div>
			<div id="Titre">
			</div>
		 </div>
		 <div id="BlockCenter">
		    <div id="Menu">
			   <p>Affiche toi mouerde ! [lol]</p>
			</div>
			<div id="Text">
			</div>
		 </div>
		 <div id="BlockInf">
		    <div id="Degrad">
			   <p>Affiche toi mouerde ! [lol]</p>
			</div>
			<div id="text">
			</div>
			<div id="pub">
			</div>
		 </div>
	  </div>   
   </body>


Voici le CSS :

body
{
   width: 100%;
   height: 100%;
   margin: auto;
   
   position: absolute;
}

/* Le COEUR */

#Heart
{
   width: 100%;
   height: 100%;
   margin: 0px auto;
   
   position: relative;   
}

/* Les MAINS BLOCKS */

#BlankTop
{
   width: 100%;
   height: 8%;
   
   margin: 0px;
   border : solid black 1px;
   
   position: relative;
}

#BlockSup
{
   width: 100%;
   height: 17%;

   margin: 0px;
   border : solid black 1px;
   
   position: relative;
}

#BlockCenter
{
   width: 100%;
   height: 55%;
   
   margin: 0px;
   border : solid black 1px;

   position: relative;
}

#BlockInf
{
   width: 100%;
   height: 20%;
   
   margin: 0px;
   border : solid black 1px;

   position: relative;

   background-image:url("Images/Pieces/DiagBLACK.bmp");
   background-repeat: repeat;
}

/* BLOCK (Secondaires) */

#Degrad
{
   width: 100%;
   height: 36px;
   
   margin: 0px;
   border : solid black 1px;

   position: relative;

   background-image:url("Images/Pieces/DiagDEGRAD.bmp");
   background-repeat: repeat;
}


Sinon, j'ai tenté des tas de choses, mais globalement le bricolage ne m'a pas suffit là.
Si vous avez une petite idée pour supprimer ces marges automatiques...
Modifié par Shad R.D (08 Dec 2009 - 20:44)
Lorsque tu appliques une bordure à un bloc, évite de lui donner une largeur de 100 %. De même, les marges automatiques n'auront aucun effet lorsque la largeur est de 100 %.
C'est toujours bon à savoir merci. ^^

Mais dans mon cas, les bordures me servent juste à voir les block.
Mon problème est de savoir d'où vient ce rajout d'espace entre mes DIV qui fait apparaître un défilement vertical...
L'élément p a des marges par défaut (variables selon les navigateurs). Tu peux essayer de les supprimer.
p {
  margin: 0;
}
Merci Victor, tu viens de résoudre mon problème. ^^

Seulement, j'aimerai juste savoir, pour éviter de finir trop con, pourquoi quand on applique une bordure, les marge variables de p disparaissent ?
Avec ou sans bordure, si un élément a des marges (qu'elles soient là par défaut ou qu'elles soient définies en CSS), il a des marges. Autrement dit, les bordures n'ont aucune influence sur les marges.
Victor, c'était une très belle prose, mais j'ai bien peur qu'il existe une explication plus rationnelle.

a écrit :

http://www.w3.org/TR/CSS2/box.html
content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.
[...]

8.3.1 Collapsing margins
[...]

* Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.


En clair ta div à une marge de 0 + la marge du p qu'il contient. Tu as donc 100% de hauteur + la marge de ton p.
Mais dès que tu met une bordure alors les marges ne sont plus adjointes, le TB du parent empèche les deux TM de se toucher et donc de fusionner. Résultat, ton p est entièrement contenu dans ta div, les marges ne dépassent plus.
Modifié par publicaccount (09 Dec 2009 - 00:20)
Hum, je vois...
Il y avait donc bien une règle pernicieuse derrière tout ça.
Malgré ma maîtrise approximative, je me doutais bien que s'était pas une simple erreur. ^^'

Merci de ta réponse, j'ai du mal à tout saisir précisément, mais je vois, enfin, je pense, où tu veux en venir.
Sujet clos
Aller à