ô.Ô Du Chrissyx du definierst viel zu viel. Divs funktionieren komplett anders als Tabellen.
Dein Problem ist, dass du versuchst eine feste Strucktur zu nehmen.
Am Besten guckst du dir nochmal andere Layouts an:
http://www.css4you.de/wslayout1/ex0010.html
http://matthewjamestaylor.com/blog/perfect-3-column.htm

Im Prinzip ist es eigentlich ganz einfach

Ich hab mal eine funktionierende Beispielversion gemacht, die ich mal hochladen kann. Ansonsten ICQ...

Das Beispiel von daniel ist hier. Darauf aufbauend hab ich dann das versucht, bis ich merkte, die absoluten DIVs sind irgendwie nicht flexibel und "haben keine Masse". Da alles per Pixelangaben vorgegeben ist, muss ich alles wieder neu verschieben, wenn auch nur eine Zeile Text hinzukam, da die DIVs sich nicht beeinflussen und automatisch mit verschieben. Man beachte auch das HR ganz oben, was eigentlich unter den DIVs liegen sollte.

Quote by T3rrabug:

http://www.css4you.de/wslayout1/ex0010.html

Das Beispiel schockt ja richtig. Hab dann mal das hier gebastelt, was im Prinzip schon nicht schlecht ist. Leider auch hier zerschossene Darstellung im IE7; die "about you"-Box sitzt rechts neben dem "ticker" und "commu" sitzt manchmal unter "news". (Zur besseren Unterscheidung sind die DIVs eingefärbt und ohne Rahmen, da sonst nie 100% Breite möglich ist.)

Ideen, wie man das für IE7 fixen kann?

Divs darf man semantisch auch gruppieren
Sprich
<div name="komischen Krempel den eh keiner liest">
<div…about you
…
</div>
Macht übrigens das das CSS-rumregeln etwas einfacher

Un zu deinem Versuch auf daniels code: "position:absolute;" ?!? AAAAAAAAAAAAAARRRRRRRRRRRGH

Was du bisher, ohne dir zu Nahe tretten zu wollen, noch nicht verstanden hast, ist das divs ziemlich flexibel sind und überhaupt nicht in so nem festen Raster liegen wie Tabellen.
Lesestoff:
http://www.stichpunkt.de/css/bereiche.html
http://www.webwriting-magazin.de/sogehts/cssebenen.shtml

1)

Quote:

Leider auch hier zerschossene Darstellung im IE7

=> Wechsel den Browser, IE SUXX

2) DIV und Absolute is MURKS.. je mehr feste Größen du einbaust desto mehr arbeit machst du dir. Der Vorteil von DIV's ist ja gerade die Flexibilität

3) Irgendwie sind das zuviele Posts um herauszufinden was du machen willst..naja egal *gg*

4) Wieso bin ich schon wieder hier..DU BIST SCHULD

5) Meld dich mal im ICQ Gimp

Quote by T3rrabug:

Un zu deinem Versuch auf daniels code: "position:absolute;" ?!? AAAAAAAAAAAAAARRRRRRRRRRRGH Was du bisher, ohne dir zu Nahe tretten zu wollen, noch nicht verstanden hast, ist das divs ziemlich flexibel sind und überhaupt nicht in so nem festen Raster liegen wie Tabellen.

Das hab ich auch gemerkt. Und absolute DIVs sind wohl nicht so der Renner. Hab's dann hingekriegt, mit "clear:both" statt nur "right" und schon waren alles DIVs an ihrer Stelle.
http://www.chrissyx.com/beta/v4/
Komplett ohne Tabelle, alles valides XHTML und valides CSS. DIVs sind wieder eingefärbt.
Nun zufrieden?

Quote by RangerX:

1) Quote: Leider auch hier zerschossene Darstellung im IE7 => Wechsel den Browser, IE SUXX 2) DIV und Absolute is MURKS.. je mehr feste Größen du einbaust desto mehr arbeit machst du dir. Der Vorteil von DIV's ist ja gerade die Flexibilität 3) Irgendwie sind das zuviele Posts um herauszufinden was du machen willst..naja egal *gg* 4) Wieso bin ich schon wieder hier..DU BIST SCHULD 5) Meld dich mal im ICQ Gimp

1) Ich kann auch wieder die IE only Schiene fahren.
2) /kick "position:absolute"
3) Im Moment eigentlich nur ein paar Vorbereitungen zur Version 4.0 meiner Seite. Das bedeutet XHTML und auch DIVs statt TABLEs.
4) Passt schon. Hast dich nicht verlaufen.
5) Hab.

Quote by Chrissyx:

http://www.chrissyx.com/beta/v4/ Komplett ohne Tabelle, alles valides XHTML und valides CSS. DIVs sind wieder eingefärbt. Nun zufrieden?

Sehr schön. Falls die nächste Version auf dem Versuch basiert:
-Overflow stimmt im FF und in Opera gar nicht. Besonders die Spalte rechts hängt über U.U. mit min-width arbeiten, aber Vorsicht bei Browserkompatibilität.
-ersetz das JS in den Menus durch CSS. Stichwort: Tree Frog
-einiges ist überdefiniert z.B. im Footer packst du grundlos spans in divs
-ich bin zwar nicht so der Semantik oder SEO Guru, aber ich glaub zumindest konsequente Nutzung von Überschriften würde dir mehr Besucher bescherren

Quote by T3rrabug:

-Overflow stimmt im FF und in Opera gar nicht. Besonders die Spalte rechts hängt über U.U. mit min-width arbeiten, aber Vorsicht bei Browserkompatibilität.

Also im FF kann ich kein Fehlverhalten feststellen. Oder meinst Du bei kleineren Auflösungen?

Quote by T3rrabug:

-ersetz das JS in den Menus durch CSS. Stichwort: Tree Frog

Hab's mir angesehen, aber auch hier ist's eine Mischung aus JS und CSS - wie bei mir auch, nur dass mein Menü ein Tick leetiger ist (+/- Wechsel). Nimmt sich nicht viel, sind eigentlich auch die selben Funktionen auf gleichem Wege realisiert. Solange bei meinem Menü keine Probleme auftreten, bleib ich erstmal dabei.

Quote by T3rrabug:

-einiges ist überdefiniert z.B. im Footer packst du grundlos spans in divs

Naja, grundlos sicher nicht, die SPANs dienen zur Schriftgröße. Sicher, man kann's mit dem DIV bündeln, muss ich nochmal gucken.

Quote by T3rrabug:

-ich bin zwar nicht so der Semantik oder SEO Guru, aber ich glaub zumindest konsequente Nutzung von Überschriften würde dir mehr Besucher bescherren

Ob ich Bild oder Schrift als Überschrift nehme, lass ich mir von keiner Suchmaschine vorschreiben. Die haben Meta-Tags und andere Sachen (robots.txt) zum Spielen.

Keine Ahnung was für ne Auflösung du hast, aber bei mir tappsen die Buchstaben über den Rand.

Sorry hab da die Menus vertauscht. In allen Browser geht ein festehendes anscheinend nur mit Javascript. Dafür könnteste das wenigstens auschlacken. + bzw. - wirste ja wohl auch noch schaffen.

Bilder als Überschrift sind auch durchaus legitim. Eigentlich sollte man da Image Replacement einsetzten, aber muss ja nicht so umbedingt. Trotzdem gibts noch h2 und h3 Auf eine gute Platzierung in den Suchmaschinen würd ich persönlich nicht scheißen.

Ups. Garnicht gesehen, dass du an einer neuen Version deiner Seite bastelst Deshalb mal kurz my 4 cents:

1. Die von T3rrabug angesprochenen Buchstaben passen bei mir (haargenau).

2. IE7 hat´s nicht so recht mit der korrekten Darstellung von divs bei zu kleinen Auflösungen (z.B. 480x320). Vielleicht kennt T3rrabug da ein Workaround!?

3. Zum Beispiel in Zeile 252:
<img src="images/null.gif" alt="" /><img src="images/null.gif" alt="" /><img src="images/null.gif" alt="" /><a href="archiv2008.php">-2008</a><br />
macht bei mir:
<img src="images/null.gif" width="3" /><a href="archiv2008.php">-2008</a><br />

4. Keiner weiß, was Google wirklich freut, aber Überschriften zählen zu den kleinen Geschenken, die Google dankend anerkennt. Wenn man den Beweisen trauen mag, sind H2 wesentlich lieber gesehen als H1 und (natürlich) H3...

1) Bei mir (1680x1050) sind auch alle Buchstaben dort, wo sie sein sollen. Was noch optimiert werden muss, sind die Abstände zwischen den DIVs.

2) 480x320? Surfst Du mit einem PDA oder so?

3) Hm, stimmt, das lässt sich machen.

4) Evtl. als Überschriften bei Submenüs, wo keine Bilder sind.

Quote by Chrissyx:

1) Bei mir (1680x1050) sind auch alle Buchstaben dort, wo sie sein sollen. Was noch optimiert werden muss, sind die Abstände zwischen den DIVs.

und padding. Bei mir auf 1680x1050 gehts auch, aber die Buchstaben fangen direkt am Rahmen an. Das ist unschön also padding padding padding
Außerdem springt die Textbox rechts ab und zu mal aus dem div heraus: Overflow. Aufm Crt mit 1024x768 gehen die Buxhtsaben rechts weiter als das div

@Marzel ich glaub nicht, dass es da nen Workaround gibt.

@Chrissyx: Kein PDA, aber manchmal IE im kleinen Fenster auf ca 50%

@T3rrabug: Sag doch gleich, dass du padding meinst Fände ich auch schöner...

Habe die Seite gerade mal mitm Handy aufgerufen. Darstellung war soweit ok, was mich aber verwundert hat, war der Banner von Shortnews.de. Den sehe ich bei mir (FF2) garnicht

Overflow guck ich mir noch an. Bis dahin, hab ich die Navigation erheblich entschlackt und konnte dank pading-left sogar auf die null.gif Bilder als Abstandshalter komplett verzichten! Dann per marign-left etwas (1%) Abstand der News Box beigebracht und sonst noch floats+clears optimiert. Außerdem die brandneue Shoutbox, an der ich 3-4 Tage poliert hab: Valides XHTML, Caching Funktion (!), Mehr Smilies, Reload, Seitennavigation im Archiv, FF tested - probiert's mal aus.
http://www.chrissyx.com/beta/v4/

Keine Rückmeldung? So schlecht?

Ich kenn mich damit ja nicht aus,aber fehler finde ich bei mir im Browser nicht...

das problem ist wohl, dass ich genauso wie viele andere, wohl nie die Hauptseite besuche Im FF richtig hässlich im IE ganz ok, weiter so^^

wOOtZ, weiter an V4 gearbeitet:
http://www.chrissyx.com/beta/v4/
Abstände, margins und floats optimiert, so langsam komm ich dahinter. Außerdem: "Bangboy says" Feature eingebaut.
Und alles weiterhin valides XHTML.

Opera 9.5 unter Vista bei 1650x1050
Außerdem könntest du die Shoutbox eh nochmal überarbeiten:
-Resetbutton? Der stört mehr als das er irgendeinen Mehrwert bring.
-etwas zuviele Smilies
-Die Knöpfe sollten etwas übersichtlicher gruppiert sein

Der Text ist ziemlich hoch skaliert bei dir, oder? Jedenfalls sollte die Box nicht breiter sein als die Buttons bzw. Smilies darunter.
Wenn ich dem DIV eine min-width verpasse (170px und die Box wandert nicht mehr raus), rutscht das gesamte rechte Menü allerdings unter das News-DIV... Bei Tabellen konnte das nicht passieren, Idee wie man das mit DIVs lösen kann?

Smilie-Anzahl ist nicht fest vorgegeben, das kann jeder für sich entscheiden und ich find 2 Reihen Smilies ganz nett.