Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2021-02-08T13:25:32+01:00Les derniers messages parus sur le forum de Zeste de Savoir.Maintenir Titre dans son conteneur, message #2310562021-02-08T13:25:32+01:00zakkaria/@zakkariahttps://zestedesavoir.com/forums/sujet/15030/maintenir-titre-dans-son-conteneur/?page=1#p231056<figure><blockquote>
<p>Pourquoi utiliser <code>position: absolute</code> ? </p>
<p>Ça casse le flux, il faut le réserver uniquement à des cas spécifiques (et prévoir un <code>position: relative</code> sur le parent qui sert de référence pour la position).</p>
<p>À quoi ressemble le résultat actuellement ? Quel est le résultat attendu ?</p>
</blockquote><figcaption><a href="https://zestedesavoir.com/forums/sujet/15030/maintenir-titre-dans-son-conteneur/?page=1#p231054">viki53</a></figcaption></figure>
<p>Car je prends le code CSS directement sur FIGMA mon wireframe que je modifie légèrement dans certains cas et les valeurs sont
<kbd>absolute</kbd>.</p>
<p>voici le résultat actuel :</p>
<p>résultat actuel(<a href="https://zupimages.net/viewer.php?id=21/06/tlj9.png">https://zupimages.net/viewer.php?id=21/06/tlj9.png</a>)
—-> on ne le voit pas mais en examinant l’élément, le titre h1 inscription se retrouve tout en bas de la page…
résultat attendu(<a href="https://zupimages.net/viewer.php?id=21/06/81tf.png">https://zupimages.net/viewer.php?id=21/06/81tf.png</a>)</p>Maintenir Titre dans son conteneur, message #2310542021-02-08T12:45:46+01:00viki53/@viki53https://zestedesavoir.com/forums/sujet/15030/maintenir-titre-dans-son-conteneur/?page=1#p231054<p>Pourquoi utiliser <code>position: absolute</code> ? </p>
<p>Ça casse le flux, il faut le réserver uniquement à des cas spécifiques (et prévoir un <code>position: relative</code> sur le parent qui sert de référence pour la position).</p>
<p>À quoi ressemble le résultat actuellement ? Quel est le résultat attendu ?</p>Maintenir Titre dans son conteneur, message #2310522021-02-08T12:33:49+01:00zakkaria/@zakkariahttps://zestedesavoir.com/forums/sujet/15030/maintenir-titre-dans-son-conteneur/?page=1#p231052<p>Bonjour,</p>
<p>Voilà, je dois mettre un titre (Inscription) au centre du conteneur (section_inscription). Malgré l’aide à l’intégration de FIGMA je me retrouve avec le titre flottant en dehors du conteneur.</p>
<p>J’ai cherché de mon côté et fait quelques manips mais rien n’y fait : j’ai besoin d’aide s’il vous plaît.</p>
<p><a href="https://zupimages.net/viewer.php?id=21/06/81tf.png">résultat attendu</a></p>
<p>Le html:</p>
<div class="hljs-code-div hljs-code-routeros"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span></div><pre><code class="hljs language-routeros"><a <span class="hljs-attribute">href</span>=<span class="hljs-string">"inscription.html"</span> <span class="hljs-attribute">target</span>=<span class="hljs-string">"_blank"</span>>
<div <span class="hljs-attribute">id</span>=<span class="hljs-string">"section_inscription"</span>>
<h1>Inscription</h1>
</div>
</a>
</code></pre></div>
<p>Le css:</p>
<div class="hljs-code-div hljs-code-css"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span><span data-count="11"></span><span data-count="12"></span><span data-count="13"></span><span data-count="14"></span><span data-count="15"></span><span data-count="16"></span><span data-count="17"></span><span data-count="18"></span><span data-count="19"></span><span data-count="20"></span><span data-count="21"></span><span data-count="22"></span><span data-count="23"></span><span data-count="24"></span><span data-count="25"></span><span data-count="26"></span><span data-count="27"></span><span data-count="28"></span><span data-count="29"></span><span data-count="30"></span><span data-count="31"></span><span data-count="32"></span><span data-count="33"></span><span data-count="34"></span></div><pre><code class="hljs language-css"><span class="hljs-selector-id">#section_inscription</span>{
<span class="hljs-attribute">overflow</span>: hidden;
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">width</span>: <span class="hljs-number">399px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">70px</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">199px</span>;
<span class="hljs-attribute">top</span>: <span class="hljs-number">538px</span>;
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">128</span>, <span class="hljs-number">128</span>, <span class="hljs-number">128</span>, <span class="hljs-number">0.5</span>);
<span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid <span class="hljs-number">#808080</span>;
<span class="hljs-attribute">box-sizing</span>: border-box;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">20px</span>;
}
<span class="hljs-selector-id">#section_inscription</span> <span class="hljs-selector-tag">h1</span>{
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">width</span>: <span class="hljs-number">156px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">53px</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">320px</span>;
<span class="hljs-attribute">top</span>: <span class="hljs-number">546px</span>;
<span class="hljs-attribute">font-family</span>: antonregular;
<span class="hljs-attribute">font-style</span>: normal;
<span class="hljs-attribute">font-weight</span>: normal;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">36px</span>;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">53px</span>;
<span class="hljs-attribute">text-align</span>: center;
<span class="hljs-attribute">text-transform</span>: capitalize;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#000000</span>;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">0.4</span>);
}
</code></pre></div>
<p>Merci d’avance de votre aide!</p>