<­bo­dy>
<­div id="topnavi"> soll Seh­be­hin­der­ten er­mög­li­chen, den im­mer wie­der­keh­ren­den Vor­spann zu über­sprin­gen

Sty­le="position: fixed" funktioniert bei älteren IE nicht. Die linke Spalte kann man mit einem absoluten Div-Container oder einem eingeengten Body freihalten.

<­div id="koerper">: kann für die Brei­te des Kör­pers usw. ver­wen­det wer­den.
(3) <­main id="main"> (dop­pelt, weil sonst das Sprung­ziel nicht funk­tio­niert)
(3a) <ar­ti­cle>

<h2> Grund­sätz­li­ches </h2>

Auf die­ser Sei­te möch­te ich, vor al­lem für mei­ne ei­ge­nes Ver­ständ­nis und als Hilfs­mit­tel für die Feh­ler­su­che, das Zu­sam­men­spiel zwi­schen den Div-Con­tai­nern auf mei­nen Sei­ten aus­pro­bie­ren und darstel­len.
Die Sei­te wird von dem glei­chen Sty­les­heet in­dex.css gesteuert wie al­le an­de­ren Sei­ten die­ser URL. Nach­ge­schal­tet ist ein zwei­tes Sty­les­heet div­mar­ker.css, das die Bo­xen far­blich und mit ei­nen klei­nen Ran­dabstand her­vor­hebt.
Mei­ne an­de­ren Sei­ten kann man übri­gens ge­nau­so darstel­len, in­dem man mit Fi­re­bug das ein­ge­bau­te lee­re Sty­les­heet div­mar­ker0.css in div­mar­ker.css um­wan­delt.

Mein Grund­ge­dan­ke ist, dass ich den Auf­bau mei­ner Sei­ten mit mög­lichst we­ni­gen Se­lek­to­ren gestal­ten möch­te, um den Über­blick zu be­hal­ten. Da­zu tren­ne ich die Se­lek­to­ren nach ih­rer Funk­tion Po­si­tion, Brei­te und For­ma­tie­rung des In­hal­tes, die man weit­ge­hend be­lie­big mit­ei­nan­der kom­bi­nie­ren kann

Für ne­be­nei­nan­der­lie­gen­de­Ele­men­te ver­wen­de ich drei Class-Se­lek­to­ren:  .­box­la­ge_­links,  .­box­la­ge_­rechts un­d .­box­la­ge_­rest. Die erste­ren ord­nen sich links und rechts der Sei­te an. box­la­ge_­rest, das als letz­tes im Quell­text ste­hen muss, füllt die ver­blei­ben­de Sei­te aus. Box­la­ge_­rest kann man auch we­glas­sen, aber dann fließt der Text, der da­rin steht, un­ter die links und rechts ste­hen­den Bo­xen. Wich­tig ist, dass Box­la­ge_­rest den sty­le="overflow: auto;" ent­hält.
.box­la­ge_­rechts und  .­box­la­ge_­links kön­nen auch für Bil­der, Ta­bel­len usw. ver­wen­det wer­den.

Die Brei­te der Bo­xen steue­re ich mit den Class-Se­lek­to­ren .­box­brei­te_­schmal und  .­box­brei­te_­breit. Ein wei­te­rer Se­lek­tor  .­box­brei­te_ex­tra­breit er­mög­licht ei­ne an­de­re Rei­hen­fol­ge der Div-Con­tai­ner im Quell­text ( Bei­spiel ), wird aber z.Zt. von mir nicht ein­ge­setzt.

Die For­ma­tie­rung der In­hal­te er­folgt mit ei­ge­nen Class-Se­lek­to­ren, z.B. .sei­ten­spal­te, die in den Po­si­tions­con­tai­nern ein­ge­setzt wer­den.

Im­mer wie­der­keh­ren­den Kom­bi­na­tio­nen hat­te ich frü­her im Sty­les­heet ei­ge­ne #Se­lek­to­ren ge­ge­ben. Das stei­gert aber nicht die Über­sicht, des­halb ha­be ich das Kon­zept wie­der ab­ge­schafft. Noch vor­han­den sind:

  • id="navi" entspricht class="boxlage_links boxbreite_schmal seitenspalte"

Son­der­fäl­le für Po­si­tions-Se­lek­to­ren sind Se­lek­to­ren für den den 2- und 3-spal­ti­gen Satz. Hier ver­wen­de ich die Se­lek­to­ren  .­spal­ten2 und  .­spal­ten3, die im um­hül­len­den Con­tai­ner  .­clear hin­te­rei­nan­der ste­hen kön­nen und sich ne­be­nei­nan­der an­ord­nen. Ih­re Brei­te ist pro­zen­tual de­fi­niert, des­halb pas­sen sie sich je­dem Hüll­con­tai­ner an. Wei­ter For­ma­tie­run­gen ent­hal­ten sie nicht.
Ein wei­te­re Son­der­fall sind Co­na­ti­ner, die ich Sta­pel­bo­xen nen­ne. Sie ha­ben ei­ne de­fi­nier­te Brei­te und ei­ne Min­dest­hö­he. Hin­te­rei­nan­der ge­schrie­ben sta­peln sie sich so oft ne­be­nei­nan­der, wie es die Sei­ten­brei­te zu­lässt. Ich ver­wen­de sie, um Zeich­nun­gen, Bil­der o.ä. an­zuord­nen. Man­che die­ser Con­tai­ner ent­hal­ten auch For­ma­tie­run­gen des In­hal­tes, z.B. der Class-Se­lek­tor .­buch für die Darstel­lung von Bü­chern mit Bild, Ti­tel usw.

<h2> Um­flos­se­nes Bild </h2>

Foto des Webseitenbetreibers

Das Bild auf der rech­ten Sei­te steht in ei­nem IMG-Tag: <img class="boxlage_rechts" src="...jpg">.

Wenn man das Bild in ei­nen Con­tai­ner mit dem Class-Se­lek­tor packt, kann man noch ei­ne Bild­be­schrei­bung hin­zu­fü­gen (sie­he links).

<­div class="clear"> <­div>

<h2> Wei­ter un­ter Bil­dern oder Con­tai­nern </h2>

Soll es un­ter dem Bild oder ei­nem um­floa­te­ten Div-Con­tai­ner wei­ter ge­hen, ist sty­le="clear: left", style="clear: right" oder style="clear: both" erforderlich. Dafür gibt mehrere Möglichkeiten, z.B. Letzteres kann man im Tag oder mit dem Class-Selektor  .­clear de­fi­nie­ren.

  • Im Sty­les­heet:
    h2 { sty­le="clear: left"; }
    gilt für al­le h2-Tags
  • Im Tag
    <h2 sty­le="clear: left"; >
  • Als Class-Se­lek­tor im Tag
    <h2 class="clear" >
  • Als Div-Con­tai­ner mit Class-Se­lek­tor
    <­div class="clear" >
    <h2 > Über­schrift </h2>
    </­div >

< h2> Beid­sei­ti­ge Rän­der mit de­fi­nier­ter Brei­te </h2>

Der Haupt­text in der Mit­te fließt nicht un­ter die bei­den Rand­spal­ten. Die Brei­te des mit­tle­ren Div-Con­tai­ners passt sich an die äu­ße­ren Rän­der an, das er­mög­licht de­fi­nier­te Rand­spal­ten.
Im Quell­text steht die rech­te Spal­te NACH dem Haupt­text in der Mit­te, da­durch kön­nen Such­be­grif­fe nach un­ten rut­schen.

(2) <­div class="boxlage_rechts boxbreite_schmal">

<h3 class="boxlage_rest"> </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat.

<­div class="clear">

< h2> Ein um­flos­se­ner Rand </h2>

Die rech­te Rand­spal­te steht in­ner­halb der Box für den Haupt­text, da­durch fließt der Haupt­text nur un­ter den rech­ten Rand. Un­ge­löst ist der seit­li­che Ab­stand zur rech­ten Spal­te.
Die Class-Se­lek­to­ren "schmal" und "breit" sind be­lie­big aus­tausch­bar.

(2) <­div>
(2a) <­div class="boxlage_rechts boxbreite_breit">

Steht in­ner­halb (2) <­div id="content">

<h3> Füll­text </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat. Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

<­div class="clear">

< h2> Zwei um­flos­se­ne Rän­der </h2>

Der Haupt­text in der Mit­te fließt oh­ne ei­ge­nen Div-Con­tai­ner un­ter bei­de Rän­der. Man kann auch sa­gen, dass bei­de Rän­der in der Box für den Haup­text ste­hen. Auch hier ha­be ich noch nicht das Pro­blem des seit­li­chen Ab­stan­des zu den Rand­spal­ten ge­löst.

(2) <­div class="boxlage_rechts boxbreite_breit">

Steht in­ner­halb (3) <­div id="content">

(3) <h3> Füll­text </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat. Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

<­div class="clear">

< h2> Zwei Rän­der auf ei­ner Sei­te</h2>

Es kön­nen auch meh­re­re Spal­ten pro Sei­te kom­bi­niert wer­den. Die Class-Sek­to­ren.­box­brei­te_­schmal und.­box­brei­te_­breit sind be­lie­big aus­tausch­bar

(3) <­div>

<h3> Füll­text </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat. Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

<­div class="clear"

< h2> Zwei Spal­ten glei­cher Brei­te </h2>

Zwei Spal­ten glei­cher Brei­te kann man mit iden­ti­schen Div-Con­tai­nern er­zeu­gen, die je­weils knapp 50% des um­hül­len­den Co­na­ti­ners ein­neh­men. Der Text fließt nicht von ei­ner Spal­te zur an­de­ren.

(1) <­div class="spalten2">

<h3> Füll­text </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat. Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

(2) <­div class="spalten2">

<h3> Füll­text </h3>

Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet. Lo­rem ip­sum do­lor sit amet, con­se­te­tur sa­dips­cing elitr, sed diam no­nu­my eir­mod tem­por in­vi­dunt ut la­bo­re et do­lo­re mag­na ali­qu­yam erat, sed diam vo­lup­tua. At vero eos et ac­cu­sam et justo duo do­lo­res et ea re­bum. Stet cli­ta kasd gu­ber­gren, no sea ta­ki­ma­ta sanc­tus est Lo­rem ip­sum do­lor sit amet.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Die­ser Text steht zwi­schen zwei Ab­schnit­ten und kann von Fi­re­fox 3 zwi­schen die Spal­ten ge­zo­gen wer­den. Zur Ver­mei­dung kann man die­sen Text wie­der in ei­nen Div-Con­tai­ner Ab­schnitt pa­cken.

<­div class="clear"

<h2> Drei Spal­ten glei­cher Brei­te </h2>

Drei Spal­ten glei­cher Brei­te kann man mit iden­ti­schen Div-Con­tai­nern er­zeu­gen, die je­weils knapp 33% des um­hül­len­den Co­na­ti­ners ein­neh­men. Der Text fließt nicht von ei­ner Spal­te zur an­de­ren.

(1)<­div class="spalten3">

<h3> Füll­text </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat. Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

(2) <­div class="spalten3">

<h3> Füll­text </h3>

Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

(3) <­div class="spalten3">

<h3> Füll­text </h3>

Nam li­ber tem­por cum so­lu­ta no­bis elei­fend op­tion con­gue ni­hil im­per­diet do­ming id quod ma­zim pla­ce­rat fa­cer pos­sim as­sum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tuer adi­pis­cing elit, sed diam no­num­my nibh euis­mod tin­ci­dunt ut lao­reet do­lo­re mag­na ali­quam erat vo­lut­pat. Ut wi­si enim ad mi­nim ve­niam, quis nostrud ex­er­ci ta­tion ul­lam­cor­per sus­ci­pit lo­bor­tis nisl ut ali­quip ex ea com­mo­do con­se­quat.

Duis au­tem vel eum iriu­re do­lor in hen­dre­rit in vul­pu­ta­te ve­lit es­se mo­lestie con­se­quat, vel il­lum do­lo­re eu feu­giat nul­la fa­ci­li­sis.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

<­div class="clear"

<h2> Um­flos­se­ne Ta­bel­len </h2>

<­div class="Befehle">
Über­sicht über die Funk­tio­nenLi­breOf­fi­ce / OpenOf­fi­ce / StarOf­fi­ceMS Ex­cel
ei­ne neue Ta­bel­le la­denDa­tei - Neu - Ta­bel­len­do­ku­mentDa­tei - Neu
beste­hen­de Ta­bel­le la­denDa­tei - Öff­nen..

Ein Son­der­fall für mei­ne Tu­to­rials sind um­flos­sen Ta­bel­len. Die Ver­wen­dung von <­ta­ble> für das La­yout ist zwar ver­pönt, aber für wir­kli­che Ta­bel­len darf es dur­chaus ein­ge­setzt wer­den. Die ne­benste­hen­de Ta­bel­le steckt in ei­nem Div-Con­tai­ner, der sie auch for­ma­tiert.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

<h2 class="clear"> Um­flos­se­ne Übun­gen </h2>

<­div class="uebung">
Übung " Wäh­rungs­rech­ner"

Erstel­len Sie ein Ta­bel­len­blatt zur Um­rech­nung von Schwei­zer Fran­ken in Eu­ro nach Muster, vor­läu­fig oh­ne For­ma­tie­rung.

Ein Son­der­fall für mei­ne Tu­to­rials sind um­flos­se­ne Übun­gen. Die ne­benste­hen­de Übung steckt in ei­nem Div-Con­tai­ner, der sie auch for­ma­tiert.

Die Klas­se clear steckt hier aus­nahms­wei­se nicht in ei­nem Con­tai­ner, son­dern in der h2-Über­schrift. Da Div-Con­tai­ner nicht be­lie­big ver­schach­telt wer­den dür­fen, spart man so ei­ne Div-Ebe­ne ein.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

<­div class="clear">

<h2> Sta­pel­bo­xen </h2>

Wenn ich viele Zeich­nun­gen o.ä. prä­sen­tie­ren möch­te, ver­wen­de ich Con­tai­ner mit de­fi­nier­ter Brei­te, die sich je nach Bild­schirm­brei­te ne­ben und un­ter­ein­an­der an­ord­nen. Ein Pro­blem da­bei ist, dass die nächste Rei­he nicht ganz links be­ginnt, wenn die vor­he­ri­gen Con­tai­ner un­ter­schied­lich lang sind. Das Pro­blem wird mit ei­ner Min­dest­hö­he ver­min­dert, aber nicht ge­löst.
Zoo­men Sie, um das Ver­hal­ten der Sta­pel­bo­xen zu beo­bach­ten. Die Bei­spie­le sind auf der CAD-Sei­te nä­her er­läu­tert.

<­div class="stapel340">

Nuss­kna­cker

Bild eines Nussknackers
<­div class="stapel340">

Han­dent­gra­ter

Bild eines Handentgraters
<­div class="stapel340">

Fla­sche­nöff­ner

Bild eines Flaschenöffners
<­div class="stapel340">

Boh­rer­kas­set­te

Bild einer Bohrerkassette
<­div class="stapel340">

Lo­ko­mo­ti­ve

Bild einer Lokomotive

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z