In diesem Artikel wird das Flex 3 Layout mit Klick 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> <!-- 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" />
<meta charset="UTF-8"/>
</head>
<body>
<div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->
<header> <!-- Anfang vom kopfbereich-header-Bereich -->
</header> <!-- Ende vom kopfbereich-header-Bereich -->
<nav> <!-- Anfang vom nav-Element -->
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="archiv.html">Archiv</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav> <!-- Ende vom nav-Element -->
<aside>
<article>
<h1>Letztes Update:</h1>
<p>
Datum des Updates
</p>
</article>
<br />
</aside>
<main> <!-- Anfang vom Textbereich -->
<article>
<h1>Flex 3 Version 5 mit Klick Dropdown horizontal:</h1>
<p>
Dies ist das Flex 3 Layout mit Klick Dropdown horizontal in der HTML5 Version.
</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);
@import url(10_aside.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 {
/*
CSS Gestaltung für die Navigation von Flex 3 mit Klick-Dropdown horizontal.
*/
nav {
position: absolute;
top: 30px;
left: 245px;
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: 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;
}
nav li {
display: inline;
list-style-type: none;
padding: 3px;
}
nav ul li ul {
display: inline; /* block oder inline-Element*/
list-style-type: none;
padding: 3px;
position: absolute;
top: 35px;
left: 100px;
width: 210px;
}
nav a:link {
color: black;
background-color: white;
display: inline;
text-decoration: none;
padding: 3px;
}
nav a:visited {
color: black;
background-color: white;
display: inline;
text-decoration: none;
}
nav a:hover {
background-color: red;
color: black;
display: inline;
text-decoration: none;
}
nav a:focus {
color: black;
background-color: white;
display: inline;
text-decoration: none;
}
nav a:active {
color: black;
background-color: white;
display: inline;
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*/Der CSS-Code für die Datei „10_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*/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.