In diesem Artikel wird das Flex 3 Layout mit Hover Dropdown horizontal in der HTML5 Version erstellt…
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>
<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">Seite 01</a></li>
<li id="02"><a href="02.html">Seite 02</a></li>
<li id="03"><a href="03.html">Seite 03</a></li>
<li id="04"><a href="04.html">Seite 04</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>
<article>
<h1>Datum - Überschriftl:</h1>
<p>
Artikeltext...
</p>
</article>
<br />
</main> <!-- Ende vom main-Element -->
<div id="spalte3"> <!-- Anfang von Spalte 3 -->
<article>
<h1>Spalte 3:</h1>
<p>
Text des Artikels...
</p>
</article>
<br />
</div> <!-- Ende von Spalte 3 -->
<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);
@import url(10_spalte3.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 {
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;
}
/* 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: 241px;
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;
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*/Der CSS-Code für die Datei „10_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*/Rückblick und Ausblick:
Vom Webdesign Flex 3 gab es in den letzten Wochen sieben verschiedene Versionen und hier nochmal der Rückblick was uns diese Layouts so lieferten…:
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 einem neuen Layout weiter und da es auf zentrierten Boxen basiert nennen wir es Centerboxed…
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.
Weitere interessante Webartikel zum Thema Webdesign gibt es auf der Fuhselab Webseite und in der Artikelübersicht 2022 und der Artikelübersicht 2023.