[Fr]replace broken element styles with images on clientHeight page (#1974)

* replace broken element styles with images

* Updates page vs en-US

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 42 insertions, 86 deletions

diff --git a/files/fr/web/api/element/clientheight/index.html b/files/fr/web/api/element/clientheight/index.html
index 820b06e770..3e88e1a801 100644
--- a/files/fr/web/api/element/clientheight/index.html
+++ b/files/fr/web/api/element/clientheight/index.html
@@ -1,93 +1,49 @@
 ---
-title: element.clientHeight
+title: Element.clientHeight
 slug: Web/API/Element/clientHeight
-tags:
-  - Référence_du_DOM_Gecko
 translation_of: Web/API/Element/clientHeight
+browser-compat: api.Element.clientHeight
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie la hauteur intérieure d'un élément en pixels. Celle-ci comprend les marges intérieures éventuelles (padding), mais ni la barre de défilement horizontale, ni les bordures ,ni les marges extérieures (margin).</p>
-<p><code>clientHeight</code> peut être calculée comme la propriété CSS <code>height</code> + la propriété CSS <code>padding</code> - la hauteur de la barre de défilement horizontale (si présente).</p>
-<h3 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h3>
-<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight;
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <strong><code>Element.clientHeight</code></strong> vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (<i lang="en">padding</i>) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.</p>
+
+<p><code>clientHeight</code> peut être calculée comme : <em>hauteur CSS</em> + <em>remplissage CSS</em> - <em>hauteur des barres de défilement horizontales</em> s'il y en a.</p>
+
+<p>Lorsque <code>clientHeight</code> est utilisée sur l'élément racine (l'élément <code>&lt;html&gt;</code>), (ou sur <code>&lt;body&gt;</code> si le document est en mode de compatibilité (<i lang="en">quirks mode</i>)), c'est la hauteur de la zone d'affichage (<i lang="en">viewport</i>) (sans tenir compte des barres de défilement) qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">Il s'agit ici d'un cas aux limites pour <code>clientHeight</code></a>.</p>
+
+<div class="note">
+  <p><strong>Note :</strong> Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser <a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>element.getBoundingClientRect()</code></a>.</p>
+</div>
+
+<h2 id="syntax">Syntaxe</h2>
+
+<pre class="brush: js">
+var intElemClientHeight = element.clientHeight;
 </pre>
-<p><var>h</var> est un entier représentant la valeur <code>clientHeight</code> de l'élément <var>element</var> en pixels. <code>clientHeight</code> est une propriété en lecture seule.</p>
-<h3 id="Exemple" name="Exemple">Exemple</h3>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>LA CHOUETTE<br>
-   <br>
-   Tel un fantôme dans la nuit<br>
-   Elle s'envole sans un bruit<br>
-   C'est la silhouette de la chouette<br>
-   Qui régurgite des boulettes<br>
-   Son cri terrifie les petits<br>
-   Qui se blottissent dans leur lit<br>
-   <br>
-   <br>
-   LE RENARD<br>
-   <br>
-   Animal nocturne et rusé<br>
-   Il a un beau manteau de feu<br>
-   C'est un canidé très futé<br>
-   S'approcher de lui on ne peut<br>
-   Avec sa queue immaculée<br>
-   Des passants il flatte les yeux<br>
-   <br>
-   <br>
-   LA CHAUVE-SOURIS<br>
-   <br>
-   C'est très dur de la voir<br>
-   Puisqu'elle vit dans le noir<br>
-   Elle aime du sang boire<br>
-   Et elle sort le soir<br>
-   <br>
-   <br>
-   LA GRENOUILLE<br>
-   <br>
-   Qu'est-c'qui saute et qui mouille<br>
-   Qui plonge et qui farfouille<br>
-   Qui nage et qui patouille<br>
-   C'est bien sûr la grenouille<br>
-   <br>
-   <br>
-   LE LION<br>
-   <br>
-   Le lion est carnivore<br>
-   Il a un beau pelage<br>
-   Il est souvent en cage<br>
-   Et ce soir il est mort<br>
-   <br>
-   <br>
-   L'ELEPHANT<br>
-   <br>
-   Descendant du mammouth<br>
-   Il est très imposant<br>
-   c'est bien sûr l'éléphant<br>
-   attendez j'ai un doute<br>
-   <br>
-   <br>
-   LE CHAT<br>
-   <br>
-   Talentueux chasseur<br>
-   Le chat est un joueur-né<br>
-   Il cherche avec son nez<br>
-   Et vit dans sa demeure</p>
-  <p>poèmes venant du <a class="external" href="http://membres.lycos.fr/peter2000/">site de peter2000</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
-<p style="margin-top: 270px;"><img alt="Image:clientHeight_fr.png"></p>
-<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
-<p><code>clientHeight</code> ne fait partie d'aucune spécification du W3C.</p>
-<h3 id="Notes" name="Notes">Notes</h3>
-<p><code>clientHeight</code> est une propriété non standard, qui a été introduite dans le modèle objet d'Internet Explorer.</p>
-<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<p><code>intElemClientHeight</code> est un entier correspondant à la valeur de <code>clientHeight</code> pour l'élément représenté par  <code>element</code>, exprimée en pixels. La propriété <code>clientHeight</code> est uniquement accessible en lecture-seule.</p>
+
+<h2 id="example">Exemples</h2>
+
+<p><img src="dimensions-client.png"></p>
+
+<h2 id="specifications">Spécifications</h2>
+
+<p>{{Specifications}}</p>
+
+<h3 id="Notes">Notes</h3>
+
+<p><code>clientHeight</code> est une propriété introduite par le modèle objet d'Internet Explorer.</p>
+
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="see_also">Voir aussi</h2>
+
 <ul>
- <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp">Définition de clientHeight sur MSDN (en anglais)</a></li>
- <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">Mesure des dimensions et de la position d'un élément sur MSDN (en anglais)</a></li>
- <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Référence du DOM Gecko sur clientHeight (en anglais)</a></li>
+  <li><a href="/fr/docs/Web/API/HTMLElement/offsetHeight"><code>HTMLElement.offsetHeight</code></a></li>
+  <li><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a></li>
+  <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li>
 </ul>
-<p>{{ languages( { "en": "en/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p>