<body>
<div id="topnavi"> soll Sehbehinderten ermöglichen, den immer wiederkehrenden Vorspann zu überspringen

Style="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 Breite des Körpers usw. verwendet werden.
(3) <main id="main"> (doppelt, weil sonst das Sprungziel nicht funktioniert)
(3a) <article>

<h2> Grundsätzliches </h2>

Auf dieser Seite möchte ich, vor allem für meine eigenes Verständnis und als Hilfsmittel für die Fehlersuche, das Zusammenspiel zwischen den Div-Containern auf meinen Seiten ausprobieren und darstellen.
Die Seite wird von dem gleichen Stylesheet index.css gesteuert wie alle anderen Seiten dieser URL. Nachgeschaltet ist ein zweites Stylesheet divmarker.css, das die Boxen farblich und mit einen kleinen Randabstand hervorhebt.
Meine anderen Seiten kann man übrigens genauso darstellen, indem man mit Firebug das eingebaute leere Stylesheet divmarker0.css in divmarker.css umwandelt.

Mein Grundgedanke ist, dass ich den Aufbau meiner Seiten mit möglichst wenigen Selektoren gestalten möchte, um den Überblick zu behalten. Dazu trenne ich die Selektoren nach ihrer Funktion Position, Breite und Formatierung des Inhaltes, die man weitgehend beliebig miteinander kombinieren kann

Für nebeneinanderliegendeElemente verwende ich drei Class-Selektoren:  .boxlage_links,  .boxlage_rechts und .boxlage_rest. Die ersteren ordnen sich links und rechts der Seite an. boxlage_rest, das als letztes im Quelltext stehen muss, füllt die verbleibende Seite aus. Boxlage_rest kann man auch weglassen, aber dann fließt der Text, der darin steht, unter die links und rechts stehenden Boxen. Wichtig ist, dass Boxlage_rest den style="overflow: auto;" enthält.
.boxlage_rechts und  .boxlage_links können auch für Bilder, Tabellen usw. verwendet werden.

Die Breite der Boxen steuere ich mit den Class-Selektoren .boxbreite_schmal und  .boxbreite_breit. Ein weiterer Selektor  .boxbreite_extrabreit ermöglicht eine andere Reihenfolge der Div-Container im Quelltext ( Beispiel ), wird aber z.Zt. von mir nicht eingesetzt.

Die Formatierung der Inhalte erfolgt mit eigenen Class-Selektoren, z.B. .seitenspalte, die in den Positionscontainern eingesetzt werden.

Immer wiederkehrenden Kombinationen hatte ich früher im Stylesheet eigene #Selektoren gegeben. Das steigert aber nicht die Übersicht, deshalb habe ich das Konzept wieder abgeschafft. Noch vorhanden sind:

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

Sonderfälle für Positions-Selektoren sind Selektoren für den den 2- und 3-spaltigen Satz. Hier verwende ich die Selektoren  .spalten2 und  .spalten3, die im umhüllenden Container  .clear hintereinander stehen können und sich nebeneinander anordnen. Ihre Breite ist prozentual definiert, deshalb passen sie sich jedem Hüllcontainer an. Weiter Formatierungen enthalten sie nicht.
Ein weitere Sonderfall sind Conatiner, die ich Stapelboxen nenne. Sie haben eine definierte Breite und eine Mindesthöhe. Hintereinander geschrieben stapeln sie sich so oft nebeneinander, wie es die Seitenbreite zulässt. Ich verwende sie, um Zeichnungen, Bilder o.ä. anzuordnen. Manche dieser Container enthalten auch Formatierungen des Inhaltes, z.B. der Class-Selektor .buch für die Darstellung von Büchern mit Bild, Titel usw.

<h2> Umflossenes Bild </h2>

Foto des Webseitenbetreibers

Das Bild auf der rechten Seite steht in einem IMG-Tag: <img class="boxlage_rechts" src="…jpg">.

Wenn man das Bild in einen Container mit dem Class-Selektor packt, kann man noch eine Bildbeschreibung hinzufügen (siehe links).

<div class="clear"> <div>

<h2> Weiter unter Bildern oder Containern </h2>

Soll es unter dem Bild oder einem umfloateten Div-Container weiter gehen, ist style="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 definieren.

  • Im Stylesheet:
    h2 { style="clear: left"; }
    gilt für alle h2-Tags
  • Im Tag
    <h2 style="clear: left"; >
  • Als Class-Selektor im Tag
    <h2 class="clear" >
  • Als Div-Container mit Class-Selektor
    <div class="clear" >
    <h2 > Überschrift </h2>
    </div >

< h2> Beidseitige Ränder mit definierter Breite </h2>

Der Haupttext in der Mitte fließt nicht unter die beiden Randspalten. Die Breite des mittleren Div-Containers passt sich an die äußeren Ränder an, das ermöglicht definierte Randspalten.
Im Quelltext steht die rechte Spalte NACH dem Haupttext in der Mitte, dadurch können Suchbegriffe nach unten rutschen.

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

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

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div class="clear">

< h2> Ein umflossener Rand </h2>

Die rechte Randspalte steht innerhalb der Box für den Haupttext, dadurch fließt der Haupttext nur unter den rechten Rand. Ungelöst ist der seitliche Abstand zur rechten Spalte.
Die Class-Selektoren "schmal" und "breit" sind beliebig austauschbar.

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

Steht innerhalb (2) <div id="content">

<h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

<div class="clear">

< h2> Zwei umflossene Ränder </h2>

Der Haupttext in der Mitte fließt ohne eigenen Div-Container unter beide Ränder. Man kann auch sagen, dass beide Ränder in der Box für den Hauptext stehen. Auch hier habe ich noch nicht das Problem des seitlichen Abstandes zu den Randspalten gelöst.

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

Steht innerhalb (3) <div id="content">

(3) <h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

<div class="clear">

< h2> Zwei Ränder auf einer Seite</h2>

Es können auch mehrere Spalten pro Seite kombiniert werden. Die Class-Sektoren.boxbreite_schmal und.boxbreite_breit sind beliebig austauschbar

(3) <div>

<h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

<div class="clear"

< h2> Zwei Spalten gleicher Breite </h2>

Zwei Spalten gleicher Breite kann man mit identischen Div-Containern erzeugen, die jeweils knapp 50% des umhüllenden Conatiners einnehmen. Der Text fließt nicht von einer Spalte zur anderen.

(1) <div class="spalten2">

<h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

(2) <div class="spalten2">

<h3> Fülltext </h3>

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor 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

Dieser Text steht zwischen zwei Abschnitten und kann von Firefox 3 zwischen die Spalten gezogen werden. Zur Vermeidung kann man diesen Text wieder in einen Div-Container Abschnitt packen.

<div class="clear"

<h2> Drei Spalten gleicher Breite </h2>

Drei Spalten gleicher Breite kann man mit identischen Div-Containern erzeugen, die jeweils knapp 33% des umhüllenden Conatiners einnehmen. Der Text fließt nicht von einer Spalte zur anderen.

(1)<div class="spalten3">

<h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

(2) <div class="spalten3">

<h3> Fülltext </h3>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

(3) <div class="spalten3">

<h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

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> Umflossene Tabellen </h2>

<div class="Befehle">
Übersicht über die FunktionenLibreOffice / OpenOffice / StarOfficeMS Excel
eine neue Tabelle ladenDatei - Neu - TabellendokumentDatei - Neu
bestehende Tabelle ladenDatei - Öffnen..

Ein Sonderfall für meine Tutorials sind umflossen Tabellen. Die Verwendung von <table> für das Layout ist zwar verpönt, aber für wirkliche Tabellen darf es durchaus eingesetzt werden. Die nebenstehende Tabelle steckt in einem Div-Container, der sie auch formatiert.

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"> Umflossene Übungen </h2>

<div class="uebung">
Übung " Währungsrechner"

Erstellen Sie ein Tabellenblatt zur Umrechnung von Schweizer Franken in Euro nach Muster, vorläufig ohne Formatierung.

Ein Sonderfall für meine Tutorials sind umflossene Übungen. Die nebenstehende Übung steckt in einem Div-Container, der sie auch formatiert.

Die Klasse clear steckt hier ausnahmsweise nicht in einem Container, sondern in der h2-Überschrift. Da Div-Container nicht beliebig verschachtelt werden dürfen, spart man so eine Div-Ebene 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> Stapelboxen </h2>

Wenn ich viele Zeichnungen o.ä. präsentieren möchte, verwende ich Container mit definierter Breite, die sich je nach Bildschirmbreite neben und untereinander anordnen. Ein Problem dabei ist, dass die nächste Reihe nicht ganz links beginnt, wenn die vorherigen Container unterschiedlich lang sind. Das Problem wird mit einer Mindesthöhe vermindert, aber nicht gelöst.
Zoomen Sie, um das Verhalten der Stapelboxen zu beobachten. Die Beispiele sind auf der CAD-Seite näher erläutert.

<div class="stapel340">

Nussknacker

Bild eines Nussknackers
<div class="stapel340">

Handentgrater

Bild eines Handentgraters
<div class="stapel340">

Flaschenöffner

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

Bohrerkassette

Bild einer Bohrerkassette
<div class="stapel340">

Lokomotive

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