Das zweispaltige Centerboxed Layout bekommt mit diesem Artikel 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 neun 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="001"><a href="001.html">001</a></li>
<li id="002"><a href="002.html">002</a></li>
<li id="003"><a href="003.html">003</a></li>
<li id="004"><a href="004.html">004</a></li>
</ul>
</li>
<li id="impressum"><a href="impressum.html">Impressum</a></li>
</ul>
<br />
</nav>
<aside>
<article>
<h1>Letztes Update:</h1>
<p>
Datum
</p>
</article>
<br />
</aside>
<main> <!-- Anfang vom Textbereich -->
<article>
<h1>Centerboxed 2 Version 7 mit Hover Dropdown horizontal:</h1>
<p>
Dies ist das Layout Centerbox 2 Version 7 mit Hover Dropdown horizontal...
</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);
@import url(09_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 {
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: 30px;
left: 245px;
width: 210px;
background-color: goldenrod;
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 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: chocolate;
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;
}
/* 04 Ebene 2 verstecken */
nav li ul {
position: absolute;
left: -9999px;
top: -9999px;
display: block;
width: 0px;
height: 0px;
background-color: transparent;
}
/* 05 Ebene 2 beim hovern wieder sichtbar machen */
nav li:hover ul {
display: block;
height: auto;
top: auto; /* Pixelwert oder auto*/
left: auto; /* Pixelwert (100) oder auto*/
width: 200px;
background-color: goldenrod;
border-bottom: 2px solid goldenrod;
}
/* 06 Rausklappliste korrekt einfärben und Hover-Verhalten für die zweite Ebene */
nav li ul a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav li ul a:visited {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav li ul a:hover {
color: black;
background-color: chocolate;
display: block;
text-decoration: none;
padding: 3px;
}
nav li ul a:focus {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav li ul a:active {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
} /* 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*/Der CSS Code für die Datei “09_aside.css“:
@media all {
aside {
position: absolute;
top: 102px;
left: 5px;
width: 210px;
background-color: goldenrod;
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 Artikel zum Thema Webdesign gibt es auf der Fuhselab Webseite.