5568 sujets

Sémantique web et HTML

Formation Elephorm fsvch

Bonjour,

J'avais acheté la formation d'Elephorm de Florent Verschelde sur les bases de XHTML et CSS, et je suis tombé sur un cas pratique d'un site réalisé au cours de la formation mais il s'est passé un phénomène que je n'arrivais pas à le capter Smiley lol

En effet, on sait tous que la propriété Padding joue sur la largeur et la hauteur d'un contenu dès qu'on augmente le padding les propriétés Width et Height augmentent automatiquement ! or dans ma situation, quand j'ajoute du padding dans mon conteneur il réduit la largeur de mon contenu comme s'il fait une soustraction de largeur, quelqu'un a t-il la réponse ?

Au départ la largeur du contenu est de 616px, j'ai ajouté 20px de Padding sur les 4 cotés et je me suis retrouvé avec 576px au lieu de 616px + 20px de gauche+ 20px de droite du padding qui donnera 656px ??

voici l'aperçu du site avec mon test avec l'extension Firebug


Merci d'avance Smiley cligne upload/63251-a.PNG
Bonjour.

Ajouter un 'padding' ne change pas la valeur de 'width' mais la largeur réelle de la boite... dans le cas où 'le modèle de boite' reste celui par défaut et qu'il n'a pas été changé par la propriété box-sizing.

Si vous voulez retrouver le 'comportement normal', vous pouvez donner à cette boite la propriété :
box-sizing : content-box;


Smiley smile
Bonjour,

J'ai dû faire un effort pour comprendre ce phénomène et du coup je récapitule. Si on a deux DIV parent/enfant et qu'on a limité la largeur du DIV parent alors l'enfant automatiquement dépassera pas la largeur qu'il a héritée de son parent alors même en incluent la propriété padding elle sera appliqué sur la DIV enfant en soutrayant de sa largeur héritée.

Merci Zelena Smiley cligne
Administrateur
Bonjour,

vous avez inclus une CSS qui a modifié le "modèle de boîte", comme le fait entre autres KNACSS : https://github.com/alsacreations/KNACSS/tree/master/sass/library#L5-L12
Du modèle de boîte standard (standard au sens W3C du terme), vous êtes passé à celui d'IE/MS qui est très très utilisé maintenant.
Plus d'infos :
http://romy.tetue.net/modele-des-boites-css (en 2005, seule la version IE6 existait et avait par défaut ce modèle de boîte MS. Le souci n'était pas le modèle de boîte lui-même mais le fait qu'il soit activé par défaut... IE8, 11 et Edge ont bien changé la donne, ouf Smiley smile )
https://developer.mozilla.org/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte

Note : dans la capture d'écran je vois un doctype XHTML truc, vous pouvez tranquillement passer à HTML5 avec : <!doctype html> (maj/minuscules pour chacun des 2 termes, peu importe)
Bonjour,

Pourtant je n'utilise pas IE, je travaille sur Mozilla Firefox

Merci pour ta réponse Felipe
Sujet clos
Aller à