HTML? Ich tweet dir gleich einen...

Philipp benutzt Twitter! Ich weiss, im Zeitalter der Community-Networks ist das wieder eine weitere Seite, wo man ganz viele Freunde haben und ihnen allen seine Hobbies erzählen kann. Von daher möchte ich mich verbessern:
Ich *missbrauche* Twitter, muahahaha! Genau das richtige für die kleinen, aber dennoch wertvollen Gedankenschnipsel, die einem hier und da über den Weg laufen, die aber für einen "vollen" Artikel nicht taugen. Ein wunderbarer Sideblog, die Aufmerksamen haben ihn links schon entdeckt.

Das Einbinden der lustigen Tweets geht einfach, denn Wordpress unterstützt das ganze probemlos dank eines Plugins, wie ich glücklicherweise von Lars erfahren habe :)

Das eigentliche Problem war: Wie kriege ich diesen Sideblog schön unter, sodass er nicht im Wust der rechten Sidebar untergeht?
Das Theme, welches ich geklaut und verschlimmbessert habe, unterstüzt drei Modi: Eine rechte Sidebar, zwei rechte Sidebars, oder keine rechte Sidebar. Doh. Aber links ist immer so viel Platz, da der die Einträge immer schön in die Mitte pappt. Nach kurzem Drüberblicken und Probieren zeigte sich schnell: Das Theme besitzt einen zentrierten "Content"-Div, an dem rechts eine Sidebar klebt, man kann den luftleeren Platz links also wunderbar nutzen. Einen Div links eingefügt, Twitterfeed rein, glücklich. Mehr durch Zufall bemerkte ich dann jedoch, dass mein iPhone die rechte Sidebar nun unter die Posts schob, während mein Mac sowohl mit dem Firefox als auch mit Safari prächtig funktionierte. Das lag daran, dass sämtliche Ausmaße dieses Themes hart in Pixeln kodiert sind (waren). Entweder war das iPhone so "schlau", die Sidebar ob der fehlenden Bildschirmbreite nach unten zu packen, oder der Blog verbietet horizontales scrollen, war mir im Endeffekt egal, die Seite sollte funktionieren, wie ich will, und wenn es nur auf dem iPhone war.
Also los: Kommandounternehmen "Von fest auf relativ". Muss ja gehen, genug Platz ist da. Drei Divs, "Twitterbar", "Content" und "Sidebar" sollten nebeneinander auf dem Bildschirm zu sehen sein, auch wenn das Browserfenster etwas kleiner als 1000 Pixel war. Dazu durfte ich mit meinen besten Freunden arbeiten: Float und Clear. Diese lustigen Gesellen sind Style-Variablen von HTML-Elementen. "Float" gibt an, ob das Element links, rechts, mittig, oder gar nicht um den sonstigen Inhalten "fließt", während "Clear" sagt, ob ein Element den Platz direkt links oder rechts neben einem anderen Element belegen darf. In meinen Augen wäre also folgende Kombination logisch:

• Twitterbar mit float:left; clear: none


• Content mit float: center; clear: none


• Sidebar mit float: right; clear: none

So. Nachdem ich mit ein wenig testen herausgefunden hatte, dass "clear" in dieser Situation anscheinend gar nichts zu melden hat, blieb nur noch float übrig. Aber egal, was ich versuchte, die rechte Sidebar klebte felsenfest rechts unter dem Content. Google half mir dann letztendlich weiter, die Lösung des Ganzen war, dass auch die Reihenfolge, in der die Divs im Dokument stehen, ausschlaggebend ist. Die richtige Reihenfolge/Konfiguration lautete wie folgt:

• Twitterbar mit float:left


• Sidebar mit float:right


• Content ohne float und ohne clear

Es gibt bestimmt ein paar Gründe dafür, warum das so sein muss. Jetzt weiss ich es zumindest^^ Und tadaa! Die Sidebar war wieder eine Sidebar! Aber Moment, wo sind meine Blogeinträge? In der Mitte steht nurnoch der Titel des aktuellsten Posts. Sein Inhalt, sowie seine Vorgänger, kleben mittig auf der Seite, peinlich genau an der Unterseite der nun nach oben gerutschten Sidebar. Clear...
Natürlich musste es clear sein, nachdem er ja eben nicht für Probleme verantwortlich war. Ich meine, im Endeffekt kann er nichts dafür, der Author des Themes hat einfach exzessiv viele "clear"-Divs eingebaut, die an allen möglichen Stellen eingebaut sind und keinen Inhalt besitzen, sondern ausschließlich das Attribut "clear:both". Das sorgt dafür, dass dieser Div sich selber und alles, was nach ihm kommt, nach unten "drückt", damit die umliegenden Elemente sowohl links, als auch rechts Platz haben. Ein wenig Fummelarbeit später hatte ich auch das im Griff.

So, und weil mir das zu nackt aussah, habe ich links oben ein Bildchen hin gesetzt. Und damit die Seite ein wenig "dynamischer" wirkt, sollte sich das Bild bei jedem reload ändern. Die ersten Suchergebnisse wollten mir Javascript andrehen, was ich erst einmal nicht benutzen wollte (schlechtes drüber gehört und schlechte Erfahrungen gemacht). Schließlich fand ich eine sehr effiziente und schnell implementierte Lösung, die auf php basiert.

So, wall of text, ich hoffe, der Blog ist nun viel viel schöner :D