28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous
J'ai un problème de CSS que je n'arrive pas à traiter.
Dans la page http://tests.osirisnet.net/migration/manuals/correspondance.html j'ai mis un tableau qui montre la correspondance entre les styles de sous-titres "à l'ancienne" et "New look".
La hiérarchie des feuilles de style est un eu complexe, puisqu'il s'agit de référencer la feuille des "anciens styles" et également celle des "nouveaux styles"; plus des spécificités de cette page particulière.
Tout s'affiche conformément à mes désirs, sauf sur un point: les "padding" n'ont pas l'air d'être pris en compte.
Sous FireBug, je trouve l'analyse suivante qui me remplit de perplexité:

padding-right	0px                                  /* résultat du calcul */
    section .title.level2 h2	0.25em	docPages.css (ligne 103)
    *	0px	                        common.css (ligne 34)

La règle qui devrait l'emporter est spécifique à cet environnement: padding:0.25em. La règle précédente est une simple "remise à zéro" qui tente de supprimer les valeurs par défaut introduites par les navigateurs qui sèment la pagaille dans les pages.
Je ne comprends pas comment FF donne un résultat de calcul = 0 alors qu'il indique clairement que la feuille CSS qui "l'emporte" est la feuille docPage .css qui donne la valeur escomptée: 0.25em

Quelqu'un pourrait il m'aider à comprendre ce qui se passe?
Merci de votre aide.
Modifié par PapyJP (22 Jul 2016 - 10:43)
Modérateur

section .title h2 {
    display: inline-table;
}

Il n'y a pas de padding sur un block en contexte «table» donc il vaut forcément 0

inline-block devrait donner le résultat escompté.
kustolovic a écrit :

section .title h2 {
    display: inline-table;
}

Il n'y a pas de padding sur un block en contexte «table» donc il vaut forcément 0

inline-block devrait donner le résultat escompté.

Excellente explication du phénomène, mais je tiens à ce que la taille des h2 s'adapte à leur contenu, donc inline-block ne convient pas.
Une idée pour traiter le problème sans ajouter de HTML? (par exemple un <span> qui, lui, pourrait avoir un padding)
Administrateur
PapyJP a écrit :

Excellente explication du phénomène, mais je tiens à ce que la taille des h2 s'adapte à leur contenu, donc inline-block ne convient pas.

C'est justement le cas des inline-block. Tu as testé ?
Raphael a écrit :

C'est justement le cas des inline-block. Tu as testé ?

Il faut croire que non!
Merci 1000 fois! j'ai encore appris quelque chose.
Comme quoi on n'apprend que de ses erreurs... et des gens qui vous les expliquent!
Modifié par PapyJP (22 Jul 2016 - 12:44)
Administrateur
Pour aller plus loin encore, sache que cela devrait fonctionner avec toutes les valeurs de type "inline", donc :
- inline
- inline-block
- inline-table
- inline-flex
- inline-grid

(eh oui il y en a pas mal Smiley cligne )

Le plus problématique dans ton cas est effectivement "inline-table" car il n'accepte pas les padding.
Modifié par Raphael (22 Jul 2016 - 17:09)
Raphael a écrit :
Le plus problématique dans ton cas est effectivement "inline-table" car il n'accepte pas les padding.

J'ai relu les documents dont je pouvais disposer sur le Web, je n'ai vu nulle part dette histoire de padding mise en évidence.
Ça doit faire partie de ces choses qu'on n'écrit pas parce que "tout le monde le sait".... Smiley smile
Administrateur
Je n'ai que mon smartphone sur moi, mais l'information doit certainement se trouver dans les spécifications du modèle de tableau.

C'est au même endroit que l'on va retrouver les propriétés spécifiques à ce modèle, tel que les cellspacing, cellpadding, border-spacing, etc.

Un display:inline-table n'est rien d'autre qu'un tableau, CSSment parlant Smiley cligne
Raphael a écrit :
Un display:inline-table n'est rien d'autre qu'un tableau, CSSment parlant Smiley cligne

... et un tableau n'est qu'une structure de conteneur.
L'un des gros ennuis du HTML c'est qu'on en arrive à dire "display:table" pour dire "ajuste la taille au contenu" comme on en était arrivé à dire "<h4>" pour dire "un bloc de texte de taille standard en gras avec un double espacement". C'est à dire qu'on utilise les effets de bord des balises au lieu de comprendre réellement ce qu'on fait.
Pas facile de remettre les choses à plat.
La plupart des documents sont faits dans le sens "voici ce que fait telle balise ou telle propriété", il faudrait un document dans l'autre sens "comment obtenir tel résultat", mais rien que pouvoir exprimer la liste des "résultats" qui nous intéressent est une tâche très difficile....