Webdesign: Flex 2 V2

Mittwoch 4. März 2020 von Torsten

Im letzten Webdesign Artikel wurden die verschiedenen Layouts vorgestellt. In diesem Artikel wird aus der Basis-Navigation eine Tab Navigation vertikal…

Kopiervorlage für Flex 2 mit Basis-Navigation:

Als Kopiervorlage dient das bisherige Layout wie aus dem Artikel “HTML Grundgerüst 3“.

Als erste kleine Anpassung wurde auch schon die Sprachangabe in das html-Element eingebaut. Wenn der HTML Quelltext jetzt über den HTML Validator geprüft wurde, sollten keine Fehler und keine Warnungen mehr angezeigt werden…

Die CSS Dateien sollten auch alle ordentlich validiert sein.

  • HTML Validator
  • CSS Validator

Der Weg zur Tab-Navigation:

Die Tab Navigation vertikal macht aus den Hyperlinks der Basis-Navigation Tabulator-ähnliche Menüpunkte. So sieht die Navigation dann schon etwas professioneller aus.

Statt jetzt hier den vollständigen Quelltext reinzukopieren, schauen wir nur mal auf die Navigation:

<ul>

<li><a href=“index.html“>Gesamtübersicht</a></li>

<li><a href=“start.html“>Startseite</a></li>

</ul>

Im HTML Quelltext gibt es noch nichts Neues.

In der Navigations-CSS-Datei (navibereich.css) wird es aber spannend:

nav li {

display: block;

list-style-type: none;

padding: 3px;

}

Der Listenpunkt wird also zum Block-Element umgewandelt und die Listenaufzählungspunkte werden per „list-style-type: none“ entfernt.

Anschließend werden nur noch die Hyperlink-Elemente (nav a) angepasst…

Nachfolgend nur zwei kleine Ausschnitte aus der Datei…:

nav a:link {

color: black;

background-color: white;

display: block;

text-decoration: none;

padding: 3px;

}

nav a:hover {

background-color: red;

color: black;

display: block;

text-decoration: none;

}

Für die Tab- Navigation ist also die Hintergrundfarbe des “nav a:link-Elements“ zuständig. Der Mouse-over Effekt wird über das “nav a:hover-Element“ gestaltet…

Dieser Beitrag wurde erstellt am Mittwoch 4. März 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben