sticky working'

master
Alexandre AGOSTINHO 3 years ago
parent ec88fc5413
commit a55c42a61b

@ -15,6 +15,7 @@
<h1>LangProg</h1> <h1>LangProg</h1>
<p><b>Main</b> page</p> <p><b>Main</b> page</p>
</div> </div>
</div>
<nav class="nav-bar"> <nav class="nav-bar">
<span class="nav-left"> <span class="nav-left">
@ -25,14 +26,12 @@
<a href="pages/donnees.html">Données</a> <a href="pages/donnees.html">Données</a>
</span> </span>
</nav> </nav>
</div>
<div class="main-content"> <div class="main-content">
<div class="side"> <div class="side">
<div class="links"> <div class="links">
<h3>Liens externes..</h3> <h3>Liens externes..</h3>
<ul> <ul>
<li><a href="https://fr.wikipedia.org/wiki/C_(langage)">C (Wiki)</a></li> <li><a href="https://fr.wikipedia.org/wiki/C_(langage)">C (Wiki)</a></li>
<li><a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++ (Wiki)</a></li> <li><a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++ (Wiki)</a></li>

@ -16,6 +16,7 @@
<h1>LangProg</h1> <h1>LangProg</h1>
<p><b>Le langage C</b> article</p> <p><b>Le langage C</b> article</p>
</div> </div>
</div>
<nav class="nav-bar"> <nav class="nav-bar">
<span class="nav-left"> <span class="nav-left">
@ -26,7 +27,6 @@
<a href="./donnees.html">Données</a> <a href="./donnees.html">Données</a>
</span> </span>
</nav> </nav>
</div>
<div class="main-content"> <div class="main-content">
@ -156,7 +156,6 @@
</section> </section>
</div> </div>
</div> </div>
</body> </body>

@ -1,19 +1,15 @@
* { /** {
box-sizing: border-box; box-sizing: border-box;
} }
*/
body { body {
font-family: Arial; font-family: Arial;
margin: 0; margin: 0;
} }
/* HEADER --------------------------------------------*/ /* HEADER --------------------------------------------*/
.header {
position: sticky;
}
.header .title { .header .title {
background-image: linear-gradient(to right, #ebebeb, cadetblue); background-image: linear-gradient(to right, #ebebeb, cadetblue);
text-align: center; text-align: center;
@ -38,6 +34,8 @@ body {
padding: 5px; padding: 5px;
align-items: baseline; align-items: baseline;
background-color: #555; background-color: #555;
position: sticky;
top: 0;
} }
.nav-bar a { .nav-bar a {
@ -69,7 +67,7 @@ body {
.main-content { .main-content {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: row;
} }
.side { .side {

Loading…
Cancel
Save