Header mit mehreren Bilder/Links mit CSS aufgebaut

Hallo alle zusammen!

Ich bin neu hier und sitze nun schon eine ganze Weile an der Erstellung/Design meines zukünftige Blogs mit WordPress. Dabei stoße ich auf ein Problem, welches ich absolut nicht in den Griff bekomme und hoffe, mir kann jemand die Tomaten auf den Augen entfernen:

Ich möchte gerne einen Header bauen, der aus insg. 4 Divs besteht.
Alle 4 haben einen Rahmen und ein Bild.
Drei davon sind verlinkt und zusätzlich mit einem RollOver-Bild versehen.
Anbei eine Skizze des Grundgerüsts.

Baue ich das nun in einer normalen HTML-Datei vor, funktioniert Positionieren und Verlinkung mit ein paar kleinen CSS Tricks perfekt.

Trage ich das in den Header von einem Theme ein, zerwirft es mir die ganze Seite.

Angefangen habe ich mit Blix und einer tabelle im header (also ohn CSS), das fand ich unelegant! Ich möchte es gerne CSS basiert hinbekommen !

Also erst als HTML Datei aufgebaut und getestet, dann auf die header.php übertragen und das Stylesheet angepasst. Blix wurde zerrissen! Falling Dreams auch und einige andere auch. HILFE!

Nachdem ich nun schon wirklich den ganzen tag und abend herumteste, frae ich doch mal hier im Forum. Vielleicht hatte ja schonmal jemand ein ähnliches Problem?

Hier ist der Code, den ich in den Header einbaue:

<div id="header">
<div id="head1">head eins</div>
<div id="head2">
head Zwei
</div>
<div id="head3">
head Drei
</div>
<div id="head4">
head Vier
</div>
</div>

Und hier die CSS-Definitionen:

#container {
background: #A09687;
width: 688px;
position: absolute;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
height: 100%;
left: 200px;
}
#header {
background: #ffffff;
position: relative;
width: 688px;
height: 161px;
}
#head1 {
height: 144px;
width: 175px;
border: solid 3px #6A5D44;
margin-right: 3px;
margin-bottom: 3px;
position: absolute;
top: 0px;
left: 0px;
}
#head2 {
height: 144px;
width: 362px;
border: solid 3px #91000D;
margin-right: 3px;
margin-bottom: 3px;
position: absolute;
top: 0px;
left: 184px;
}
#head3 {
height: 68px;
width: 127px;
border: solid 3px #91000D;
margin-bottom: 3px;
position: absolute;
top: 0px;
left: 555px;
}
#head4 {
height: 67px;
width: 127px;
border: solid 3px #A09687;
margin-right: 0px;
margin-bottom: 3px;
position: absolute;
top: 77px;
left: 555px;
}
#header a {
display: block;
height: 150px;
}
#header a h1 {
margin: 0;
padding: 0;
}
#head1 a:link {
background: url(images/spring_flavour/bild1.gif);
}
#head3 a:link {
background: url(images/spring_flavour/bild3.gif);
}
#head3 a:hover {
background: url(images/spring_flavour/bild3__f2.gif);
}
#head4 a:link {
background: url(images/spring_flavour/bild4_.gif);
}
#head4 a:hover {
background: url(images/spring_flavour/bild4_f2.gif);
}

Kann jemand das verstehen? Kann jemand helfen??? Ich würde mich wahnsinnig freuen!


Liebe Grüße!

Iris

 

herzlichsten Dank zuerst einmal!

Ich werde das heute ausprobieren, ich denke zwar nicht, dass es an den margins und paddings liegt, bin aber sehr gespannt und lasse mich gerne eines besseren belehren

Den Befehl kannte ich noch nicht. Das verstehe ich nicht ganz, wieso?

Sollte das nun absolut nicht funktionieren stelle ich mal einen schönen screenshot rein von dem chaos, aber vielleicht kommt es ja nicht soweit!

Und ohne der Firefox Webdeveloper Ex hätte ich schon längst aufgegeben.

Die habe ich ja benutzt und angepasst!

Ich werde mal die padding-margin-nummer an einem einfachen theme testen und gebe hoffentlich positive Rückmeldung!

Liebe Grüße, Iris