Horizontale Navigation
Horizontale Navigation
Anmerkungen:
Diese Navigation kann nur mit dem Homepage Baukasten mit dem
CSS Design verwendet werden. Ich habe euch die Stellen makiert die ihr noch
anpassen müsst. Wichtig: Für diese Navigationen benötigt ihr 2 Buttons.
-Fogende Codes fügt ihr im Feld "CSS Code ohne Style Tags" ein:
-Blau: Hier könnt ihr die Breite des Buttons verändern.
-Rot: Hier könnt ihr die Höhe des Buttons verändern.
-Orange: hier kommt die URL zum Button hinein
-Grün: Hier bestimmt ihr die Schriftfarbe
der Buttons in HTML-Nationen.
Eine Farbtabelle findet ihr hier!
-der Buttons müssen in der Breite jeweils 10px größer sein als die
Angaben die ihr hier macht, wegen dem Paading.
li.nav_element a{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 115px;
height: 25px;
background-image:url(BILD-URL);
}
li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 115px;
height: 25px;
background-image:url(BILD-URL);
}
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 115px;
height: 25px;
background-image:url(BILD-URL);
}
li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 115px;
height: 25px;
background-image:url(BILD-URL);
}
-Folgendes ist nun das Feld wo die Buttons nachher drin sind
-Es ist für 6 Buttons ausgelegt,
wenn ihr die Angaben nicht oben ändert
-Blau: Hier könnt ihr die Breite des Felder verändern.
-Rot: Hier könnt ihr die Höhe des Feldes verändern.
-Orange: hier kommt die URL zum Hintergrund des Feldes hinein
#nav_container {
float: left;
color: #333;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 35px;
width: 530px;
display: inline;
background-image:url(BILD-URL); }
float: left;
color: #333;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 35px;
width: 530px;
display: inline;
background-image:url(BILD-URL); }