1
Ma page comporte un en-tête fixe. Je suis conscient que cela provoque les flux de contenu commencent en haut de la page. J'ai cherché une solution pour cela et rien ne semble fonctionner, par exemple this oneAffichage du contenu en-dessous d'un en-tête fixe
Ci-dessous le code et est ici un codepen - Comme vous pouvez voir le contenu de mon article est affiché en haut de la page, même si elle est placée au bas de mon html.
J'apprécierais une solution de contournement expliquée afin que je puisse APPRENDRE.
MISE À JOUR - L'ajout de padding-top:{500px} a permis de résoudre ce problème. Est-ce une solution de contournement recommandée? J'ai été mis au courant de cette correction here.
Merci les gars!
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.col-1 {
width: 100%;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
.header {
width: 100%;
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
}
.site-content {
margin-top: 100px;
}
.banner-home {
background: url("");
height: 100vh;
width: 100%;
background-size: cover;
position: absolute;
z-index: -1000;
}
#intro {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
color: #020000;
z-index: 50;
}
#intro a {
border: 3px solid #020000;
cursor: pointer;
}
#intro li a {
padding: 20px;
color: #020000;
font-weight: 800;
}
#intro li a:hover {
background-color: #ffd800;
}<div id="page" class="rare-site">
<div class="wrapper">
<div id="global-navigation">
<!-- Global Header -->
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select</h1>
</a>
</div>
<nav class="menu">
<ul>
<li><a href="">HOME</a></li>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">INFO</a>
</li>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">NEWSLETTER</a>
</div>
<!--
-->
<li>
<div class="flexbox-container">
<a href="">CONTACT</a>
</li>
<!--
-->
</ul>
</header>
</div>
</div>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<!-- Content Area -->
<main id="main" class="site-main" role="main">
<div class="banner large-trunk">
<div class="banner-home"></div>
<div class="banner-overlay">
<div id="intro">
<h2 class="discover"><u>The easy way to discover models.</u></h2>
<div id="button-container">
<div id="button-overlay">
<ul class="inline-block-container">
<li><a class="discover-1">I'm looking to become a model</a></li>
<li><a class="discover-2">I'm looking for a model</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<article id="newsletter">
<div class="newsletter-entry">
<section class="news-content trunk">
<div class="feature-box">
<h2>Recent News</h2>
</div>
</section>
</div>
</article>
</main>
</div>
</div>
</div>
Depuis la 'margin-top: 100px' déjà; la façon dont il est supposé à dans votre échantillon de code, et est également le moyen le plus utilisé pour résoudre ce que vous demandez, comment cela ne fonctionne pas pour vous? – LGSon
Désolé, je ne comprends pas votre question clairement. 'margin-top: 100px' fonctionne sur la première section de contenu après l'en-tête fixe, ma question concerne tout contenu suivant cette section –
Je vois maintenant que j'ai mal compris la question, donc tout va bien. – LGSon