Placer une section grid à margin-top: 100%
lamontange
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je tente de placer une section grid à top: 100%, mais je n'y arrive pas :/
Je vous donne les CSS :
AInsi que le HTML :
Si vous pouviez m'aider... Merci ;)
LM
Configuration: Macintosh / Firefox 101.0
Je tente de placer une section grid à top: 100%, mais je n'y arrive pas :/
Je vous donne les CSS :
.grid { position: relative; display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(12, 1fr); height: 100%; margin-top: 100%; } .item { padding: 1.5rem; background-color: coral; } .text-content { grid-column: 1 / 9; } .illustration { position: absolute; grid-column: span 4 / -1; grid-row: 1 / 3; left: 0; top: 0; right: 0; bottom: 0; }
AInsi que le HTML :
<div class="sl-slider" data-midnight="white"> <div class="sl-slide" data-orientation="vertical"> <div class="sl-slide-inner"> <div class="bg-img bg-img-1"></div> <h2>BOLO</h2> <blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="vertical"> <div class="sl-slide-inner"> <div class="bg-img bg-img-2"> <video autoplay loop muted="" playsinline=""> <source src="/media/cc0-videos/flower.webm" type="video/webm"> <source src="./videos/Emeline Fougeray.mp4" type="video/mp4"> </video></div> <h2>Regula aurea.</h2> <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="vertical"> <div class="sl-slide-inner"> <div class="bg-img bg-img-3"></div> <h2>Dum spiro, spero.</h2> <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="vertical"> <div class="sl-slide-inner"> <div class="bg-img bg-img-4"></div> <h2>Donna nobis pacem.</h2> <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote> </div> </div> <div class="sl-slide" data-orientation="vertical"> <div class="sl-slide-inner"> <div class="bg-img bg-img-5"></div> <h2>Acta Non Verba.</h2> <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote> </div> </div><!-- /sl-slider --> <section class="grid"> <h1 class="item text-content">Titre Titre Titre</h1> <p class="item text-content">Texte</p> <div class="item illustration">Illus.</div> </section>
Si vous pouviez m'aider... Merci ;)
LM
Configuration: Macintosh / Firefox 101.0
A voir également:
- Placer une section grid à margin-top: 100%
- Set-top box - Accueil - Box & Connexion Internet
- Placer des points sur une carte - Guide
- Top site telechargement - Accueil - Outils
- Saut de section word - Guide
- Télécharger livre maternelle grande section gratuit pdf - Télécharger - Éducatifs
4 réponses
Merci Pitet pour ces explications :)
Oui, tes jsfiddle fonctionnent. Mais mon cas est très complexe. Pas mal d'animations avant le slider (en position absolute).
Il faut que je fasse le ménage dans mon code. Je me demande si le grid n'est pas à -100%. Si je vire les animations, le grid se retrouve à top 0 (il ne suit pas le slider).
Tous mes tests échouent. Rien ne "coule".
J'y verrais plus clair ce week-end et réponds sur le champ ;)
Merci pour ta rapidité et ta sympathie,
LM
Oui, tes jsfiddle fonctionnent. Mais mon cas est très complexe. Pas mal d'animations avant le slider (en position absolute).
Il faut que je fasse le ménage dans mon code. Je me demande si le grid n'est pas à -100%. Si je vire les animations, le grid se retrouve à top 0 (il ne suit pas le slider).
Tous mes tests échouent. Rien ne "coule".
J'y verrais plus clair ce week-end et réponds sur le champ ;)
Merci pour ta rapidité et ta sympathie,
LM
Bonjour,
Une marge de 100% par rapport à quoi ?
Quel est le résultat que tu obtiens et quel est le résultat que tu veux obtenir ?
Une marge de 100% par rapport à quoi ?
Quel est le résultat que tu obtiens et quel est le résultat que tu veux obtenir ?
Bonjour Pitet :)
100% par rapport au top du site. J'ai un slider height: 100% et j'aimerais que le grid arrive après.
Pour le moment, le grid n'apparaît pas :/
Bon après-midi et merci,
LM
100% par rapport au top du site. J'ai un slider height: 100% et j'aimerais que le grid arrive après.
Pour le moment, le grid n'apparaît pas :/
Bon après-midi et merci,
LM
Ton slider est défini avec une position absolute ?
Sans position absolute, deux éléments de type block (div et section) vont naturellement se positionner l'un en dessous de l'autre dans la page : https://jsfiddle.net/1ph7qvzL/
Avec un position absolute sur le slider, tu peux essayer d'appliquer un top: 100% sur la classe grid : https://jsfiddle.net/1ph7qvzL/1/
Sans position absolute, deux éléments de type block (div et section) vont naturellement se positionner l'un en dessous de l'autre dans la page : https://jsfiddle.net/1ph7qvzL/
Avec un position absolute sur le slider, tu peux essayer d'appliquer un top: 100% sur la classe grid : https://jsfiddle.net/1ph7qvzL/1/