nicht angemeldet
Matthias ScharwiesServus!
MrMurphy1 hat die Groß-und Kleinschreibung von HTML und CSS-Selektoren schon angesprochen.
Hier nur ungefragt ein paar kleine Tipps:
- Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich:
<body>
<nav>
<ul>
<li class=""><a href="" >A</a>
<li class=""><a href="" >B</a>
<li class=""><a href="" >C</a>
<li class=""><a href="" >D</a>
<li class=""><a href="">E</a>
<li class=""><a href="">F</a>
<li class=""><a href="#kontakt">G</a>
</ul>
</nav>
</body>
Ich habe die Klassen entfernt und einiges zusammengefasst:
div id="all" ist völlig in body aufgegangen.
div id=#Navigation ist mit dem nav-Element besser bedient.
Die Klassen für die Listenelemente sind nicht nötig:
nav li {
display:inline-block;
list-style: none;
border-right: 1px solid black;
background: #8d8b8b; /* Fallback für IE8 */
background: linear-gradient(#595656 0%, #8d8b8b 100%);
}
nav li:last-child {
border: 0;
}
Ich habe den Hintergrund von .navigationslink integriert. Die alten Versionen brauchst du nicht, dafür evtl. einen fallback in einer Flächenfarbe.
Der rechte Rand aus ehemals .borderright ist jetzt überall, außer im letzten Element, dem er mit der strukturellen Pseudoklasse last-child wieder entfernt wurde.
- Du verwendest feste Pixelmaße. Wie sieht das auf einem SmartPhone aus?
Du hast 2 Möglichkeiten:
Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit calc festlegen:
nav li a {
width: calc(100% / 7);
}
Oder du verwendest Flexbox. Dort benötigst du keine Breitenangaben, das erledigt der Browser des Anwenders für dich.
Herzliche Grüße
Matthias Scharwies
Gunnar Bittersmann