Das Boxmodel mit Background im HTML

tempa wrote this 14:31:

ein simpler Aufbau

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:

  1. <div id="tec">###---CONTENT1---###</div>
  2. <div id="tem">###---LISTMENU---###</div>
  3. <div id="teh">###---STATICCONTENT---###</div>
  4. <div id="ted">###---STATICCONTENT2---###</div>
  5. <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.

Zwei Hintergründe in der Base

Im CSS definiere ich also wie folgt:

  1. html, body, img, div {padding: 0; margin: 0; border: 0;}
  2. html {background: url(images/bg_html.gif) left top repeat-x #FFBFD7; height: 100%;}
  3. 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:

  1. body, x:-moz-any-link {margin-top: -15px;}
  2. 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.

Grundsätzliches zum Thema Float vs Positioning

Float oder Position

Im natürlichen Fluß einer Seite breiten sich Elemente über die zur Verfügung stehende Breite und Ordnen sich untereinander an. Gibt man position: absolute; an, dann wird der Inhalt wie an einer Wäscheleine aufgehängt. Die Fußzeile rutscht also nach oben und setzt den Fluß dort fort, wo letzte Element noch im fluß ist. Zur Anschauung ist der positionierte Inhalt in der mittleren Abbildung nach Rechts gerückt. Im Letzten Beispiel ist meine Lieblingsanodnung. Hauptinhalte, Navigation und Fuß sind im Natürlichen Fluß und der Headerbereich wird von Unten an die obere Kante des Browserfensters gehängt. Damit es nicht übelappt, lassen die ersten Bereiche nach oben hin Platz. Float: left; bewirkt, dass sich Inhalte sofern Platz ist, neben den Vorherigen setzen. Left heißt also Links vom nachkommenden angeordnet.

 
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.

Boxen im Boxmodell

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:

  1. <html>
  2. <head>
  3. <title>Seitentitel</title>
  4. </head>
  5. <body>
  6. <div id="tew">
  7. <div id="tec">
  8. <div id="tec1">
  9. ###---CONTENT1---###
  10. </div>
  11. </div>
  12. </div>
  13. <div id="tem">
  14. ###---LISTMENU---###
  15. </div>
  16. <div id="teh2"><!-- Illustration //-->
  17. ###---STATICCONTENT2---###
  18. </div>
  19. <p id="tei"><a href="http://www.templaterie.de" id="basedon" title="Templaterie">71522-2006-tc0039</a> <a href="?c=1&amp;s=impressum" id="impressum" title="Impressum">Impressum |</a></p>
  20. <div id="teh1"><!-- Kopfbereich //-->
  21. ###---STATICCONTENT---###
  22. </div>
  23. </body>
  24. </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. 😉

3 Responses to “Das Boxmodel mit Background im HTML”

  1. Templaterie Blog Says:

    […] 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. […]

  2. Templaterie Blog Says:

    […] 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. […]

  3. Templaterie Blog Says:

    […] Siehe auch das Box-Model in Bezug auf Step 3 […]

Leave a Reply