diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-05 15:44:38 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-05 15:44:38 +0100 |
| commit | 79843297a1d97045c504575ab9a6a29b3af8ffae (patch) | |
| tree | ac5d42490285f37fb933ca83034505ecdd784dc9 /files/fr/conflicting/learn/css | |
| parent | 086e7141b8da9a5c008353582b8f72d7b5cda5b4 (diff) | |
| download | translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.gz translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.bz2 translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.zip | |
Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851)
* Fixes #2842 for CSS pages
* Fixes #2842 for Web API pages
* Fixes #2842 for other sections
* Fix EmbedLiveSample for moved CSS page
* Fixes #2842 for conflicting / orphaned docs
Diffstat (limited to 'files/fr/conflicting/learn/css')
| -rw-r--r-- | files/fr/conflicting/learn/css/building_blocks/selectors/index.html | 138 | ||||
| -rw-r--r-- | files/fr/conflicting/learn/css/css_layout/introduction/index.html | 405 |
2 files changed, 0 insertions, 543 deletions
diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 6f8167820f..0000000000 --- a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Les propriétés CSS et comment s'en servir -slug: conflicting/Learn/CSS/Building_blocks/Selectors -tags: - - Beginner - - CSS - - CodingScripting - - NeedsActiveLearning -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Learn/CSS/CSS_properties -original_slug: Apprendre/CSS/Les_propriétés_CSS ---- -<div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> -<p>{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</p> -</div> - -<table class="learn-box nostripe standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Comprendre les bases de {{Glossary("HTML")}}, <a href="/fr/Apprendre/HTML/Balises_HTML">des éléments HTML</a>, et <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_link">comment lier des documents HTML aux feuilles de style CSS</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.</td> - </tr> - </tbody> -</table> - -<p>Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).</p> - -<p>La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.</p> - -<pre class="brush: css">p { - font-family: "Times New Roman", georgia, sans-serif; - font-size: 24px; -}</pre> - -<p>Dans l'exemple précédent, <code>p</code> est un sélecteur qui applique un style à tous les éléments <code>{{HTMLElement("p")}}</code> en même temps. Les propriétés CSS <code>font-family</code> et <code>font-size</code> sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.</p> - -<p>Il existe plus de <a href="/fr/docs/Web/CSS/Reference">250 propriétés</a> pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.</p> - -<h2 id="Pédagogie_active">Pédagogie active</h2> - -<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> - -<h2 id="Aller_plus_loin">Aller plus loin</h2> - -<p>Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.</p> - -<p>Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les <a href="/fr/docs/Web/CSS/Spécificité">sélecteurs les plus précis</a> prend le dessus sur les règles avec les sélecteurs plus basiques.</p> - -<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3> - -<p>Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.</p> - -<p>Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :</p> - -<pre class="brush: html"><h1>Je suis un exemple.</h1> -<p>Dans cet exemple, je suis un paragraphe.</p> -<p>Et je suis un second paragraphe.</p> -</pre> - -<p>Dans la règle CSS qui suit, le sélecteur d'élement <code>p</code> applique les styles définis à tous les éléments <code>{{HTMLElement("p")}}</code> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).</p> - -<pre class="brush: css">p { - font-family: "Helvetica", Arial, sans-serif; - font-size : 12px; -}</pre> - -<p>La prochaine règle CSS s'applique uniquement à l'élément<code> {{HTMLElement("h1")}}</code>. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.</p> - -<pre class="brush: css">h1 { - font-size : 24px; - font-weight: bold; -}</pre> - -<p>La règle CSS suivante applique les styles demandés à la fois aux éléments <code>{{HTMLElement("h1")}}</code> et aux éléments <code>{{HTMLElement("p")}}</code>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des <code>h1</code> et à celui des paragraphes.</p> - -<pre class="brush: css">h1, p { - color: darkmagenta; -}</pre> - -<p>Voici le résultat obtenu avec ce code :</p> - -<p>{{EmbedLiveSample('Le_sélecteur_d\'élément')}}</p> - -<h3 id="Le_sélecteur_id">Le sélecteur <code>id</code></h3> - -<p>L'attribut <code>id</code><strong> </strong>d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur <code>id</code> est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.</p> - -<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p> - -<pre class="brush: html"><p id="coucou">Coucou monde !</p> </pre> - -<p>La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur <code>id</code>, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (<em>id</em>). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe, {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.</p> - -<pre class="brush: css">#coucou { - text-align: center; - border : 1px solid black; - padding : 8px; -}</pre> - -<p>Voici le résultat final obtenu:</p> - -<p>{{EmbedLiveSample('Le_sélecteur_id')}}</p> - -<h3 id="Le_sélecteur_class">Le sélecteur <code>class</code></h3> - -<p>À l'intérieur du code HTML, l'attribut <code>class</code><strong> </strong>permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.</p> - -<p>Pour notre prochain exemple, analysez le fragment de code HTML suivant :</p> - -<pre class="brush: html"><h1 class="coucou">Coucou !</h1> -<p class="coucou salut">Retrouvons-nous !</p> -<p class="salut">Et déplaçons des montagnes.</p> -</pre> - -<p>Nous allons appliquer une règle CSS à tous les éléments contenant la classe <code>coucou</code>. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.</p> - -<pre class="brush: css">.coucou { - font-style: italic; -}</pre> - -<p>En voici une autre pour tous les éléments avec la classe <code>salut</code>. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.</p> - -<pre class="brush: css">.salut { - text-decoration: line-through; -}</pre> - -<p>Voici le résultat obtenu :</p> - -<p>{{EmbedLiveSample('Le_sélecteur_class')}}</p> - -<h2 id="Prochaines_étapes">Prochaines étapes</h2> - -<p>Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en <a href="/fr/Apprendre/CSS/formatage_texte_CSS">apprendre davantage sur le formatage du texte</a> ou commencer à explorer <a href="/fr/docs/Web/CSS/Tutorials">nos tutoriels CSS</a> dès maintenant.</p> diff --git a/files/fr/conflicting/learn/css/css_layout/introduction/index.html b/files/fr/conflicting/learn/css/css_layout/introduction/index.html deleted file mode 100644 index 4c66ddf62d..0000000000 --- a/files/fr/conflicting/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: La disposition en CSS -slug: conflicting/Learn/CSS/CSS_layout/Introduction -tags: - - Apprendre - - CSS -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout -original_slug: Apprendre/CSS/Introduction_à_CSS/La_disposition ---- -<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p> - -<p class="summary"><span class="seoSummary">Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément.</span> CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.</p> - -<p>Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..</p> - -<h2 id="Le_flux">Le flux</h2> - -<p>Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p> - -<p>Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :</p> - -<ul> - <li>Certains éléments suivront simplement le flux, comme s'ils n'existaient pas</li> - <li>Certains éléments pourront forcer le passage à la ligne, que le texte ait atteint la limite du document ou non</li> - <li>Certains éléments pourront créer un nouveau flux de texte pour leur contenu, flux indépendant du flux de texte « extérieur ».</li> -</ul> - -<h3 id="Les_catégories_d'affichage_des_éléments">Les catégories d'affichage des éléments</h3> - -<p>CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :</p> - -<dl> - <dt><code>none</code></dt> - <dd>Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.</dd> - <dt><code>inline</code></dt> - <dd>Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.</dd> - <dt><code>block</code></dt> - <dd>Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîte</a>.</dd> - <dt><code>inline-block</code></dt> - <dd>Cette valeur est en quelque sorte un intermédiaire entre <code>inline</code> et <code>block</code>. Comme avec <code>inline</code>, les boîtes seront placées dans le flux global mais , comme avec <code>block</code>, le contenu ne fera pas partie du texte environnant..</dd> -</dl> - -<p>Prenons un exemple.</p> - -<p>Voici le code HTML qui sera utilisé :</p> - -<pre class="brush: html"><p class="none"> - 1. Je suis un chat noir, - <span>qui marche sous l'échelle </span> - et qui casse des miroirs. -</p> - -<p class="inline"> - 2. Je suis un chat noir, - <span>qui marche sous l'échelle </span> - et qui casse des miroirs. -</p> - -<p class="block"> - 3. Je suis un chat noir, - <span>wqui marche sous l'échelle </span> - et qui casse des miroirs. -</p> - -<p class="inline-block"> - 4. Je suis un chat noir, - <span>qui marche sous l'échelle </span> - et qui casse des miroirs. -</p> -</pre> - -<p>On appliquera la feuille de style CSS suivante :</p> - -<pre class="brush: css">span { - width: 5em; - background: yellow; -} - -.none span { display: none; } -.inline span { display: inline; } -.block span { display: block; } -.inline-block span { display: inline-block; }</pre> - -<p>Cela fournira le résultat suivant :</p> - -<p>{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}</p> - -<h2 id="Modifier_le_flux">Modifier le flux</h2> - -<p>En utilisant la propriété <code>display</code>, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.</p> - -<h3 id="La_disposition_du_texte">La disposition du texte</h3> - -<p>En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.</p> - -<p>Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.</p> - -<p>À l'exception de <code>text-align</code> et de <code>text-indent</code>, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à <code>vertical-align</code>, il est souvent utilisé avec des boîtes en mode <code>inline-block</code>.</p> - -<p>Là encore, un exemple vaut mieux qu'un long discours.</p> - -<p>HTML :</p> - -<pre class="brush: html"><p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> -<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> -</pre> - -<p>CSS :</p> - -<pre class="brush: css">.format { - /* On « tire » la première ligne sur - une distance de 2em */ - text-indent: -2em; - - /* Il faut compenser l'indentation négative - si on veut éviter que du texte saute et - pour garder l'ensemble du texte dans la - boîte de l'élément */ - padding-left: 2em; - - /* Le texte est aligné par rapport aux deux - bords et l'espace entre les mots est ajusté - pour le remplissage de la ligne */ - text-align: justify; - - /* La dernière ligne de texte du bloc est - centrée*/ - -moz-text-align-last: center; - text-align-last: center; - - /* Plutôt que le saut de ligne se fasse entre deux mots, - il peut être fait en découpant un mot, selon les règles - de la langue utilisée. Cela permet de découper le texte - clairement avec un trait d'union. Si cela ne vous - importe pas, vous pouvez utiliser word-break ou - word-wrap à la place */ - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -}</pre> - -<div class="note"> -<p><strong>Note :</strong> Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.</p> -</div> - -<p>Le résultat obtenu sera :</p> - -<p>{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}</p> - -<div class="note"> -<p><strong>Note :</strong> L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.</p> -</div> - -<h3 id="Le_flottement">Le flottement</h3> - -<p>C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.</p> - -<h4 id="Le_flottement_simple">Le flottement simple</h4> - -<p>HTML :</p> - -<pre class="brush: html"><div> - <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p> - <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p> -</div></pre> - -<p>CSS :</p> - -<pre class="brush: css">.excerpt { - /* Une boîte flottante agira comme un bloc - quelle que soit la valeur de display */ - display: block; - - /* La boîte flottera à gauche ce qui signifie - qu'elle sera sur la partie gauche du bloc - englobant et que le texte « coulera » sur sa - droite. */ - float: left; - - /* Il est nécessaire de déclarer une largeur pour - une boîte flottante. Si on ne le fait pas, la - largeur sera calculée automatiquement et occupera - autant d'espace que possible. Cela aurait eu le - même effet qu'un bloc ordinaire. */ - width: 40%; - - /* On définit une marge à droite et en bas pour éviter - que le texte qui flotte autour soit collé à celui de - la boîte */ - margin: 0 1em 1em 0; - - /* On rend la boîte flottante plus visible avec une - oucleur d'arrière-plan */ - background: lightgrey; - - /* Puisque l'arrière-plan est opaque, on ajoute un écart - entre le contenu et les bords de la boîte */ - padding: 1em; -}</pre> - -<p>Ces éléments permettront d'avoir :</p> - -<p>{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}</p> - -<h4 id="Organiser_une_disposition_avec_le_flottement">Organiser une disposition avec le flottement</h4> - -<p>La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.</p> - -<p>Là encore, illustrons le point avec un exemple.</p> - -<p>HTML :</p> - -<pre class="brush: html"><div class="layout"> - <div class="row"> - <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p> - <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p> - </div> - <div class="row"> - <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p> - </div> - <div class="row"> - <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p> - <p class="cell size33"> - "Ding, dong!"<br> - "A quarter past," said Scrooge, counting.<br> - "Ding, dong!"<br> - "Half-past!" said Scrooge.<br> - "Ding, dong!"<br> - "A quarter to it," said Scrooge. - </p> - <p class="cell size33"> - "Ding, dong!"<br> - "The hour itself," said Scrooge, triumphantly, "and nothing else!"<br> - He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn. - </p> - </div> -</div></pre> - -<p>CSS :</p> - -<pre class="brush: css">/* Le conteneur principal pour la disposition */ -.layout { - /* On ajoute un arrière-plan pour le rendre - visible */ - background: lightgrey; - - /* On ajoute un léger interstice pour harmoniser - la distance entre le contenu des cellules et - la bordure du conteneur principal */ - padding : 0.5em; -} - -/* Ici, on empêche les boîtes flottantes de - dépasser d'un conteneur (ce qui peut arriver - si le conteneur est vide car il aura alors - une hauteur nulle). Avec overflow - hidden, la boîte flottante ne passera pas à - travers et la boîte parente sera agrandie - pour éviter un dépassement de la boîte. */ -.row { - overflow: hidden; -} - -/* Chaque cellule sera une boîte flottante à gauche */ -.cell { - float : left; - - /* On ajoute du padding pour créer un écart visuel - entre les cellules */ - padding : 0.5em; - - /* Étant donné qu'on ajoute du padding, il faut - s'assurer que cela ne touchera pas la largeur - de la boîte. */ - box-sizing: border-box; - - /* Comme la marge ne peut pas être contrôlée par - la propriété box-sizing, on s'assure d'en - avoir aucune appliquée ici. */ - margin : 0; -} - -/* Voici les tailles appliquées aux boîtes */ -.size33 { width: 33%; } /* Pas un tiers mais presque */ -.size50 { width: 50%; } /* Une moitié */ -.size100 { width: 100%; } /* Une ligne */</pre> - -<p>Cela donnera le résultat suivant :</p> - -<p>{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}</p> - -<p>De nombreux <em>frameworks</em> CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, <a href="http://www.positioniseverything.net/articles/onetruelayout/">les boîtes flottantes sont étudiées depuis longtemps (article en anglais)</a> et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.</p> - -<p>Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> (en anglais) par Chris Coyer.</p> - -<h3 id="Le_positionnement">Le positionnement</h3> - -<p>Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.</p> - -<p>La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :</p> - -<dl> - <dt><code>static</code></dt> - <dd>La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.</dd> - <dt><code>relative</code></dt> - <dd>Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.</dd> - <dt><code>absolute</code></dt> - <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0 représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que <code>static</code>. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.</dd> - <dt><code>fixed</code></dt> - <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).</dd> -</dl> - -<p>Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.</p> - -<p>Une dernière fois, prenons un exemple pour illustrer le concept.</p> - -<p>Le code HTML pour le document sera :</p> - -<pre class="brush: html"><p> - The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow. - <span class="topleft">1</span> -</p> -<p class="relative"> - It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm. - <span class="topleft">2</span> - <span class="stackdown">3</span> - <span class="stackup">4</span> -</p></pre> - -<p>La feuille de style CSS sera :</p> - -<pre class="brush: css">p { - margin: 1em -} - -span { - font : 2em sans-serif; - width : 6rem; - - /* Avoir la hauteur de l'élément et la hauteur - de la ligne avec la même valeur permet de - centrer verticalement une ligne de texte. */ - height : 6rem; - line-height: 6rem; - - text-align : center; - background : rgba(0, 255, 255, 0.8); -} - -.relative { - position: relative; -} - -/* Tous les éléments de la classe "topleft" - sont positionnés dans le coin en haut à - gauche de leur parent dans le contexte - de positionnement */ -.topleft { - position: absolute; - top : 0; - left : 0; -} - -.stackup { - position: absolute; - top : 37%; - left : 62%; - - /* Tous les éléments de la classe "stackup" - sont placés au-dessus des éléments dont - le z-index est inférieur à 2 dans le même - contexte de positionnement. */ - z-index : 2; -} - -.stackdown { - position: absolute; - top : 50%; - left : 66%; - - /* Tous les éléments de la classe "stackdown" - sont placés sous les éléments dont le - z-index est supérieur à 1 dans le même - contexte de positionnement. */ - z-index : 1; -} -</pre> - -<p>La combinaison de ces deux éléments donnera le résultat suivant :</p> - -<p>{{EmbedLiveSample('Le_positionnement', '100%', '400')}}</p> - -<p>Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> (en anglais), de Noah Stokes.</p> - -<h2 id="La_suite">La suite</h2> - -<p>Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder <a href="/fr/docs/Apprendre/CSS/Comment">les aspects pratiques de CSS</a>. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, <a href="/fr/docs/Web/CSS/Colonnes_CSS3">l'organisation à plusieurs colonnes</a> et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">la disposition avec les boîtes flexibles (<em>flexbox</em>)</a>.</p> - -<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p> |