Kubrick Theme - header-Bild mit hover

Ich habe schon eine viertel Ewigkeit hier im Forum und in den restlichen Welten des Internets gesucht, aber nirgends eine Antwort auf die folgende Frage gefunden:

Ich arbeite gerade mit dem Kubrick Theme und habe die Überschriften aus dem Header entfernt. Später habe ich dann eingestellt, dass das komplette header-Bild als Homelink funktioniert, aber jetzt habe ich ein Problem: ich möchte einen Hover-Effekt einstellen, so dass man beim über das Bild fahren eine leicht veränderte Version des Headers zu sehen bekommt, habe aber keine Ahnung, was ich dafür in diesem Fall tun muss, weil das Header-Bild im stylesheet ja nicht als Hintergrund-Bild für einen Link angegeben ist.

Die Seite liegt gerade auf einem Testserver: The Jazzters - Junior Big Band Nersingen

So, jetzt bin ich mal gespannt, ob und wie das Ganze funktioniert - ich hoffe, jemand kann mir weiterhelfen; für alle Versuche bedanke ich mich schonmal im Voraus ;-)

Wenn ich das gegen einen normalen Link austausche, muss ich den doch um den div-Tag setzen, was zwar funktioniert, eigentlich aber nicht erlaubt ist - oder?

Ah, okay - wo kommen dann die Definitionen für hover, visited, etc. hin?

Edit:

<div id="headerimg" a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" />
        
        <!--<h1><?php bloginfo('name'); ?></h1>
    
        <div class="description"><?php bloginfo('description'); ?></div> --!>
    </div></a>

funktioniert nicht :-(

Weiß sonst niemand einen Rat? Ich dachte eigentlich, dass es für das Problem eine einfache Lösung gibt, aber ich bin jetzt schon Stunden daran gesessen und habe herumprobiert - ohne Erfolg.

Hab ich gemacht, jetzt wird überall das header als Link-Hintergrund genommen (in content und sidebar^^), aber nicht im Header.

header.php

<div id="header">
    <div id="headerimg"><a href="">
        
        <!--<h1><?php bloginfo('name'); ?></h1>
    
        <div class="description"><?php bloginfo('description'); ?> --!></a></div>
    </div>

stylesheet:

#headerimg     {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }




#headerimg a:link, a:visited { 
height: 192px;
width: 740px;
background: #000000 url('images/kubrickheader.jpg') no-repeat bottom center;
}


#headerimg a:hover, a:active { 
height: 192px;
width: 740px;
background: #000000 url('images/kubrickheader_h.jpg') no-repeat bottom center;
}

Kann mir jemand sagen, wo da jetzt der Fehler liegt? Ich steh gerade echt aufm Schlauch :confused:

Jetzt verschwindet das Hintergrundbild des Inhaltbereichs und der Header hat immer noch keinen hover-Effekt.

header.php:

<div id="header">
    <div id="headerimg"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >
        
        <!--<h1><?php bloginfo('name'); ?></h1>
    
        <div class="description"><?php bloginfo('description'); ?> --!></a></div>
    </div>

style.css

#headerimg     {
    margin: 7px 9px 0;
    height: 192px;
    width: 740px;
    }




#headerimg a:link, #headerimg a:visited { 
height: 192px;
width: 740px;
background: #000000 url('images/kubrickheader.jpg') no-repeat bottom center;
}


#headerimg a:hover, #headerimg a:active { 
height: 192px;
width: 740px;
background: #000000 url('images/kubrickheader_h.jpg') no-repeat bottom center;
}

Das mit dem Hover funktioniert jetzt, dafür ist das komplette Design zerschossen :mrgreen:

The Jazzters - Junior Big Band Nersingen

Gibt's dafür jetzt noch eine Lösung? Danke schonmal für die bisherige Hilfe.

Das zerschossene Design hat hiermit was zu tun:

<div id="page">


<div id="header">
    <div id="headerimg"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >
        
        <!--<h1><?php bloginfo('name'); ?></h1>
    
        <div class="description"><?php bloginfo('description'); ?> --!></a></div>
    </div>    
</div>

Wenn ich das durch die frühere Option ersetze, funktioniert alles, nur der Header wird nicht mehr angezeigt.

Edit: Lang scheinbar an dem letzten div-Tag, den hab ich jetzt gelöscht und es funktioniert.

Vielen Dank für die Hilfe ;-)

So, ich bins nochmal. Bei mir funktioniert das alles prima (Firefox, Google Chrome und Safari) aber der Internet Explorer zeigt totalen Schwachsinn an. Ich hab versucht ein zweites Stylesheet für ihn einzusetzen, aber das kriege ich nicht richtig hin und so kann ich die Seite schlecht lassen (den IE nutzen immerhin knapper 30% aller Internet-Nutzer).

Weiß jemand, wie ich das in den Griff kriegen kann?

Und wie soll ich ihn korrigieren, so dass das mit dem Hover trotzdem funktioniert?

<div id="header">
	<div id="headerimg">
		
		<a href=""></a>
	</div> </div>

Es funktioniert :-)
Vielen dank für den Tipp - ich bin noch Anfänger in html und CSS und deshalb erkenne ich solche falschen Verschachtelungen - vor allem bei Dateien, die ich nicht selbst geschrieben habe - meist nicht.