OesterBlog

Willkommen zu meinem ersten Blog-Beitrag, bei dem es sich nicht nur um einen Kommentar handelt. Gewöhnt an die nachlässige Chat-Schreibweise, bitte ich vorerst darum, über Rechtschreibfehler hinwegzusehen. ;)

Nach langer, langer Webdesign Abstinenz habe ich mich heute endlich an die Aufgabe gemacht, das Menü im Forum unseres schönen Chats zu zentrieren. Zwei Stunden lang scheiterten alle meine kläglichen Versuche. Ich konnte das Headerbild ohne Probleme zentrieren, war ja aber auch nicht so ein großes “Ding”, das Menü selbst jedoch weigerte sich standhaft. Es liess sich zwar in die Mitte rücken, indem man zb float: center; setzte, jedoch ordnete es die Menüpunkte dann auch schön mittig untereinander an.Da das ja nicht Sinn und Zweck der Sache war, machte ich mich auf die Suche nach einem vermeindlichen Fehler. Alles Rumprobieren half jedoch nix, ich stellte lediglich fest, dass nur im Opera float: center; überhaupt was brachte, im FireFox war das Menü untereinander angeordnet, immer noch links. Argh!

Da ich mit CSS noch lange nicht so viel Erfahrung hab wie Thomas, hab ich mich daraufhin eine Weile mit der Syntax beschäftigt und da fiel mir dann diese Zeile auf: display: block; . Laut SELFHTML hat das folgende Bedeutung: block = Erzwingt einen Block - das Element erzeugt eine neue Zeile. Wie jetzt? Neue Zeile? Hah! Genau das wollt ich doch verhindern, wenn ich float: center; setze. Und tatsächlich, display: inline; brachte das gewünschte Ergebnis. FAST! Denn nun war alles nebeneinander und auch in der Mitte, aber nicht mehr richtig formatiert. Erst wollt ich Thomas diese Aufgabe überlassen, V4.0 ist schliesslich sein Werk grins, aber dann wollt ich nicht so faul sein und hab’ weitergemacht.

Das Problem war nun: Wie weise ich einem inline-Objekt feste Größen zu? Umformuliert: Wie lasse ich alles beim Alten und bekomm den Kram in die Mitte verflixt und zugenäht?! So ähnlich hab ich das dann einfach mal bei Google eingegeben und siehe da, wir sind nicht die einzigen mit diesem Problem. Die Frage lautete nun also: “Wie bekomme ich ein Block-Element zentriert?”. Antworten dazu gibt es einige, geholfen hat die von TheStyleworks. An dieser Stelle ein Dankeschön an diese Adresse :) Dort steht geschrieben, dass man bei mehreren Elementen in einem Block am besten einen DIV drumzieht, dessen Größe zwingend festgelegt sein muss. Also width: 691px eingefügt und alles war und ist in der Mitte. Juhu!

Doch die Freude blieb mir nur im Opera und im IE gegönnt. Firefox schob den Punkt Forum eine Zeile nach unten. Das Problem scheint zu sein, dass FireFox zu den festen Breiten der 5 Menüpunkte, die zusammengezählt genau 691 ergibt, wie das DIV des Headerbildes, noch die insgesamt 6 Pixel der 6 linken “borders” zählt und so auf eine benötigte Breite von 697 kommt. “Gelöst” habe ich das Problem vorerst, indem ich die 5 Menüpunkte in ihrer Breite so verändert habe, dass +6 genau wieder 691 rauskommt. Im FireFox wird nun also alles wie gewünscht dargestellt, dafür fehlen im Opera und IE unten, rechts unter dem Header-Bild 6 Pixel. Unschön!

Die Lösung dann also hoffentlich bald von Thomas oder von mir in Teil 2

Danke fürs Zulesen

Tim alias |venenum|