Puh! Da hab ich mir echt keinen Gefallen getan mit diesem Entwurf.

Nochmal eine ganz kurze Zusammenfassung: In dem Blog sollen normale Menschen nur einen Teil des beitrages sehen. Registrierte Leser (enge Freunde und Familie) sehen einen weiteren Abschnitt und dazu auch noch einen zweiten Kommentierbereich pro Artikel, der ebenfalls für das normale Volk nicht sichtbar ist. Hinzu kam noch die Schnapsidee, bei dem zweispaltigen Artikel ein Bild unten mittig zu floaten. Das das theoretisch geht, hatte ich ja schonmal gezeigt. In der Blogpraxis ging es dann aber doch nicht so easy, da sich mein Skript durch margins, relative Positionierungen und so weiter ganz schön hat irritieren lassen.
Darum musste ich im CSS jetzt etwas tricksen.

Angucken könnt ihr es  hier. Damit ihr den Effekt auch sehen könnt, gibts mal einen Testzugang:
Benutzername: testuser
Passwort: dummypswd

Nicht verwirren lassen: Der Beitrag mit dem Schneckenjungen hat keinen privaten Teil und bei dem Nest solltet ihr auch keinen sehen können. Da gibt es zwar einen, aber der ist nur für den Admin freigeschaltet (ich kann Beitrage entweder für alle freigeben, oder für eine beliebige Auswahl an Usern. Gruppen werde ich da wohl auch noch einbauen). Nen Beitrag mit öffentlichen und privaten Kommentaren findet ihr  hier.

Geholfen haben mir die Plugins “ WP_PostNotes” (leicht angepasst, um “allen User” die Freigabe zu erteilen, ohne jeden einzeln aufzählen zu müssen) und “ Extra Comment Fields” (um zwischen privaten und öffentlichen Kommentaren unterscheiden zu können). Außerdem hab ich mir dann noch selber ein Plugin geschrieben, um in die Bilder überall diesen schwarzen Rahmen zu bekommen (wobei es eigentlich so gesehen werden soll, dass der Rahmen nicht schwarz ist, sondern der Rahmen dieser 1px in Bildfarbe ist, der nochmal drumrum geht…)

Kurz eine Erklärungsskizze zur Navigation:

Und ja, das war der Hauptgrund, warum hier in letzter Zeit so wenig los war, nicht etwa GTA IV, wie manch einer vermutete. Hab ich echt unterschätzt, was so eine minimalistische Seite mit etwas ungewöhnlicherer Funktionalität doch für einen Aufwand machen kann.

Und jetzt ihr: Was klappt noch nicht, was stört, wie könnt ihr die privaten Sachen sehen, ohne eingeloggt zu sein (keine Angst, ich hab alles gebackupt und es läuft auch auf einer anderen Datenbank als DonsTag, ihr dürft also wuhig wild rumprobieren) und was gibt es sonst für Tricks?
Darstellungsfehler in anderen Browsern als Firefox 2 und Internet Explorer 7 sind mir egal. Hab mir so schon einen abgebrochen ;-)

Fluffi meinte, dass ich mir mit dem kleinen Bild in diesem Entwurf keinen Gefallen tun würde. Und da sollte er Recht behalten, denn mit CSS einen Text um ein Objekt floaten zu lassen, dass an diesem Textblock unten ausgerichtet ist, ist einfach unmöglich (lasse mich gerne vom Gegenteil überzeugen).

Aber ich hab mich ja nicht auf reines CSS festgelegt und so hab ich mal munter mit Javascript gespielt. Und Tada:

Das ganze kann man sich hier in live angucken.
Funktioniert so, dass das rote Kästchen absolut an die richtige Stelle positioniert wird (mittig ans untere Ende des divs, welches die beiden Textspalten umgibt). Und jetzt wird per Javascript in jede Spalte ein weiteres Kästchen gepackt, um das der Text floatet. Dummerweise kann man da nur den oberen Punkt irgendwo im Text platzieren, so dass man die richtige Position finden muss, dass das floatende Kästchen (ist übrigens blau) ganz nach unten geht.
Also packe ich dieses div erstmal ganz an den Anfang von Text, es wird also ganz oben gefloatet. Totaler Quatsch. Dann schiebe ich das floatende div immer ein Wort weiter nach hinten, bis die Position des blauen divs unterhalb (oder gleichhoch) des roten divs ist.
Nicht kapiert, oder? Egal, einfach mal den Quellcode angucken.

Nachdem die linke Spalte so angepasst wurde, kommt die rechte Spalte dran. Dann ist es aber nicht fertig, denn wie man im aktuellen Fall sieht, ist die rechte Spalte länger als die linke. Darum schiebt sich durch das Einfügen des float-Blockes das Ende der rechten Textspalte weiter nach unten und verschiebt somit auch das rote Viereck. Darum muss die linke Spalte nochmal angepasst werden. (Hab das in der Live-Version mal mit Alerts angezeigt)

Und wenn Javascript deaktiviert ist, wird das rote Kästchen momentan gar nicht angezeigt. Kann man sich ja überlegen, wo und wie man es statt dessen anzeigen will.
Wohoo! Ich komme meinem Entwurf immer näher!

Und jetzt könnt ihr mir sagen, wie ihr es gemacht hättet…

PS: Ne bessere Überschrift ist mir nicht eingefallen, sorry…
PPS: Blindtexte von  hier.

Update: Hab mir heute Nacht überlegt, dass das mit meiner Realisierung ja auch mit beliebigen Positionen zwischen den Spalten gehen muss und nicht nur unten fixiert. Darum  hier jetzt eine Version, in der man das rote Kästchen mit drag&drop verschieben kann und sich das Floating dann anpasst. Macht nur Sinn, wenn sich das rote Kästchen zwischen den beiden Spalten befindet.

So, das wird mal ein ganz kurzer Eintrag, wie man ihn auf DonsTag noch nicht gesehen hat. Ein Kollege hat mir heute  gotapi.com gezeigt und ich war hin und weg. Als hätte ich sowas nicht schon immer gebraucht…
Das wars auch schon.

So, nachdem ich mich jetzt 2-3 Tage mit dem neuen Design rumgeschlagen habe (und hey: ich hab wirklich alles in die CSS-Datei gepackt, ich bin sehr stolz auf mich), stell ich es heute mal online. Kleinere Fehler dürften sicher noch drin sein, gerne aber in den Kommentaren hinterlassen.
Was ich bisher schon weiß:

• Der Internet Explorer ist als einziger Browser zu doof, transparente png-Bilder anzuzeigen (der 7er soll es angeblich können, aber die hab ich mit meiner Weiche jetzt auch ausgeschlossen, selber Schuld, nutzt Firefox!), darum bekommen die Nutzer dieses Drecksteils nur gif-Bilder angezeigt (die ganzen Hacks um sie doch anzuzeigen gehen bei meinem CSS-Design nicht, ich hab alles probiert…), wodurch sie keinen schönen Schatten sehen und die Übergänge zwischen Tapete und Objekten halt hart sind. Und schön sind sie auch nicht, habs schnell zu nem gif gerotzt und da nix mehr angeguckt. Wie gesagt: Selber Schuld! Aber vielleicht guck ich mir das nochmal an, der Tag-Zettel rechts sieht unten zum Beispiel ziemlich kacke aus…
• Einen Fehler, den ich jetzt im IE entdeckt hab gab es schon länger: Wenn meine Bilder größer sind als sie sein dürfen, so macht der Firefox sie dank dem tollen “max-width: 100%”-Befehl kleiner. Der IE ist aber auch dazu zu doof und so zerhaut es das Design. Ich werde also alle Beiträge mal durchgehen müssen, bei denen das der Fall ist und im Image-Tag dazuschreiben, wie groß das Bild angezeigt werden soll (oder die Bilder einfach kleiner machen).
• Blockqoutes im Text sehen (Ausnahme: Die beiden “Tach, Post!“-Artikel) noch nicht richtig aus, da fehlt jeweils das Bild oben und unten. Muss ich händisch korrigieren.

Sonst hab ich bisher nichts gefunden, bitte hier in den Kommentaren bugreporten.
Und wem das neue Design gar nicht gefällt, der kann ja mal das hier ausprobieren…

PS: Ja, darum, dass bei “Neue Kommentare” auch wirklich nur Kommentare und nicht auch die Trackbacks (Querverweise) stehen, kümmere ich mich auch noch, versprochen.