Voir la démo
padding-left
du ul
qui
sont en cause, mais aussi le fait que
box-content
n'est pas border-box
par défaut :
le padding de chaque li
s'ajoute à la largeur demandée !
Voir la solution
Voir la démo
display: inline-block
transforme le bloc en élément inline, c'est-à-dire qu'il se comporte plus ou moins comme un mot… en particulier les espaces dans le HTML autour de l'élément se voient dans le rendu. Ne pas utiliser inline-block
pour faire
de la mise en page précise ! Ici une solution est de mettre la taille de la police
à 0 dans le wrapper puis de la remettre à la taille voulue (typiquement 1rem
)
dans les blocs, mais c'est du bricolage…
Voir la solution
Voir la démo
a:hover
a pour spécificité 0,1,1
(1 sélecteur de catégorie « élément », 1 sélecteur de catégorie « classe »)
et .liste li a
a pour spécificité 0,1,2
(2 sélecteurs de catégorie « élément », 1 sélecteur de catégorie « classe »), c'est donc le second qui gagne quand les deux règles s'appliquent.
Pour que ça fonctionne comme on veut, le plus logique est de rendre les sélecteurs cohérents entre eux : .liste li a
et .liste li a:hover
par exemple. NB: ici le li
ne sert à rien, on pourrait aussi simplement l'enlever et changer l'ordre des règles, mais ce genre de choix dépend de tout le reste du CSS.
Voir la solution
Voir la démo
min-height
n'est pas considéré comme une valeur pour height
,
même si le résultat est le même !
Astuce : mettre html { height: 100%; }
permet de fixer librement la hauteur du body
en fonction de la hauteur de la fenêtre
(moins utile maintenant avec l'unité vh
).
Voir la solution
Voir la démo
Voir la solution
Voir la démo
text-decoration
s'applique sur tous les mots contenu dans l'élément, y
compris les éléments fils. Ce n'est pas un héritage classique. Voir MDN et cette explication.
Voir la solution
Voir la démo
background
sur le body
est un cas particulier, pour
des raisons de rétrocompatibilité. Il s'applique en fait à l'élément racine, sauf si
celui-ci a déjà un background
. Une solution est donc de mettre un fond blanc
à l'élément html
. Voir la spécification W3C.
Voir la solution
Voir la démo
vertical-align
d'un élément
inline-block
est baseline
inline-block
est celle de
sa dernière ligne de texte… sauf si elle est en overflow
autre que visible
!
Tout ça était abordé dans la page du cours consacrée à inline-block
et vertical-align
!
Solutions possibles :
vertical-align
des enfants. Avec
top
, middle
ou bottom
, le problème disparaît.
C'est la solution « propre ».1rem
, dans les enfants), la baseline se colle au bas
du conteneur (puisque les caractères ont une hauteur nulle, ils n'ont pas besoin de
place pour dépasser).Voir la solution
Voir la démo
La line-height
dans les items de la bannière est inférieure à 1,
donc le contenu est plus grand que la boîte. Habituellement ce n'est pas gênant,
mais comme c'est un lien en display:block
dans
un élément inline-block
, la surface cliquable dépasse de la boîte
(essayer d'enlever le display:block
du lien
ou le display:inline-block
de l'item,
et observer ce qui se passe). (NB : je ne sais pas ce qui justifie ce comportement
dans les spécs, mais je n'ai pas non plus trop cherché.)
C'est déjà embêtant, mais ici on a un problème plus grave : étant donné
que le bloc principal flotte, le lien qui est dedans est situé derrière la
zone cliquable du titre. C'est encore un problème d'interaction :
si on enlève le float:left
, le lien devient cliquable !
(NB : encore une fois, je ne sais pas ce qui justifie ce comportement
dans les spécs, mais je n'ai pas non plus trop cherché.)
Ce n'est cependant pas une solution propre, car le lien dépasse toujours,
même s'il n'empêche pas de cliquer sur les autres liens. Pour empêcher
la zone cliquable de dépasser du bloc, overflow:hidden
suffit.
Voir la solution
Voir la démo
div:hover::first-line
ne marche pas si div::first-line
n'est pas utilisé (c'est comme si le pseudo-élément n'était pas défini).
Voir cette réponse sur StackOverflow, mais elle n'explique rien : je ne comprends pas ce qui justifie ce comportement dans les spécs.
(On ne peut pas qualifier ça de piège classique, mais pour débugger du CSS il faut prendre l'habitude de se préparer à toutes les possibilités !)
Voir la solution
margin
ou un padding
fait
référence à la largeur de l'élément parent… y compris les marges et paddings verticaux ! (spéc W3C)display:table-cell
et vertical-align:middle
permet de centrer son contenu
verticalement, mais attention: ça ne fonctionnera pas si le conteneur est position absolute
ou fixed
, ou s'il flotte,
car son display
sera automatiquement considéré comme block
(spéc W3C)