18041 sujets

Questions générales et questions de débutants

KNACSS : meilleure solution pour min et max-width?

Bonjour,

Je n'ai pas beaucoup d'expérience en HTML/CSS - juste assez pour comprendre assez correctement comment "fonctionne" KNACSS.

Quel serait le meilleur moyen de fixer les largeurs min-width et max-width des blocs et containers (sans utiliser de valeurs en pixels)?
Je voudrais garder un layout assez fluide, mais sans utiliser les valeurs en pourcentage. En effet, j'aimerais éviter que mes blocs se réduisent trop (et se retrouvent avec des lignes qui contiennent trois mots) ou s'étendent trop (et se retrouvent avec des lignes interminables, comme sur Wikipédia).

J'ai bien entendu pensé aux EM. Cependant, utiliser les EM ne va-t-il pas avoir une influence sur la taille du texte??

Existe-t-il une solution?
Merci, et pardon pour mon mauvais francais.

Annelise Piersen
Salut Annelise,

Je n'ai pas (encore ?) utilisé KNACSS mais, dans l'absolu, tu peux bien évidemment utiliser les EM pour définir tes largeurs min et max.
Cela permet en effet de maintenir des largeurs cohérentes en fonction du texte (entre 30 et 40em, par exemple).
Cela n'aura pas d'incidence sur la taille du texte.
Par contre, forcément, la taille du texte modifiera ta largeur finale comme tu peux le voir ICI...

tm
tm™ a écrit :
Salut Annelise,

Je n'ai pas (encore ?) utilisé KNACSS mais, dans l'absolu, tu peux bien évidemment utiliser les EM pour définir tes largeurs min et max.
Cela permet en effet de maintenir des largeurs cohérentes en fonction du texte (entre 30 et 40em, par exemple).
Cela n'aura pas d'incidence sur la taille du texte.
Par contre, forcément, la taille du texte modifiera ta largeur finale comme tu peux le voir ICI...

tm


Merci, et c'est bien ce que je craignais: une interaction taille texte/taille de bloc Smiley sweatdrop

Les REM pourraient-ils m'aider?
Annelise a écrit :
Les REM pourraient-ils m'aider?


Oui, j'ai mis à jour l'exemple.
Mais ça restera quand même lié à la taille du texte de référence...
Ce qui est, me semble-t-il, l'intérêt de la chose ! Smiley cligne

tm
rodolpheb a écrit :
Bonjour,

Une petite ressource pour mieux comprendre : ici


Merci, mais je suis vraiment perdue Smiley rolleyes

Je connaissais les pros and cons des em / rem et pixels, mais je reste vraiment bloquée sur le meilleur moyen de fixer des min-width et max-width.

Si j'utilises des pixels, c'est un peu inutile alors d'utiliser des pourcentages et des em sur le reste du code, n'est-ce pas?

Les rem semblent les plus intéressants.

Quelqu'un a essayé de fixer la taille d'un wrapper avec des unités rem?

Encore merci et pardon pour le massacre de votre langue

Annelise Piersen
Administrateur
Bonjour,

si un div fait 20em de large, c'est 20em de sa taille de texte à lui (donc la taille de texte de html ou de body, les parents).
Ensuite si tu modifies la taille de texte (font-size) des p et hN en em, cela n'a AUCUNE incidence sur le parent.

Exemple rapide (sans accolades ni syntaxe correcte dsl) :
body
font-size: 100% /* soit 1em=16px à peu près partout */

div
width: 20em; /* correspond à une certaine valeur qui ne changera la largeur visible que si le font-size AU-DESSUS (parent) est modifié. On fait jamais ça une fois le projet lancé hein */

p
font-size: 0.853em; /* la taille de texte est modifiée. La largeur du bloc qui le contient ne l'est PAS (sachant que p a pour largeur "width: auto;" par défaut */
Felipe a écrit :
Bonjour,

si un div fait 20em de large, c'est 20em de sa taille de texte à lui (donc la taille de texte de html ou de body, les parents).
Ensuite si tu modifies la taille de texte (font-size) des p et hN en em, cela n'a AUCUNE incidence sur le parent.

Exemple rapide (sans accolades ni syntaxe correcte dsl) :
body
font-size: 100% /* soit 1em=16px à peu près partout */

div
width: 20em; /* correspond à une certaine valeur qui ne changera la largeur visible que si le font-size AU-DESSUS (parent) est modifié. On fait jamais ça une fois le projet lancé hein */

p
font-size: 0.853em; /* la taille de texte est modifiée. La largeur du bloc qui le contient ne l'est PAS (sachant que p a pour largeur "width: auto;" par défaut */


Oui oui, je crois que j'ai compris cette partie Smiley cligne

On vérifie.
Prenons un example de layout basique: wrapper et, dedans, header + menu horizontal + 2 colonnes + footer.

Si je ne fixe aucune taille de texte dans le wrapper et les div, mais que toutes mes tailles de texte sont gérées par des class (pour <p>, <h1>, <h2>... etc.), <body> va etre le parent global, non?? Smiley biggol

Idem si j'imbrique des <div> ? Smiley sweatdrop

Annelise
Modifié par Annelise (07 Jan 2013 - 14:39)
Oui.

Si tu fixes une largeur en em pour un élément, le em fait référence à la taille de texte de CET élément.
Cette taille peut-être définie (via font-size) ou héritée (de son/ses parent/s).

La taille de texte des enfants (dans ton cas p, h1, h2, ...) n'aura pas d'incidence sur la largeur du parent (puisque tu ne modifies pas la taille de texte de ce parent).

Concernant les div imbriquées, sans autre spécification, chaque block hérite de la taille de police de son parent. Les derniers parents étant <body> puis <html>...

tm
Sujet clos
Aller à