28223 sujets

CSS et mise en forme, CSS3

Marge blanche indésirable autour d'images SVG + clarté du code

Bonjour !

Je suis en train de construire un site : https://thierry-jaspart.com/anything/

Sur mobile, un espace blanc d'un pixel apparaît autour des quatre images que l'on peut voir sur la capture d'écran jointe à ce message. Je n'ai pas trouvé de moyen de supprimer cet espace blanc.

Ma seconde question concerne le code CSS : https://thierry-jaspart.com/anything/css/style.css Est-il propre et ordonné ? J'ai besoin de le savoir parce que je vais en dévoiler une partie et j'ai envie que ça ait l'air un peu sérieux.

Merci d'avance !
Bonjour, passez votre code au validateur pour voir et corriger les erreurs de syntaxe => https://validator.w3.org/
Une image à deux attributs obligatoire, le src et le alt. Ce dernier sert à indiquer une description textuelle de l'image.
Si vous avez des sections dans votre page utiliser la balise <section>.
Je n'ai pas vu d'espace blanc d'un pixel entre grid.svg, strar.svg et halo.svg.
Modifié par casper2 (17 Aug 2025 - 18:06)
Bonjour,
comme le dit casper2, le validateur html et css permet de vérifier le respect des règles. Allez, je l'ai fait. Le css n'a pas d'erreurs, le html en a 37, mais elles sont redondantes 37 fois. D'une part 
Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

Il faut enlever les / à la fin de chaque ligne indiquée dans le validateur et se terminant par />. Il y en a 18. Ensuite, toujours comme le dit gasper2, il faut mettre des Alt sur toutes les images. Il y en a 13, je crois. Et donner des dimensions à ces images.
Les autres, une balise a pas refermée > et un "nesting rules". Un terme un peu barbare la première fois qu'on le rencontre. Je crois que le vice ici est dans le fait que la balise a n'est pas refermée sur la ligne :
<a href="https://www.youtube.com/watch?v=DHUl0OPOXA4" target="_blank"><img class="still" src="img/still.gif">

L'ajout de la fermeture de la balise a> va sans doute éliminer les deux erreurs suivantes.
Sinon, je ne vois pas nom plus d'espace de 1 px entre les images. 1 px, ce n'est pas très contraignant, de toute façon.
Un site avec autant d'images devrait renfermer la balise loading="lazy" sur toutes les images excepté celle au-dessus de la ligne de flottaison.
Travail tout cuit, c'est mon soir Smiley smile
Un tout grand merci ! Je corrige ça dès que j'ai le temps. Par contre, est-ce que le lazy uploading est nécessaire pour des images SVG qui ne pèsent pas grand chose ?
Avec SVG, c'est effectivement moins important. À toi de vérifier le poids de toutes les images d'une page et voir si ça vaut le coup. Sachant que loading="lazy" ne gêne en rien à être ajouté. De ce que je vois, la page est légère.
+ <html lang="fr"> dans le html.
Prévenir un modérateur
Répondre au sujet
Aller à