Aus der Basisnavigation wird eine vertikale Tab-Navigation und dieser Artikel liefert die Bauanleitung dazu…

Vorbereitungen:

In einem ersten Schritt erstellen wir eine einfache Textdatei und nennen sie “index.html“. In einem zweiten Schritt erstellen wir den Ordner “01_CSS“ und darin erstellen wir die CSS Dateien so wie in der zentralen CSS Datei angegeben.

Der HTML Quelltext:

<!doctype html> <!-- Dies ist die Doctype-Angabe für HTML 5 -->
<html lang="de">

<head>
<title>Webdesign</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
</head>

<body>

<div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->

<header> <!-- Anfang vom kopfbereich-header-Bereich -->
</header> <!-- Ende vom kopfbereich-header-Bereich -->

<nav> <!-- Anfang vom navibereich -->

<ul>
<li><a href="index.html">Startseite 1</a></li>
<li><a href="index.html">Startseite 2</a></li>
</ul>

</nav> <!-- Ende vom navibereich  -->


<main> <!-- Anfang vom Textbereich -->

<article>
<h1>Flex 3 Version 2 mit Tab Navigation vertikal:</h1>
<p>
Dies ist das Layout Flex 3 Version 2 mit Tab Navigation vertikal.
</p>
</article>
<br />

</main> <!-- Ende des Textbereiches -->

<div id="spalte3"> <!-- Anfang von Spalte 3  -->

<article>
<h1>Spalte 3:</h1>
<p>
Text des Artikels...
</p>
</article>
<br />

</div> <!-- Ende von Spalte 3 -->

</div> <!-- Ende vom wrapper-Bereich -->
</body>
</html>

Der CSS-Code für die Datei “01_zentrale.css“:

@import url(02_fundament.css);
@import url(03_body.css);
@import url(04_wrapper.css);
@import url(05_kopfbereich.css);
@import url(06_navigation.css);
@import url(07_textbereich.css);
@import url(08_artikel.css);
@import url(09_spalte3.css);

Der CSS-Code für die Datei “02_fundament.css“:

@media all {

* {
padding: 0;
margin: 0;
}

html {
height: 101%;
}
} /* Ende von @media nicht löschen*/

Der CSS-Code für die Datei “03_body.css”:

@media all {

body {
color: black;
background-color: white;
}
} /* Ende von @media nicht löschen*/

Der CSS-Code für die Datei “04_wrapper.css”:

#wrapper {
margin: 5px;
background-color: white;
}

Der CSS-Code für die Datei “05_kopfbereich.css”:

@media all {

header {
height: 80px;
background-image: url(../cpm-header01.jpg);
background-repeat: no-repeat;
background-color: steelblue;

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px; 
border-left-width: 1px;

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

}
} /* Ende von @media nicht löschen*/

Der CSS-Code für die Datei “06_navigation.css”:

@media all {

nav {
position: absolute;
top: 97px;
left: 5px;
width: 210px;
background-color: steelblue;
color: white;

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px; 
border-left-width: 1px;

border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

font-family: Arial;
font-size: smaller;
}

nav li {
display: block;
list-style-type: none;
padding: 3px;
}

nav a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}

nav a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
}

nav a:hover {
background-color: red;
color: black;
display: block;
text-decoration: none;
}

nav a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
}

nav a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/

Der CSS-Code für die Datei “07_textbereich.css”:

@media all {

main {
color: white;
background-color: steelblue;

padding: 20px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-top: 3px;
margin-right: 241px;
margin-bottom:5px;
margin-left: 241px;

font-family: Arial;
font-size: smaller;
}

#formular fieldset {
padding: 10px;
}

main a:link {
color: white;
background-color: steelblue;
text-decoration: underline;
}

main a:visited {
color: white;
background-color: steelblue;
text-decoration: underline;
}

main a:hover {
color: black;
background-color: white;
text-decoration: underline;
}

main a:focus {
color: white;
background-color: steelblue;
text-decoration: underline;
}

main a:active {
color: white;
background-color: steelblue;
text-decoration: underline;
}
} /* Ende von @media nicht löschen*/

Der CSS-Code für die Datei “08_artikel.css”:

@media all {

article {
overflow: hidden;
color: black;
background-color: lightsteelblue;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}

.clearingtext {
clear: both;
background-color: lightsteelblue;
}

.bildlinks {
float: left;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
border-style: solid;
border-width: 1px;
}

.bildrechts {
float: right;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 5px;
border-style: solid;
border-width: 1px;
}
} /* Ende von @media nicht löschen*/

Der CSS-Code für die Datei “09_spalte3.css”:

@media all {

#spalte3 {
position: absolute;
top: 97px;
right: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 210px;
color: white;
background-color: steelblue;

font-family: Arial;
font-size: smaller;

}
} /* Ende von @media nicht löschen*/

Ausblick:

Vom Webdesign Flex 3 gibt es auch sieben Versionen und somit erwarten uns in den kommenden Wochen folgende Webartikel…:

Flex 3 Version 1 = Basisnavigation

Flex 3 Version 2 = Tab-Navigation vertikal

Flex 3 Version 3 = Tab-Navigation horizontal

Flex 3 Version 4 = Klick-Dropdown vertikal

Flex 3 Version 5 = Klick-Dropdown horizontal

Flex 3 Version 6 = Hover-Dropdown vertikal

Flex 3 Version 7 = Hover-Dropdown horizontal

Ab der nächsten Woche geht es mit den Weblayouts zu Flex 3 Version 3 weiter.

Weitere interessante Webartikel zum Thema Webdesign gibt es auf der Fuhselab Webseite und in der Artikelübersicht 2022 und der Artikelübersicht 2023.


Webdesign Gruppe Peine:

Wer sich für HTML, CSS und PHP und alle anderen Webtechnologien interessiert, ist in der Webdesign-Gruppe-Peine genau richtig. Wenn Du Lust hast mitzumachen, dann melde dich einfach beim Fuhselab.

Die Webdesign Gruppe trifft sich Mittwochs von 18:00 Uhr bis 21:00 Uhr. Die Teilnehmerzahl ist begrenzt und deshalb bitte vorher per Kontaktformular oder Mail an info@fuhselab.de melden. Der Veranstaltungsort wird kurzfristig festgelegt und den Teilnehmerinnen und Teilnehmern per E-Mail mitgeteilt.

Das Angebot “Webdesign Gruppe Peine“ kann für einen Jahresbeitrag von 60,- Euro genutzt werden. Für einen Beitrag von 20,- Euro pro Teilnehmer können die Workshops genutzt werden. Materialkosten werden projektabhängig zusätzlich erhoben.

Von Torsten