Header mit mehreren Bilder/Links mit CSS aufgebaut

[FONT=Arial]Hallo alle zusammen![/FONT]

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:

[COLOR=sienna]<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>[/COLOR]

Und hier die CSS-Definitionen:

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

[COLOR=black]Kann jemand das verstehen? Kann jemand helfen??? Ich würde mich wahnsinnig freuen![/COLOR]
;)

Liebe Grüße!

Iris

herzlichsten Dank zuerst einmal!:D

Zitat von jowra

- setzt erst mal alle paddings und margins auf 0, daß kannste später dann anpassen
- laß die links erst mal weg, die können wieder rein wenns paßt
- du mußt keine DIVs nehmen wenn ich das richtig sehe, die Formatierung funzt auch einfach über die Images per #ID
- ich würde es floatend machen nicht per absoluter Positionierung (was nicht heißen soll, daß darin der fehler liegt
- "display: block" wird m.E. zu inflationär gebraucht. Ein Image oder ein DIV IST ein Block-Element, wozu noch diese Deklaration?

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:D

Zitat von jowra

Zuletzt hebst Du das Floating-Gedöns dann per <div style="clear: both;"></div> oder ähnlich auf.

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

Zitat von jowra

Anyway... da ich nicht weiß, wie Dein "zerissenes Layout" nun zerissen ist, spekuliere ich mal darauf, daß die Summe aller width, margins und paddings Deine Header-Breite, respektive Deine Container-Breite sprengt. Ich war jetzt aber zu faul um nachzurechnen.

Wie immer der Hinweis auf die Web-Developer-Extension für den Firefox.

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.

Zitat von telekommander

1.Möglicherweise liegt es auch daran, das es im Org.-Theme schon eine "header" ID und/oder "container" ID gibt .

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