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.