28113 sujets
CSS et mise en forme, CSS3
Bonjour,
"width: 100%" et "left: 0; right: 0" ne sont pas équivalents.
- width: 100% modifie la largeur de la zone de contenu d'un élément (et pas l'ensemble de l'élément)
- left et right ne s'appliquent qu'à des éléments *positionnés* (ici en position absolute)
Dans le 1er cas, si l'élément dispose de padding ou de border, il sera plus grand (plus de 100%) que son parent.
Enfin, transform ne modifie en rien la valeur de la propriété position.
"width: 100%" et "left: 0; right: 0" ne sont pas équivalents.
- width: 100% modifie la largeur de la zone de contenu d'un élément (et pas l'ensemble de l'élément)
- left et right ne s'appliquent qu'à des éléments *positionnés* (ici en position absolute)
Dans le 1er cas, si l'élément dispose de padding ou de border, il sera plus grand (plus de 100%) que son parent.
Enfin, transform ne modifie en rien la valeur de la propriété position.
Bonjour
Merci pour vos réponses , je lisais un article ( je ne retrouve pas le lien anglais ) sur les questions que j'ai posté sur ce forum dans le but d'avoir un avis différent ?. Me disant bien que le contexte/référence jouait un rôle pour le width ( sans parler box-sizing ...border-box ) .
Pour le transform, j'ai retrouvé le lien vers l'article qui parlait d'éric meyer . Le problème existe bien ( dans qu'elle contexte ? ... existe il encore en 2015 ? ) .
http://tinyurl.com/3l525da
Merci cordialement
Modifié par 75lionel (05 Feb 2015 - 19:05)
Merci pour vos réponses , je lisais un article ( je ne retrouve pas le lien anglais ) sur les questions que j'ai posté sur ce forum dans le but d'avoir un avis différent ?. Me disant bien que le contexte/référence jouait un rôle pour le width ( sans parler box-sizing ...border-box ) .
Pour le transform, j'ai retrouvé le lien vers l'article qui parlait d'éric meyer . Le problème existe bien ( dans qu'elle contexte ? ... existe il encore en 2015 ? ) .
http://tinyurl.com/3l525da
Merci cordialement
Modifié par 75lionel (05 Feb 2015 - 19:05)
Je pense que ce qui t’intéresse est ce qui s’appelle le containing block, en anglais - et c’est très bien expliqué par Vincent De Oliveira dans cet article.
La propriété transform, par exemple, peut créer un nouveau containing block pour un élément en position fixe (qui ne se référera donc plus au <html> mais à ce nouveau contexte).
Et si jamais ça ne répond pas à ta question, le reste de l’article pourra peut-être
La propriété transform, par exemple, peut créer un nouveau containing block pour un élément en position fixe (qui ne se référera donc plus au <html> mais à ce nouveau contexte).
Et si jamais ça ne répond pas à ta question, le reste de l’article pourra peut-être
merci , je connaissais le context block mais ma compréhension n était pas complète( BFC) . La compréhension du box-model ( en anglais) nécessite d'être très strict sur les mots utilisés et le contexte ( un peu comme javascript ou la variable this est le contexte) .
L article en question contient un lien invalide qui complète l article http://tinyurl.com/kzbq5br ( google est mon ami ) . Le width devrait s'appeler content-width mais .....pas possible de visualiser les limites ("edges") du "content" en utilisant background-color et en l' absence d'un "border " ( contenu de l élément) dans un navigateur ( tout à fait logique visuellement) . Il faut utiliser le debugger car la couleur de fond du "content" est aussi celle du padding !!
CSS padding : http://tinyurl.com/5494h
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
J'avais déjà posté une question sur le forum relatif a css lint et il me semble qu'au
sein de { *} , certains noms d 'attributs on une préséance ( ordre d' application ) par rapport à d 'autres au sein du même {*} du fait de leurs noms ou de leurs valeurs ("fonction" ?).Je n'ai pas trouvé beaucoup d'articles qui me permettraient d'écrire mes noms d'attribut CSS selon l ordre de préséance plutôt qu' alphabétique . Maintenant après re-lecture je pense à display > position > float > overflow .
forum alsa :
http://tinyurl.com/nolbbk8 ( mon ancien post)
http://tinyurl.com/lcdvma9
http://tinyurl.com/lj9osvz
http://tinyurl.com/oh2bd ( spec visual content )
lien externe :
lint http://csslint.net/
merci
Modifié par 75lionel (06 Feb 2015 - 13:57)
L article en question contient un lien invalide qui complète l article http://tinyurl.com/kzbq5br ( google est mon ami ) . Le width devrait s'appeler content-width mais .....pas possible de visualiser les limites ("edges") du "content" en utilisant background-color et en l' absence d'un "border " ( contenu de l élément) dans un navigateur ( tout à fait logique visuellement) . Il faut utiliser le debugger car la couleur de fond du "content" est aussi celle du padding !!
CSS padding : http://tinyurl.com/5494h
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
J'avais déjà posté une question sur le forum relatif a css lint et il me semble qu'au
sein de { *} , certains noms d 'attributs on une préséance ( ordre d' application ) par rapport à d 'autres au sein du même {*} du fait de leurs noms ou de leurs valeurs ("fonction" ?).Je n'ai pas trouvé beaucoup d'articles qui me permettraient d'écrire mes noms d'attribut CSS selon l ordre de préséance plutôt qu' alphabétique . Maintenant après re-lecture je pense à display > position > float > overflow .
forum alsa :
http://tinyurl.com/nolbbk8 ( mon ancien post)
http://tinyurl.com/lcdvma9
http://tinyurl.com/lj9osvz
http://tinyurl.com/oh2bd ( spec visual content )
lien externe :
lint http://csslint.net/
merci
Modifié par 75lionel (06 Feb 2015 - 13:57)