Centerboxed 3 bekommt jetzt eine Tab-Navigation und so entsteht Version 2 eines zentrierten, dreispaltigen Layouts…
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.
Wie wäre es mit Copy and Paste?
Wir können es uns aber auch einfach machen und kopieren einfach die gesamte Version 1 und ändern nur die CSS Datei für die Navigation.
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><a href="index.html">Gesamtübersicht</a></li>
<li><a href="index.html">Startseite</a></li>
</ul>
</nav>
<main>
<article>
<h1>Centerboxed 3 Version 2:</h1>
<p>
Willkommen auf der Webseite für Centerboxed 3 Version 2.
</p>
</article>
<br />
</main>
<div id="spalte3">
<article>
<h1>Update:</h1>
<p>
Datum
</p>
</article>
<br />
</div>
</div> <!-- Ende vom wrapper-Bereich -->
</body>
</html>
Der CSS Code für die Datei “06_navigation.css“:
@media all {
nav {
position: absolute;
width: 210px;
background-color: goldenrod;
color: white;
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;
font-family: Arial;
font-size: smaller;
}
nav li {
list-style-type: none;
display: block;
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;
}
} /* 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.