diff options
Diffstat (limited to 'files/fr/web/css/calc()/index.html')
| -rw-r--r-- | files/fr/web/css/calc()/index.html | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html index 6f3cbb1c7e..b3eb962d7b 100644 --- a/files/fr/web/css/calc()/index.html +++ b/files/fr/web/css/calc()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/calc() <p>La fonction <strong><code>calc()</code></strong> peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.</p> -<pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */ +<pre class="brush: css no-line-numbers">/* property: calc(expression) */ width: calc(100% - 80px); </pre> @@ -55,7 +55,7 @@ width: calc(100% - 80px); <p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :</p> -<pre class="brush: css notranslate">.banniere { +<pre class="brush: css">.banniere { position: absolute; left: 40px; width: calc(100% - 80px); @@ -68,7 +68,7 @@ width: calc(100% - 80px); } </pre> -<pre class="brush: html notranslate"><div class="banniere">C'est une bannière !</div></pre> +<pre class="brush: html"><div class="banniere">C'est une bannière !</div></pre> <p>{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}</p> @@ -78,7 +78,7 @@ width: calc(100% - 80px); <p>Regardons un peu le CSS :</p> -<pre class="brush: css notranslate">input { +<pre class="brush: css">input { padding: 2px; display: block; width: calc(100% - 1em); @@ -93,7 +93,7 @@ width: calc(100% - 80px); <p>Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div id="boiteformulaire"> <label>Tapez quelque chose :</label> <input type="text"> @@ -107,7 +107,7 @@ width: calc(100% - 80px); <p>Prenons la feuille de style suivante :</p> -<pre class="brush: css notranslate">.toto { +<pre class="brush: css">.toto { --largeurA: 100px; --largeurB: calc(var(--largeurA) / 2); --largeurC: calc(var(--largeurB) / 2); @@ -120,7 +120,7 @@ width: calc(100% - 80px); <p>Lorsque vous utilisez <code>calc()</code> pour définir la taille d'un texte, assurez-vous d'inclure <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a>. Par exemple :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> |