27. Februar 2006
Das Boxmodel mit Background im HTML
An diesem Entwurf arbeite ich im Augenblick. Es ist recht klassisch und simple, wäre da nicht mein Eigensinn. Ganz nach dem Prinzip „Content is king.“ habe ich mir in den Kopf gesetzt wie bei den Meisten meiner Templates Den Inhalt in der Struktur an erster Stelle zu setzen und dann erst den Rest. In Editlandplatzhaltern ausgedrückt sieht das so aus:
<div id="tec">###---CONTENT1---###</div><div id="tem">###---LISTMENU---###</div><div id="teh">###---STATICCONTENT---###</div><div id="ted">###---STATICCONTENT2---###</div><p id="tei"><a ... [ blah blah] ... </p>
Hierbei steht #tec für templaterie-Design Contentbereich, #tem templaterie-Design Menü, #teh templaterie-Design Headerinhalt, #tew templaterie-Design Wrapper, #ted templaterie-Design Decoelement und last but not least #tei der Link zum Impressum und zur Templaterie mit der Artikelnummer des Designs.
No problem, sais Fred. Wozu gibt es das Boxmodell im CSS. Und ich denke klar, kein Problem und will einmal probieren, das Grund raster liquide schon im HTML und im Body festzulegen.
Im CSS definiere ich also wie folgt:
html, body, img, div {padding: 0; margin: 0; border: 0;}html {background: url(images/bg_html.gif) left top repeat-x #FFBFD7; height: 100%;}body {background: url(images/bg_body.gif) 90% 0 repeat-y; height: 100%;}
Hier bei ist bg_html der weiße Kopf mit feiner Linie und darüber liegt der bg_body.gif bei stets 90% und schon stoße ich auf einen unfreundlichen Bug in Mozilla. Gibt man dem HTML-Dokument nicht nur Farbe sondern auch einer Hintergrundgrafik, dann wird der Body zu einem neuen Element, das sich nun ganz anders Verhält … mehr wie ein DIV und nun blitzt ein Abstand zwischen HTML und Body. Die erste Zeile (in meinen Style standardmäßig vorhanden) wird ignoriert. Na macht nichts. Da das nur den Mozilla betrifft, also einen Mozilla-Hack hervorgekruschtelt:
body, x:-moz-any-link {margin-top: -15px;}
via Pornel.net
So Ganz will das aber immer noch nicht, denn der Body nimmt nun 100% ein und dehnt sich nicht mit dem Inhalt mehr aus. Odd! Er hängt da, als wäre er per position: absolute; am HTML angehängt.
Nagut, was solls. Dann übernimmt das Scrollen ein innerer <div>-Tag und schon habe ich einen Aufbau, bei dem der Seitenrahmen sich zuerst aufbaut. Erst Rosa, dann der weiße Kopf und dann klatscht der Body den Streifen drüber, der immer bei 90% liegt, also bei 800 90% und bei 1024 90% und auch bei … eben. Da beide Grafiken echte Minis sind mit unter einem Kilobyte geht das ohne Verzögerung und nun sollen die Inhalte platziert werden. Als erstes die Box mit dem Text und dann die Navigation und zuletzt der Schnickschnack im Header.
Ich wurschtel also so vor mich hin und positioniere dies oder floate ein wenig da, verwerfe es wieder und am Ende habe ich tatsächlich eine Variation, die scheint zu funktionieren. Leider nur im Firefox. alle anderen scheinen nun kräftig durch einander zu kommen welches Kind-Element zu welchem Eltern-Element gehört. Dabei erscheint mir das gar nicht so komplex:
<html><head><title>Seitentitel</title></head><body><div id="tew"><div id="tec"><div id="tec1">###---CONTENT1---###</div></div></div><div id="tem">###---LISTMENU---###</div><div id="teh2"><!-- Illustration //-->###---STATICCONTENT2---###</div><p id="tei"><a href="http://www.templaterie.de" id="basedon" title="Templaterie">71522-2006-tc0039</a> <a href="?c=1&s=impressum" id="impressum" title="Impressum">Impressum |</a></p><div id="teh1"><!-- Kopfbereich //-->###---STATICCONTENT---###</div></body></html>
Die Einrückungen zeigen schön, dass fast alle den Body als Eltern-Element haben. Sie wurden per Position: absloute; auf der Site verteilt, weil Sie nicht über den Inhalt des Bodys hinaus gehen und eine feste Höhe haben. Allein die Navigation sollte noch innerhalb von #tew (Zeile 6-12) fallen, damit auch lange Linklisten darin Theoretisch Platz finden. Mit einem hohen z-Index schiebt sich der Inhaltsblock sogar unter den Header, was einen schönen Effekt gibt.
Aber leider, leider, leider packen es weder der IE noch der Opera hier etwas vernünftiges anzuzeigen. Das heißt, der schöne Plan muss bis auf weiteres zurückgestellt werden, bis Browser da sind, die gelernt haben, wer die Eltern und wer die Kinder im Box-Modell sind. Schade.
Drehen wir also den äußeren Umständen gehorchend die Reihenfolge so, dass ich alles im Fluß belassen kann und ich werde auch den Hintergund von HTMl nach Body verlegen einen Div machen, der den Navigationsstreifen aufnimmt und sich brav stets über die gesamte Länge ausbreitet.
Sehr schade. Den anderen Plan finde ich sexy und er gefällt mir deutlich besser. Doch dazu brauche ich mehr Browser als den Mozilla, die das Box-Modell beherrschen. Auf die Test mit Safari warte ich noch.
Der Safari-Test ist da. Nein, er kommt auch nicht damit zurecht. Nunja … war ohnehin schon verworfen.
Für Insider: Das Zwischenergebnis steht aktuell im Labor 4. 😉
Filed under: Design,Projektplanung,Webtechniken
3 Comments
Februar 27th, 2006 at 18:26
[…] Nachdem ich den vertikalen Streifen nicht über doppelte Hintergründe erreichen konnte, habe ich mich Wohl oder Übel zu einem anderen Aufbau durchringen müssen. Aber Webentwicklung wäre nicht Webentwicklung, wenn nicht ein Browser mehr Heckmeck treiben würde, als es meinen Nerven gut tut. […]
Februar 27th, 2006 at 23:44
[…] Die Illustration die in den beiden vorherigen Posts noch von einem anderen Mädchen bestritten wurde, kann ohnehin frei gewählt werden. Also hier noch eine Variation mit Mädchen mit Eis. Übrigens war das erste Bild noch der Photoshop-Entwurf. Es kommt selten vor, dass der Photoshopentwurf und der Screenshot so nahe bei einander liegen. […]
Februar 18th, 2007 at 17:32
[…] Siehe auch das Box-Model in Bezug auf Step 3 […]