CSS Sprite funktioniert nicht

[Anon]

Hallo Allesamt!,

bin neu hier, und auch relativ frisch in html/css
Hab zwar schon einiges an Büchern durch aber naja..
Vielleicht kann mir jemand helfen, bei einem Problem das ich schon 3 Tage nicht in den Griff bekomme:

Ich hab mir ein einfaches Layout erstellt, und will den Logo ( "Button" ) Schriftzug, mit einem CSS Sprite,
einen Hover Effekt verpassen.

Das ganze zeigt mir komischerweiße grad garkein Bild an.

Hier mal die Seite ( nicht wundern, ist nur zum üben derzeit ^^ )
http://imba.square7.ch

Vielleicht kann mir jemand sagen was falsch ist


Danke schon mal!

[wildmieze]

aaalso ..

Zunächst mal hast Du das Hintergrundbild nicht dem <a> zugewiesen, sonderm dem #header. Damit kann das hovern schonmal nicht funktionieren.
Das Bild wird im header nicht angezeigt, weil Du dem #header keine Größe zugewiesen hast. Die Größe wird dadurch vom Inhalt bestimmt, und da hast Du ebenfalls nichts außer ein leeres <a>. Ist hier aber nicht so wichtig, das Bild gehört hier ja eh nicht hin

Einem <a> kannst Du übrigens auch keine Breite und Höhe zuweisen, weil es ein sogenanntes "Inline-Element" ist. Das geht nur bei "Block-Elementen" - dafür nimmt man dann im CSS i.d.R. "display:block;".

Versuchs mal so (Dein CSS ab #header ersetzen):

#header {
}

#header a {
  display:block;
  background: url(image/csg-4e46aa0a171c7.jpg) no-repeat;
  background-position: 0 0;
  width: 441px;
  height: 90px;
}

#header a:hover {
  background-position: -140px 0;
}

... falls Du Dich jetzt über den grauen Kasten neben dem Logo wunderst: Du hast dem #wrapper die Hintergrundfarbe #CCC zugewiesen ..
..

[Anon]

Hallo,

klappt super danke dir!
Hab das wohl irgendwie übersehen... naja, daraus lern ich wenigstens was

Danke noch mal!