Der Webdesign Workshop geht diese Woche mit Flex 2 Version 7 weiter und erstellt einen horizontalen Hover Dropdown…
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 folgende einfache Textdateien…
- 01_zentrale.css
- 02_fundament.css
- 03_body.css
- 04_wrapper.css
- 05_kopfbereich.css
- 06_navigation.css
- 07_textbereich.css
- 08_artikel.css
- 09_aside.css
Der HTML Quelltext:
Der nachfolgende HTML Quellcode wird in die Datei “index.html“ eingefügt.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Webdesign</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->
<header> <!-- Anfang vom header-Element -->
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li id="startseite"><a href="index.html">Startseite</a></li>
<li id="archiv"><a href="archiv.html">Archiv</a>
<ul>
<li id="01"><a href="01.html">Thema 1</a></li>
<li id="02"><a href="02.html">Thema 2</a></li>
<li id="03"><a href="03.html">Thema 3</a></li>
<li id="04"><a href="04.html">Thema 4</a></li>
</ul>
</li>
<li id="impressum"><a href="impressum.html">Impressum</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->
</header> <!-- Ende vom header-Element -->
<aside>
<article>
<h1>Text des Tages:</h1>
<p>
Text des Artikels...
</p>
</article>
<br />
</aside>
<main> <!-- Anfang vom main-Element also dem eigentlichen Textbereich-Hauptbereich der Webseite -->
<article>
<h1>Flex 2 Version 7 mit Hover Dropdown horizontal:</h1>
<p>
Hier steht der Artikeltext...
</p>
</article>
<br />
</main> <!-- Ende vom main-Element -->
<footer> <!-- Anfang vom footer-Element -->
</footer> <!-- Ende vom footer-Element -->
</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_aside.css);Der CSS-Code für die Datei “02_fundament.css“:
@media all {
/*
Diese Datei dient nur dem Reset. Padding und margin werden auf null gesetzt.
*/
* {
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 {
background-color: white;
color: black;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “04_wrapper.css“:
@media all {
#wrapper {
margin: 5px;
background-color: white;
color: black;
}
} /* Ende von @media nicht löschen*/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;
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: 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 {
/*
CSS Gestaltung für die Navigation von Flex 2 mit Hover-Dropdown-Navigation horizontal mit vertikaler zweiter Ebene
*/
nav {
position: absolute;
top: 30px;
left: 245px;
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: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
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;
}
/* 02 Die ungeordnete Liste in Ebene 1 gestalten*/
nav ul {
margin: 0px;
}
nav li {
float: left;
width: auto;
list-style: none;
margin: 5px;
}
/* Liste in Ebene 2 clearen */
nav li li {
clear: both;
}
/* 03 Die Hyperlinks in Ebene 1 gestalten */
nav a {
display: block;
background-color: white;
color: black;
text-decoration: none;
padding: 0.4em 1em;
margin: 0px;
}
nav a:hover,
nav a:focus,
#startseite #navi01 a,
#seite02 #navi02 a,
#seite0201 #navi02 a,
#seite03 #navi03 a,
#seite0302 #navi03 a,
#kontaktseite #navi04 a {
color: black;
background-color: lightsteelblue;
border-bottom: none;
}
/* Spezifität auf über 225 erhöhen - war ursprünglich nur #navibereich a:active */
#wrapper nav #ebene01 li a:active {
color: white;
background-color: #d90000;
}
/* 04 Ebene 2 verstecken */
nav li ul {
position: absolute;
left: -9999px;
top: -9999px;
display: inline;
width: 0px;
height: 0px;
background-color: transparent;
}
/* 05 Ebene 2 beim hovern wieder sichtbar machen */
nav li:hover ul {
left: auto;
top: auto;
display: block;
width: auto;
height: auto;
background-color: steelblue;
border-bottom: 2px solid steelblue;
}
/* 06 Rausklappliste korrekt einfärben und Hover-Verhalten für die zweite Ebene */
/* Spezifität 214 */
nav ul#ebene01 ul.ebene02 li a {
background-color: red;
}
/* Spezifität 224 */
nav ul#ebene01 ul.ebene02 li a:hover {
background-color: red; /* war im Original #ffe05a */
}
/* Feste Breite für die Hyperlinks in Ebene 2 */
nav li li a {
width: 8em;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “07_textbereich.css“:
@media all {
main {
background-color: steelblue;
color: white;
margin-top: 3px;
margin-right: 5px;
margin-bottom:5px;
margin-left: 241px;
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: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
font-family: Arial;
font-size: smaller;
}
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; /* Grundeinstellung = 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;
margin-left: 0px;
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; /* dashed ergibt eine gestrichelte Rahmenlinie*/
border-left-style: solid;
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
border-left-color: black;
}
.bildrechts {
float: right;
margin-top: 5px;
margin-left: 15px;
margin-bottom: 5px;
border-style: solid;
border-width: 1px;
}
} /* Ende von @media nicht löschen*/Der CSS-Code für die Datei “09_aside.css“
@media all {
aside {
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;
}
aside li {
list-style-type: none;
}
aside a:link {
color: white;
background-color: goldenrod;
display: block;
text-decoration: none;
}
aside a:visited {
color: white;
background-color: goldenrod;
display: block;
text-decoration: none;
}
aside a:hover {
background-color: chocolate;
color: white;
display: block;
text-decoration: none;
}
aside a:focus {
color: black;
background-color: wheat;
display: block;
text-decoration: none;
}
aside a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
}
} /* Ende von @media nicht löschen*/Rückblick und Ausblick:
Vom Webdesign Flex 2 gab es in den letzten Wochen sieben verschiedene Versionen und hier nochmal der Rückblick was uns diese Layouts so lieferten…:
Flex 2 Version 1 = Basisnavigation
Flex 2 Version 2 = Tab-Navigation vertikal
Flex 2 Version 3 = Tab-Navigation horizontal
Flex 2 Version 4 = Klick-Dropdown vertikal
Flex 2 Version 5 = Klick-Dropdown horizontal
Flex 2 Version 6 = Hover-Dropdown vertikal
Flex 2 Version 7 = Hover-Dropdown horizontal
Ab der nächsten Woche geht es dann mit den Weblayouts zu Flex 3 weiter. Flex 3 ist ein dreispaltiges Layout und kommt auch wieder in sieben verschiedenen Versionen.
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.