|
|
|
wiki:syntaxwrap [2017/12/03 11:59]
Amalya créée |
wiki:syntaxwrap [2017/12/03 12:10] (Version actuelle)
Amalya [Colonnes et Floats] |
| |
| <WRAP column 30%> | <WRAP column 30%> |
| //**__Different Floating Options__**// | //**__Différentes options de "float"__**//(("//Float//" pourrait se traduire en français par "flotteur" mais ici, c'est un mot qui se référence à un aspect technique bien particulier, propre aux pages web, où les boîtes "flottent" les unes après les autres ; le mot anglais est gardé pour éviter plus de confusion.)) |
| |
| Normally you would only need the class ''column'', but for more sophisticated uses (not only for columns, but for any other classes, like [[#boxes and notes]] as well) you can have several kinds of "floats": | Normalement, vous n'avez besoin que de la classe'' column'', mais pour des utilisations plus sophistiquées (pas seulement pour les colonnes, mais pour toutes les autres classes, comme[[#boxes et notes]]), vous pouvez avoir plusieurs types de "floats": |
| |
| * **''column''** is the same as ''left'' in LTR languages and the same as ''right'' in RTL languages | * **''column''** est la même chose que ''left'' dans les langues se lisant de gauche à droite et ''right'' dans les langues se lisants de droite à gauche. |
| * **''left''** will let you float your wrap on the left | * **''left''** Permet de faire flotter le wrap à gauche. |
| * **''right''** will let the wrap float right | * **''right''** Permet de faire flotter le wrap à droite. |
| * **''center''** will position the wrap in the horizontal center of the page | * **''center''** positionne le wrap au centre (horizontal) de la page. |
| |
| </WRAP> | </WRAP> |
| |
| <WRAP column 30%> | <WRAP column 30%> |
| //**__Widths__**// | //**__Largeur__**// |
| |
| You can set any valid widths (but only on divs): ''%, px, em, ex, pt, pc, cm, mm, in'', but most of the time you'd only want either | Vous pouvez définir toutes les largeurs valides (mais seulement sur divs): ''%, px, em, ex, pt, pc, cm, mm, in''. Mieux vaut n'utiliser qu'une de ces valeurs ; favoriser ''%'' et ''em'' pour éviter les problèmes de redimensionnement sur les écrans plus petits. |
| |
| ^type^e.g.^note^ | ^type^e.g.^note^ |
| ^''%''|''30%''|makes sense in a liquid layout| | ^''%''|''30%''|a du sens dans une disposition liquide| |
| ^''px''|''420px''|makes sense if your layout has a fixed pixel width or if your container contains images with a certain width| | ^''px''|''420px''|est utile si votre mise en page a une largeur de pixel fixe ou si votre conteneur contient des images d'une certaine largeur.| |
| ^''em''|''20em''|makes sense if you like your wrap container to grow and shrink with the font size or if your layout is em-based| | ^''em''|''20em''|a du sens si vous aimez que votre conteneur d'emballage grandisse et rétrécisse avec la taille de police ou si votre mise en page est basée sur em| |
| | |
| | Un ***tableau** à l'intérieur d'une colonne ou d'une case sera toujours à **100% large**. Ceci rend possible le positionnement et le dimensionnement des tableaux. |
| |
| A **table** inside a column or box will always be **100% wide**. This makes positioning and sizing tables possible. | |
| |
| </WRAP> | </WRAP> |
| |
| <wrap em>After using any of the float classes, you might come across something like this, where the following text protrudes into the space where only the floating containers should be ...</wrap> | <wrap em>Après avoir utilisé l'une des classes de float, vous pourriez rencontrer quelque chose comme ceci, où le texte suivant dépasse dans l'espace où seuls les conteneurs flottants devraient être.... |
| | </wrap> |
| |
| <WRAP clear></WRAP> | <WRAP clear></WRAP> |
| |
| ... to prevent that, you should simply add | ... pour empêcher cela, vous devriez simplement ajouter après votre dernière colonne : |
| <WRAP clear></WRAP> | <WRAP clear></WRAP> |
| after your last column. | |
| |
| | Vous ***pouvez** utiliser les mêmes options avec des spans((Ça aussi c'est du langage web qui perd du sens en traduisant en français...)) (comme chaque élément qui flotte est automatiquement un élément de niveau de bloc), mais cela n' a probablement pas trop de sens. :!Les largeurs sur les travées ne fonctionnent normalement pas (par conception), mais peuvent avoir un sens lorsqu'elles sont flottantes. |
| You **can** use the same options with spans (as each element that floats is automatically a block level element), but it probably doesn't make too much sense. :!: Widths on spans normally do not work (by design), but can make sense, when it is floating. | You **can** use the same options with spans (as each element that floats is automatically a block level element), but it probably doesn't make too much sense. :!: Widths on spans normally do not work (by design), but can make sense, when it is floating. |
| |
