Eine zusätzliche Navigation geht einerseits so (Coolmenü):
http://www.homepage-baukasten.de/forum/viewtopic.php?t=101593
Oder mit Hilfe dieses umfangreichen Tutorials:
Navigation oben
1. Schritt: Header und Navigation einbauen
Als goldene Regel gilt: Alles, das über der navigation ist wird manuell eingebaut genau so wie die Navigation selbst. Daher muss man als Erstes bei Text über Design den HTML-Code für diese beiden Dinge einbauen:
Code:
<div id="grossheader">
</div>
<div id="navigation">
<a href="Home.htm">Home</a>
<a href="Link.htm">Link</a>
<a href="Link.htm">Link</a>
<a href="Link.htm">Link</a>
<a href="Link.htm">Link</a>
<a href="Link.htm">Link</a>
</div>
Erklärung des Codes:
Die erste DIV-Klasse (grossheader) definiert den Header, die zweite DIV-Klasse (navigation) definiert die Navigation inklusive den Verlinkungen auf die Unterseiten.
2. Schritt: Allgemeine Einstellungen
Im nächsten Schritt werden wir die Breite des Designs definieren und einige Klassen außer Kraft setzen, die nicht gebraucht werden.
Code: body {
width: 900px;
margin: 0 auto;
text-align: center;
}
#container {
text-align: justify;
width: 700px;
}
#header_container, #nav_container {
display: none;
}
Erklärung des Codes:
Dem Body (der gesamten HTML-Datei) wird eine Breite von 900px zugewiesen, die dann auf alle weiteren Klassen auch zutrifft. Mit margin: 0 auto; wird der gesamte Body zuentriert, für die Abwärtskompatibilität wird noch text-align: center verwendet. Der container kriegt nur noch die Schriftausrichtung justify und die Breite700px, damit nicht der komplette Text zentriert ist und die manuell eingefügte rechte Box neben den Content passt. Der letzte Codeteil setzt die eigentlichen Header- und Navigationsklassen außer Kraft.
3. Schritt: Header, Content und rechte Box definieren
Bevor wir die Navigation einrichten, werden wir als erstes alle anderen Klassen definieren. Außerdem setzen wir Klassen außer Kraft, die das Aussehen behindern.
Code: #grossheader {
background-image: url(BILDADRESSE);
width: 900px;
height: 150px;
}
#content_container {
width: 700px;
background-color: #f1f1f1;
float: left;
}
#content {
padding: 5px;
border: 2px solid #000000;
}
#pre_content, #title, #post_content {
display: none;
}
#below_content {
width: 700px;
height: 25px;
float: left;
}
#box {
width: 200px;
background-color: #f1f1f1;
float: right;
}
#sidebar_container {
display: none;
}
Erklärung des Codes:
Mit dem Selektor grossheader werden die Styleanweisungen für den Header eingebaut. Die darauf folgenden Selektoren content_container und content definieren den Inhaltsbereich an sich. content_container definiert die Ausrichtung und der content das Aussehen. Darauf folgend werden einige Klassen außer Kraft gesetzt, die dem Aussehen schaden. Bei below_content wird der Copyrightsbereich definiert. Die Sidebar wird über den Selektor box bestimmt, den man noch manuell bei Text unter Design einfügen muss:
Code:
<div id="box">
Inhalt
</div>
4. Schritt: Navigation einrichten und positionieren
Der letzte Schritt besteht darin, die Navigation zu definieren. Eigentlich braucht man dafür auch nur zwei Selektoren, einmal zum definieren der Ausrichtung und der einzelnen Buttons.
Code:
#navigation {
width: 900px;
height: 25px;
}
#navigation a {
width: 150px;
height: 20px;
padding-top: 5px;
background-image: url(BILDADRESSE);
color: #000000;
float: left;
}
Erklärung des Codes:
Mit dem Selektor navigation definiert man lediglich die Größe der Navigation. Beim nächsten Selektor (navigation a) definiert man das Aussehen der einzelnen Menüpunkte. Die Anweisung float: left; sorgt dann dafür, dass die Menüpunkte nebeneinander und nicht untereinander stehen.
Allgemeine Anmerkungen
* die Breite des Contents und der rechten Box (Sidebar) müssen zusammen die Breite des Bodys ergeben
* die außer Kraft gesetzten Klassen können wieder eingebaut werden, jedoch behindert dies manchmal die Positionierung
* man kann auch absolut positionieren, aber eigentlich ist diese Art der Positionierung moderner und fehlerunempfindlicher.
mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING |
