28172 sujets

CSS et mise en forme, CSS3

Qu'y a-t-il entre 0 et 1 ?

Bonjour,

Dans le contexte général d'une mise en page genre 3 colonnes flottant du tuto de florent, j'ai, dans le div central :

3ou4trucs
<div id="SUITE">
  	<h1 class="title_1">blahblah</h1>
        3ou4trucs
</div>
3ou4trucs

le CSS de title_1 n'est que du cosmétique, pour SUITE :

#SUITE{
	clear:both;
	position:relative;
	z-index:3;
	padding-top:10px;
        ...misc-cosmetics...}

Le comportement qui me trouble (testé sous Chrome, Firefox et Konqueror) est que

- Malgré le padding-top à 10px, l'espace entre le h1 et le haut de SUITE est d'une 30aine de px. Bon... pas grave...
- Si je réduis la valeur du padding-top jusqu'à 1px l'espace se réduit jusqu'à une 20aine de px. Bon... cohérent
- Maintenant si je passe de 1px à 0px... Badabeng! L'espace se réduit de la 20aine de px à : Néant. 0. Nul! Smiley eek
Modifié par aCOSwt (23 Mar 2016 - 09:48)
Bonjour aCOSwt,

Le navigateur applique des styles par défaut sur les balises de titres (H1 à H6). Les espacements et émargements en font partie. (tout ceci n'est pas exhaustif)

Dans ta feuille de style, appliques-tu une mise à zéro des propriétés sur ces balises ?

Autrement, il nous faudrait la publication de l'intégralité de ta feuille de style car il y aurait fort à parier que cela ne soit qu'une conséquence directe d'un héritage indésirable.

Tel quel, je ne vois pas d'autre piste.

aCOSwt a écrit :
du tuto de florent
Suis-je sensé le connaître ? Qui c'est ce florent ? Son tuto parle de quoi ? Smiley smile
Greg_Lumiere a écrit :
Dans ta feuille de style, appliques-tu une mise à zéro des propriétés sur ces balises ?

Certes non, tu as raison et ceci explique probablement que mes 10px initiaux en font 30.
Maintenant cela n'explique pas pourquoi le passage de 1 à 0 les annihilerait.
Greg_Lumiere a écrit :
il y aurait fort à parier que cela ne soit qu'une conséquence directe d'un héritage indésirable.

Je le crains maintenant quoi ? J'ai effacé une à une les propriétés des parents en interactif sous l'inpecteur de firefox et rien n'y fait.
Greg_Lumiere a écrit :
Suis-je sensé le connaître ? Qui c'est ce florent ? Son tuto parle de quoi ? Smiley smile

Smiley biggrin C'est bon... je l'ai retrouvé Ha tiens! Il ne s'appelle plus florent! Un effet de l'âge sans doute... Smiley lol

En tout cas, merci Greg_Lumière de t'être penché sur mon problème.
Modifié par aCOSwt (23 Mar 2016 - 12:20)
Merci pour le lien, j'y vois plus clair.

Important: Peux-tu éditer ce lien qui passe par le site http.com et qui renvoi vers une page blanche. Car là ça ressemble à du phishing et moi j'aime pas être pris pour un poisson Smiley lol .
Edit: Ca ne le fait plus, le lien renvoi directement sur l'article d'Alsas.

Concernant ton problème j'ai besoin que tu publie ton code (ici, sur jsFiddle, Codepen, site démo...).
Modifié par Greg_Lumiere (24 Mar 2016 - 09:37)
gcyrillus a écrit :
bonjour,
peut-etre s'agit-il de Fusion_des_marges...
un autre article ici aussi http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

Héhé! Bien vu gcyrillus et merci pour le lien. J'ai appris un truc que je ne connaissais pas.

Il doit bien y avoir de cela dans mon histoire... SAUF que... :
Si je comprends bien l'article de florent, appliqué à mon cas :
Fusion des marges => marge_apparente = Max(marge_SUITE,marge_H1) quand le Padding de SUITE = 0.
Dès que Padding !=0, j'ai marge_apparente = marge_SUITE+marge_H1

Sauf que... sur ce que je vois... : Padding=1 => marge_SUITE+marge_H1= 20px
ce qui mathématiquement implique que Max(marge_SUITE, marge_H1) est au minimum = 10.

Or... quand je met le padding de SUITE à 0, la marge apparente est de 0 et pas de 10.

Le mystère demeure donc. Mais en tous les cas merci pour la piste, il doit bien y avoir une histoire de fusion de marges quelque part.
Sujet clos
Aller à