Brauche Hilfe bei Umsetzung eines Layouts -> XHTML / CSS Webseite

[Boris]

Moin,

derzeit versuche ich, ein Design in 100% XHTML und CSS umzusetzen.

Das Design sieht so aus:

http://www.kurierdienst-kuehn.de/bilder/layou-shot3.gif

Und das Ergebnis (soweit) ist das:
http://www.kurierdienst-kuehn.de/willkommen/

Die Navigation ist ganz rafiniert, sie besteht nur aus einem einzigen Bild, das mit CSS verschoben wird. Funktioniert auch tadellos.

Leider hab ich jetzt keinen Plan, wie ich weiter machen soll. Zuerst mal ein "Fehler":

Der IE erzeugt im div des Logobereiches (id=header) am Schluss einen 3-4 Pixel breiten, weißen Rand. Ich habe keine Ahnung, wieso. Mozilla/Firebird machen den nicht.

Als nächstes meine Planlosigkeit - ich habe keine Ahnung, wie ich es erreichen soll, dass einmal das entsprechende Bild pro Seite (das Foto links) angezeigt werden soll, und das "Motto" (ist reiner Text) so positioniert wird, dass es im großen blauen Balken rechts unten stehen soll.

Hat jemand ein paar Ideen oder Ansätze zu meinen derzeit zwei Problemen?

Danke und Gruß,

Adagio

[Mausdrachen]

Hallo Adagio

in #motto habe ich einfach padding-top: 100px; eingefügt und im <div id="header"> die Leerzeichen hinter dem img entfernt.
Hier kannst mal schauen, ob es so recht ist *klick* Im IE6 unter WinXP sah es jetzt jeden Falls ordentlich aus.

Liebe Grüsse
Michaela

[Boris]

Hm, das ist aber eine sehr "schmuzige" Art und Weise. Dadurch, dass der Motto-Schriftzug aus Text besteht, wird es 100% Probleme mit verschiedenen Browsern und Auflösungen geben.

Nach dem Bild gibt es keine Leerzeichen, nur Tabs. Die sollten eigentlich nicht stören

Gibt es eine andere Variante?

[Mausdrachen]

Hi Adagio

wieso ist das eine "schmutzige" Lösung? Versteh ich nicht. Das Bild im <div> davor ist mit einer Höhe von 120 definiert, folglich ist das <div> danach genauso hoch. Was ist falsch daran den Abstand von oben dann auf 100px zu setzen für den Text? Ich fange mit CSS erst an, also verzeih eine so dumme Frage.

Und was die Probleme angeht... unter Windows 98 sieht es im Netscape 7.02, Opera 7.11, Mozilla Firebird und IE 5.5 gleich aus. Opera hat allerdings ein Problem nach <div id="navcontainer">. Dort ist auch ein Zeilenabstand zu sehen.

Liebe Grüsse
Michaela

[Boris]

Wer sagt Dir denn, dass der als 18px breit definierte Text auch 20 Pixel hoch ist? (20px + 100px Padding -> 120px Höhe) ;-)

Ich hab Deine Variante mal genommen, aber mit dem unterschied, dass ich für die Texthöhe ebenfalls 20 feste pixel definiert habe (line-height). Scheint zu funktionieren.

Das IE-Problem mit dem Rand ist übrigens jetzt weg.

EDIT:
Opera 7.50 zeigt bei mir alles tadellos an. Welche Version hast Du benutzt?

[Mausdrachen]

hatte es mir mit Opera 7.11 angesehen. Die Leerzeile ist weg. Wer weiß was das gestern war. Aber ich hab da noch eine Kleinigkeit im IE5.5 entdeckt. Das Bild neben dem Motto ragt etwas hervor (siehe Anhang).

[Boris]

Das hab ich bereits erfahren, und ich habe weder eine Idee, noch die Lust, etwas für den CSS-verbuggten IE 5.x oder 5.5 extra zu "optimieren". Außer, jemand weiss, woran es liegt und wie man es schnell ändern kann *g*

[prefix]

Zitat von Adagio

Das hab ich bereits erfahren, und ich habe weder eine Idee, noch die Lust, etwas für den CSS-verbuggten IE 5.x oder 5.5 extra zu "optimieren". Außer, jemand weiss, woran es liegt und wie man es schnell ändern kann *g*

tantek hilft dir

--> ich bin ein link

[Boris]

Ich wüsste nicht, wie mir das bei dem Bildproblem helfen sollte (?) ...

Wie auch immer - im Prinzip hab ich jetzt nur noch ein "Problem" ... für das jetzt variable Layout (100% Breite) müsste ich in einen Variablen Container (DIV1, 100% Breite) einen festen Container (DIV2, 160px Breite) und daneben, ohne dass er "floaten" soll, einen Container plazieren, der die Restbreite einnimmt (DIV3).

Sämtliche Versuche meinerseits sind aber gescheitert. Wie genau das aussehen soll, hab ich mal als Bild beigefügt. Weiß jemand eine Lösung oder Ansatz?

[prefix]

ähm, also das bild ist doch leicht umzusetzen:

a) dem ganzen body margin und padding auf null setzen, background geben
b) dem rosa container: breite 160px, float: left;
c) dem inhalt: margin-left: 160px
d) darunter einen unsichtbaren clearer setzen (under rosa und inhalt)

uw meinst das eh so, oder?

[Boris]

Jup, funzt auch super, danke. Ein Problem aber bleibt - im IE6 (und auch NUR im IE6, IE5 und andere Browser machen das nicht) ist der Text um 2-3 Pixel "verrückt" neben der Subnavi ... das sieht eigenartig aus (?)

[prefix]

das ist der bekannte 3px-bug, der beim floaten im ie6 auftritt -> workaround

[Boris]

Und ich dachte, langsam kommen alle Browser auf einen gemeinsamen Nenner, ohne das man 1903282 Hacks und Workarounds benutzen muss

[prefix]

das wird nicht mal in 10 jahren möglich sein :nein harhar

leider