diff options
Diffstat (limited to 'files/fr/web/css/layout_cookbook/media_objects/index.html')
| -rw-r--r-- | files/fr/web/css/layout_cookbook/media_objects/index.html | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html index 418850ee25..8c2ca3ae1e 100644 --- a/files/fr/web/css/layout_cookbook/media_objects/index.html +++ b/files/fr/web/css/layout_cookbook/media_objects/index.html @@ -9,9 +9,9 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects --- <div>{{CSSRef}}</div> -<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p> +<p>Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p> +<p><img alt="" src="media-object.png"></p> <h2 id="Spécifications_sommaires">Spécifications sommaires</h2> @@ -27,10 +27,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <h2 id="Recette">Recette</h2> -<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p> <div class="note"> -<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p> </div> <h2 id="Choix_effectués">Choix effectués</h2> @@ -49,10 +49,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p> -<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> +<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p> <div class="note"> -<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p> +<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p> </div> <p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p> @@ -78,8 +78,8 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects <ul> <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">L'amélioration progressive et les grilles CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Utiliser les zones nommées des grilles</a></li> <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li> <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li> </ul> |