Hallo,
kenne mich nicht so gut in html und css aus.
habe im Internet eine Anleitung gefunden, wie ich aus meinen Photoshop Slices eine Webseite machen kann.
Ich stecke jedoch bei der Navigation fest. Ich möchte eine horizontale Navigation, die über buttons funktioniert.
dafür habe ich folgendes in meine html datei geschrieben:
[code]
[/code]und folgendes in die CSS Datei: #navi ul, li
{
padding:0px;
/* Innenabstand in den Elementen */
margin-top:3px;
/* Abstand nach oben, damit sie nicht zusammenhängen */
}
#navi
{
margin-left:0px;
/* Abstand nach links in der ganzen Navigation */
width:700px;
/* Gesamtbreite */
text-align:middle;
/* Textausrichtung in der Navigation */
margin:0px;
/* Außenabstand */
paddin:0px;
/* Innenabstand */
overflow:hidden;
/* Alles was über width und height geht wird abgeschnitten und nicht gezeigt */
}
#navi a
/* alle "a-Elemente" im div-Block navi haben folgende Eigenschaften */
{
display:inline;
/* das Element a wird zum Block Element */
width:175px;
/* Die Breite der Bilder wird festgelegt */
height:28px;
/* Die Höhe der Bilder wird festgelegt (-x padding) */
padding-left:0px;
/* Damit der Text nicht am Rand klebt */
}
.b1 a
/* wirk sich auf das element a aus */
{
background-image:url(img/button_left.gif)
/* Hintergrund für Button 1 */
}
.b1 a:hover
/* Button 1 Mouseover */
{
background-image:url(img/button_rollover_left.gif)
/* Hintergrundbild für Button 1 als Highlight */
}
.b2 a
{
background-image:url(img/button_middle_1.gif)
}
.b2 a:hover
{
background-immage:url(img/button_rollover_middle_1.gif)
}
.b3 a
{
background-image:url(img/button_middle_2.gif)
}
.b3 a:hover
{
background-immage:url(img/button_rollover_middle_2.gif)
}
.b4 a
{
background-image:url(img/button_right.gif)
}
.b4 a:hover
{
background-image:url(img/button_rollover_right.gif)
}Leider wird das, was ich in der CSS datei beschrieben habe nicht in die html datei umgesetzt. Weiß jemand was ich tun kann, damit es funktioniert?
