28217 sujets

CSS et mise en forme, CSS3

[Résolu] Propriété top

Bonjour,

J'ai du mal à comprendre la propriété top. Je m'explique, voici le code html :

<div id="bandeau_identification">
</div><!-- fin bandeau_identification -->
<div id="barre_outils">
</div><!-- fin barre_outils -->
<div id="visuel">
</div><!-- fin visuel -->
<div id="navigation">
</div><!-- fin navigation -->
<div id="pied_page">
</div><!-- fin pied_page -->

et le css :

#bandeau_identification { position: relative;
	width: 776px;
	height: 110px;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px; }

#barre_outils { position: relative;
	width: 776px;
	height: 33px;
	top: 7px;
	left: 0px;
	margin: 0px;
	padding: 0px; }

#visuel { position: relative;
	width: 776px;
	height: 129px;
	top: 14px;
	left: 0px;
	margin: 0px;
	padding: 0px; }

#navigation { position: relative;
	width: 776px;
	height: 20px;
	top: 21px;
	left: 0px;
	margin: 0px;
	padding: 0px;  }

#pied_page { position: relative;
	width: 776px;
	height: 27px;
	top: 28px;
	left: 0px;
	margin: 0px;
	padding: 0px; }

La question : pourquoi suis-je obligé de mettre 7px de plus à chaque top pour chaque bloc par rapport à son précédent pour obtenir au final un décalage de 7px entre chaque bloc (suis-je clair ?) ?
Ex :
1er top:0px
2ème top:7px
3ème top:14px
4ème top:21px
5ème top:28px
Au final : un décalage de 7px entre chaque bloc...

Un aperçu où l'on voit bien les 7px entre chaque bloc :
upload/7902-Sanstitre-1.jpg

Je n'arrive pas à bien suivre le fonctionnement de la propriété top.

Merci d'avance pour vos lumières.
Modifié par DrumSHoTS (12 Sep 2006 - 10:21)
Hum a écrit :
Salut,

c'est pas avec la propriété top que tu as des problèmes de compréhension mais avec le positionnement relatif..

positionnement relatif sur openweb


Je l'ai lu, mais cela ne m'apporte pas de réponses par rapport à ce positionnement en propriété top.

Pourtant, un léger paragraphe en parle :
a écrit :
Le positionnement relatif est hybride : par défaut, il laisse l'élément tel quel dans le flux. Cependant, permet de "décaler" cet élément dans le flux, mais uniquement si on donne une valeur à "top", "left", "right" ou "bottom", tout en le laissant dépendant des autres éléments positionnés.


Je reste sur ma faim.

Note : OpenWeb est innacessible.
Modifié par DrumSHoTS (23 Aug 2006 - 17:24)
Je voudrais pas etre imprécis voir te dire des conneries :

Qu'on me reprennes :

Ce décalage est normal, dans ton cas chaque element positionné l'est relativemment à celui au dessus de lui.

Relatif au premier parent positionné.

Tu devrais partir d'un exemple de mise en page de la FAQ.
C'est bon, j'ai tout repris, mais j'ai des soucis de float avec IE. Il refuse de bien compter les pixels et ajoute 1px pour chaque bordure, même si je passe les border à 0px. Du coup, j'ai un décalage de charte graphique entre IE et Firefox (Firefox respecte parfaitement les données que je lui donne).

Enfin, je vais essayer de trouver une solution.

A bientôt et merci.
Sujet clos
Aller à