hover Problem - weis nicht weiter

html.de-Forum HTML, XHTML & CSS
1

HI,
bin neu hier im Forum und hab auch gleich eine Frage.
Ich bin im Moment eine HP in einem einfachen Editor (htmledit…ist ein Programm von der Schule, die HP ist auch eine Schulaufgabe) am erstellen.
Ich will einen hovereffekt bei Buttons einbauen, jedoch funktioniert dies nur teilweise.

[code]
.hover {
text-decoration: none;
border:0;
margin: 0 auto;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 110px;
height:20px;

                background: url("http://img520.imageshack.us/img520/4918/buttongstebuchcssbr6.gif") 0 0 no-repeat;
    }
        .hover:hover {background-position: -110px 0;}
        .foo
     {   background: url("http://img503.imageshack.us/img503/3453/buttonberufswnschecssfh4.gif") 0 0 no-repeat;}
        .foo:hover{background-position: -110px 0;}
        .bar
        {background: url("http://www.pictureupload.de/originals/pictures/120808172035_Button_Home_CSS.gif"} 0 0 no-repeat;}}
        .bar:hover{background-position: -110px 0;}




    body {
        font-size: 15px;
        font-weight: bold;
        text-align: center;
    }
    </style>

…


[/code]Jetzt zum eigentlichen Problem:
Mir wird kein Button angezeigt der zu „bar:hover“ zugeordnet ist. Bei .foo:hover funktioniert alles einwandfrei. der Verweistag ist genau der selbe, abgesehen von „hover bar“ und „hover foo“.
Welche Befehle anstatt „foo“ und „hover“ kann ich noch benutzen ? Ich habe schon irgendwas anderes versucht wie Button3 oder so. komischerweise funktioniert dies aber nicht.
Bei den anderen zwei Buttons klappt alles wunderbar und so wie es soll.
Ich weis einfach nicht wo der Fehler liegt und hoffe dass mir hier weitergeholfen wird.

MfG .:Flo:.

2

Du hast bei .bar zu viele geschwungene Klammern:arrow:{}.

In deinem Code steht:.bar {background: url("http://www.pictureupload.de/originals/pictures/120808172035_Button_Home_CSS.gif"} 0 0 no-repeat;}}
Nach dem Pfad zum gif-Bild ist eine überflüssige geschwungene Klammer und ganz am Ende ist auch eine zu viel.

Bereinigt sieht der Code so aus: .bar {background: url("http://www.pictureupload.de/originals/pictures/120808172035_Button_Home_CSS.gif" 0 0 no-repeat;}

Ansonsten blicke ich bei deiner Strukturierung und Zuweisung allgemein nicht so ganz durch, aber solange es so funktioniert, wie du es machst…

3

Ansonsten blicke ich bei deiner Strukturierung und Zuweisung allgemein nicht so ganz durch, aber solange es so funktioniert, wie du es machst…

:lol:
Bin noch nicht so vertraut damit, alles rein mit den Codes zu machen. Vorher habe ich immer mit GoLive gearbeitet.

Aber danke, hat geklappt. Da muss man höllisch aufpassen mit den Klammern xD

4

:mrgreen:
Es hilft sehr, wenn man das Ganze in eine übersichtliche Form bringt, z.B.:

[code].hover {
text-decoration: none;
border:0;
margin: 0 auto;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 110px;
height:20px;
background: url(„http://img520.imageshack.us/img520/4918/buttongstebuchcssbr6.gif“) 0 0 no-repeat;
}

.hover:hover {
background-position: -110px 0;
}

.foo {
background: url(„http://img503.imageshack.us/img503/3453/buttonberufswnschecssfh4.gif“) 0 0 no-repeat;
}

.foo:hover {
background-position: -110px 0;
}

.bar {
background: url(„http://www.pictureupload.de/originals/pictures/120808172035_Button_Home_CSS.gif“} 0 0 no-repeat;
}

.bar:hover {
background-position: -110px 0;
}[/code]
Dann sieht man gleich, ob irgendwas an einer Stelle aus dem Rahmen fällt.
Ansonsten kann ich dir noch folgende Seite empfehlen: The W3C CSS Validation Service
Da kannst du dein CSS automatisch auf Fehler überprüfen lassen.

5

Da ist ja auch kein Inhalt in Deinem Link. Also ist da auch nichts, was angezeigt werden kann. Da ein Inline-Element ist, wird seine Größe auch nicht durch die Größe des Hintergrundbildes beeinflusst, wie Du vielleicht meinst. Dazu bräuchte es noch ein display:block; und die Angabe einer Größe.

Gruß,
-Efchen