Das zweispaltige Centerboxed Layout bekommt mit diesem Artikel einen vertikalen 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 acht CSS Dateien. Die erste Datei nennen wir “01_zentrale.css“ und die restlichen Dateien nennen wir so wie in der zentralen CSS Datei und in diesem Artikel angegeben.
Der HTML Quelltext:
<!doctype html>
<html lang="de">
<head>
<title>Webdesign Workshop</title>
<link rel="stylesheet" href="01_CSS/01_zentrale.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul>
<li id="startseite"><a href="index.html">Startseite</a></li>
<li id="archiv"><a href="archiv.html">Archiv</a>
<ul>
<li id="0001"><a href="0001.html">0001</a></li>
<li id="0002"><a href="0002.html">0002</a></li>
<li id="0003"><a href="0003.html">0003</a></li>
<li id="0004"><a href="0004.html">0004</a></li>
</ul>
</li>
<li id="impressum"><a href="impressum.html">Impressum</a></li>
</ul>
<br />
<article>
<h1>Update:</h1>
<p>
Update-Datum
</p>
</article>
<br />
</nav>
<main> <!-- Anfang vom Textbereich -->
<article>
<h1>Centerboxed 2 Version 6 mit Hover Dropdown vertikal :</h1>
<p>
Dies ist das Layout Centerbox 2 Version 6 mit Hover Dropdown vertikal.
</p>
</article>
<br />
</main>
</div>
</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);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 {
background-color: white;
color: black;
background: url(bravo.gif);
}
} /* Ende von @media nicht löschen*/Der CSS Code für die Datei “04_wrapper.css“:
#wrapper {
position: relative;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
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;
background-color: wheat;
width: 900px;
}Der CSS Code für die Datei “05_kopfbereich.css“:
@media all {
header {
height: 80px;
background: url(sbheader2.jpg);
color: white;
background-color: goldenrod;
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: 107px;
left: 5px;
width: 210px;
background-color: goldenrod;
margin-top: 0px;
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;
}
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;
padding: 3px;
}
nav a:hover {
background-color: chocolate;
color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav a:focus {
color: black;
background-color: wheat;
display: block;
text-decoration: none;
padding: 3px;
}
nav a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav li ul {
position: absolute;
left: -9999px;
top: -9999px;
}
nav li:hover ul {
left: 10px;
top: auto;
display: block;
width: 210px;
height: auto;
}
} /* Ende von @media nicht löschen*/Der CSS Code für die Datei “07_textbereich.css“:
@media all {
main {
background-color: goldenrod;
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;
}
#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: wheat;
padding: 5px;
border-style: solid;
border-color: black;
border-width: 1px;
}
.clearingtext {
clear: both;
background-color: wheat;
}
.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*/
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.