Rollover Bild im Header?

Es geht nur, wenn der gesamte Header verlinkt ist.

Über ein Beipiel wäre ich auch sehr froh. Mir würde es allerdings schon reichen, wenn ich erfahren könnte wie man den Header mit einer Grafik füllr bzw. ersetzt.

Rolloverbild im Header

Möchte im Header ebenfalls Rolloverbilder (siehe Fotomontage). Dachte, dass man das mit Layer und Position macht und dann den Rollover-Effekt auf die Bilder anwendet.

Doch wie könnte so ein Code im CSS aussehen? Und was schreib ich im header.php?

Niemand da, der eine Lösung hat? Hab zwar wenig Ahnung von CSS, aber trotzdem mal ausprobiert.

In der CSS-Datei steht:

.button_history  { background-color: transparent; background-image: url(images/button_history.gif); background-repeat: no-repeat; background-attachment: scroll; width: 90px; height: 90px; margin: 100px 0 0 50px; }


.button_history a:hover { background-color: transparent; background-image: url(images/button_history_over.gif); background-repeat: no-repeat; background-attachment: scroll; width: 90px; height: 90px; margin: 100px 0 0 50px; }

Und im header.php hab ich eingefügt:

<div class="button_history"></div>

button_history.gif erscheint zwar nun an gewünschter Stelle, aber der Rollover button_history_over.gif funktioniert nicht.

Des weiteren hab ich ein grosses Bild "header.jpg", die Buttons sollen aber als "schwebender Rahmen" oben drauf erscheinen. Momentan verschiebt sich einfach das "header.jpg".

Ach ja, verlinken will ich die Buttons natürlich auch noch. Wo und wie mach ich das?
Wer kann mir hier weiterhelfen?

Layer richtig positionieren

Hab das meiste nun selbst herausgefunden. Nur: Wie platziere ich den Button an richtiger Stelle? Das ganze müsste in einem Rahmen stehen, der 887 px Breite hat und auf die Seite zentriert ist. Darin der Button mit 30 px von oben und 100 px von Links. Wie geht das?

Nachfolgend der Code für Button im Header.

Im header.php steht:

<div id="button_history"><a href="<?php echo get_settings('home'); ?>"> </div>

In der CSS-Datei steht:

#button_history a { width:90px; height:90px; display:block; background-image:url(images/button_history.gif); background-repeat:no-repeat; position: absolute; top: 30px; left: 100px; }
#button_history a:hover {
width:90px;
height:90px;
display:block;
background-image:url(images/button_history_over.gif);
background-repeat:no-repeat;
}

Layer richtig positionieren

Hab das meiste nun selbst herausgefunden. Nur: Wie platziere ich den Button an richtiger Stelle? Das ganze müsste in einem Rahmen stehen, der 887 px Breite hat und auf die Seite zentriert ist. Darin der Button mit 30 px von oben und 100 px von Links. Wie geht das?

Nachfolgend der Code für Button im Header.

Im header.php steht:

<div id="button_history"><a href="<?php echo get_settings('home'); ?>"> </div>

In der CSS-Datei steht:

#button_history a { width:90px; height:90px; display:block; background-image:url(images/button_history.gif); background-repeat:no-repeat; position: absolute; top: 30px; left: 100px; }
#button_history a:hover {
width:90px;
height:90px;
display:block;
background-image:url(images/button_history_over.gif);
background-repeat:no-repeat;
}

Und hier meine eigene Antwort:

#header in der CSS-Datei ergänzt (analog #page):

#header { 
background-image: url(images/header.jpg); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center; 
text-align: left; 
position: relative; 
width: 887px; 
height: 280px; 
margin: 0 auto; 
padding: 0; 
border-style: none;
}

Alternative zu position: absolute?

Leider funktioniert die Positionierung im IE 6 + 7 nicht.
Gibts eine Alternative zu position: absolute?

hassu mal nen link?

Problem gelöst - Buttons im Header richtig positioniert

Konnte Problem lösen. Musste für die Buttons in der CSS-Datei

margin-top: 0;
margin-bottom: 0;

rausnehmen

NEU:

#header .button_history a { 
width:90px; 
height:90px; 
display:block; 
background-image:url(images/button_history.gif); 
background-repeat:no-repeat; 
position: absolute; 
top: 181px; 
left: 28px; 
}

Link zur Testseite: http://www.fpoint.ch/wucoco
(später dann auf http://www.epmaus.ch)