Hallo
Die betroffene Seite:
www.ghostinvalid.bplaced.net
Den navigations bereich habe ich mit
position:fixed;
angeheftet.
Es tut seinen Zweck aber würde um einiges schöner aussehen wenn der Bereich erst mitscrollt wenns nötig wird; wenn er den oberen Rand des Fensters erreicht.
Meine Idee:
Irgendwie müsste es doch möglich sein die navigation ganz nach oben zu verschieben aber das der Header berücksichtigt wird.
Bin Dankbar für alle Vorschläge :))
EpicAlu
HTML
<aside class="smcp">
<nav>
<ul>
<li> <a class="active" href="index.html">Startseite</a></li>
<li> <a href="members/nili.html">Band­Mitglieder</a></li>
<li> <a href="songs.html">Songs & Einblicke</a></li>
<li> <a href="auftritte.html">Auftritte & Daten</a></li>
<div class="box2"><h3>Social Media</h3>
<a class="link2" href="https://www.youtube.com/channel/UC8FpgZI0L3op9STXvc4vdQw" target="_blank"> <h4>Unser <b>Youtube­Kanal</b></h4></a>
<a class="link2" href="https://www.facebook.com/ghostinvaelid/" target="_blank"><h4>Unsere <b>Facebook­Seite</b></h4></a></div>
</ul>
</nav>
</aside>
Alles anzeigen
CSS
aside{
//clear:all;
margin-top: 10px;
float: left;
text-align: center;
width: 30%;
}
nav{
//clear:all;
position:fixed;
//top: 10px;
width: 30%;
background: linear-gradient(to left bottom, rgba(50,50,50,0.8), rgba(22,128,25,0.8) 70%);
background-color: #fff;
border: 2px solid gray;
border-radius: 8px;
margin: 0px 0.5% 0% 0.5%;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
text-align: center;
}
nav ul{
font-weight: 600;
}
ul{
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
font-size: large;
}
ul li a{
font-size: 20px;
text-decoration: none;
color: #000;
padding: 10px 10px;
margin-bottom: 5px;
background: linear-gradient(to left bottom, rgba(50,50,50,0.7), rgba(22,128,25,0.7) 70%);
display: block;
border: 1px solid gray;
border-radius: 8px;
box-shadow: 0px 10px 20px 0px gray;
}
Alles anzeigen