Dr. O. Hoffmann
Während XHTML der Textauszeichnung von internet-Projekten dient, erfolgt das Layout mit CSS. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner XHTML-Elemente. Typische Eigenschaften sind Farben von Text und Hintergrund, Hintergrundbilder, Rahmen, jegliche Form der Positionierung von Inhalt, Schriftypenangaben und dynamische Effekte.
Das vorliegende Projekt hält mehrere Stile zur Auswahl durch den
Nutzer bereit, die ganz verschiedene Anforderungen an den darstellenden
browser stellen. Teilweise werden browser-Fehler durch einfache Tricks
insofern kompensiert, als der Inhalt trotzdem gut zugänglich gehalten
wird.
Da bei diesem Projekt sehr viel preformatierter Text angezeigt wird, ergeben sich
daraus einige besondere Probleme, die auf normalen Seiten gar nicht erst
auftauchen werden.
Dafür werden in anderen Projekten eventuell
auch Bilder und multimedia-Dateien angezeigt werden sollen, was in den
hier genutzten Stilen keine wesentliche Rolle spielt. Bei einigen Stilen
sind die Klassen img.imgl und img.imgr angegeben, mit denen Bilder links
oder rechts vom folgenden Text positioniert werden können.
Die Klasse .clear dient dann dazu. Inhalt gegebenfalls wieder unter
dem Bild fortzusetzen.
Die Klasse img.scale dient dazu, zu verhindern, daß Bilder nicht
breiter als das umgebende Element werden. Gegebenenfalls werden sie
vom browser automatisch passend verkleinert, wenn diese Klasse auf
das Bild angewendet wird. Um Probleme bei einigen browsern zu
vermeiden, sollte man bei derartigen Bildern nicht die XHTML-Attribute
für Höhe und Breite angeben, um das Seitenverhältnis
korrekt zu skalieren.
Trotzdem halte ich es nicht für sinnvoll, die CSS-Dateien unbesehen
in ein eigenes Projekt zu übernehmen. Anpassungen an die
speziellen Gegebenheiten sind immer vorzunehmen. Schließlich
sollte sich das Layout dem Inhalt anpassen und nicht umgekehrt. Genaugenommen
hat Layout neben der dekorativen Funktion auch immer eine ergonomische
Komponente, es soll zweckmäßig sein und die Zugänglichkeit des
Inhalts verbessern, um akzeptiert zu werden.
Der Stil N ist einfach eine leere Datei n.css. Somit verwendet der browser seine eigene oder die Stilvorlage des Nutzers, je nachdem, was der Nutzer am browser voreingestellt hat.
Die Datei leer.css enthält bereits die typischen Strukturelemente des Projektes und typische verwendete XHTML-Elemente, die ausgezeichnet werden können:
html { } body { } body[id] { } h1 { font-size:2em; } h2 { font-size:1.7em; } h3 { font-size:1.5em; } h4 { font-size:1.2em; } acronym:hover, abbrev:hover { cursor: help; } abbrev[title], acronym[title], span[title] { border-bottom: thin dotted; cursor: help; } h1[title] { cursor: help; } a:link {color:#003399;} a:visited {color:#003377;} a:hover {color:#007777;} a:active {color:#550077;} a:focus {color:#cccc55; background-color:#0000aa;} div.links a:link {color:#ffffdd;background-color:#0066cc;} div.links a:visited {color:#ffffaa;background-color:#0066cc;} div.links a:hover {color:#bbff66;background-color:#0066cc;} div.links a:active {color:#ffaa00;background-color:#0066cc;} div.links a:focus {color:#dddd00;background-color:#0066cc; } div.hg0 { } div.hg1 { } div.hg2 { } div.hg3 { } div.logo { } h1.logo { } div.liin { } div.links { } div.rechts { } ul.menu { } ul.menu li { } ul.menu li.me { } ul.menu li.leer { } ul.menu li.stil { } li#s1 { } li#s2 { } div.oin { } div.oben { } p.obensub { font-size:1.2em; } div.iin { } div.inhalt { } div.pre { } div.box { } div.table { } table { } tr { } td { } caption { } img.imgl[class] { float:left; margin:2em; margin-left: 0em; } img.imgr[class] { float:right; margin:2em; margin-right: 0em; }
Eine einfache Modifikation in m.css als Stil M(inimal) führt bereits dazu, daß das Menü links statt unten angezeigt wird. Dazu bekommt der body mittels margin-left einen Außenabstand links, der ausreichend groß ist. Das Element div der Klasse links wird an der gewünschten und frei gehaltenen Stelle absolut positioniert. Der Rest sind Kleinigkeiten.
html { } body { margin-left: 16em; } body[id] { } h1 { font-size:2em; } h2 { font-size:1.7em; } h3 { font-size:1.5em; } h4 { font-size:1.2em; } h5 { font-size:1.1em; } p.obensub { font-size:1.2em; } acronym:hover, abbr:hover { cursor: help; } abbr[title], acronym[title], span[title] { border-bottom: thin dotted; cursor: help; } h1[title] { cursor: help; } a:link {color:#003399;} a:visited {color:#003377;} a:hover {color:#007777;} a:active {color:#550077;} a:focus {color:#cccc55; background-color:#0000aa;} div.links a:link {color:#4400aa;} div.links a:visited {color:#8800aa;} div.links a:hover {color:#aa0044;} div.links a:active {color:#ff0044;} div.links a:focus {color:#dddd00;} div.hg1 { } div.hg2 { } div.hg3 { } div.logo { } h1.logo { font-size:4em; } div.liin { position: absolute; top: 1em; left: 1em; width: 14em; } div.links { } div.rechts { } ul.menu { padding-left: 1em; margin-left: 0em; } ul.menu li { } ul.menu li.me { } ul.menu li.leer { list-style-type: none; } ul.menu li.stil { } li#s1 { } li#s2 { } div.oin { } div.oben { } div.iin { } div.inhalt { } div.pre { border: thin dotted #cccccc; border-right: none; padding: 1em; } div.box { } div.table { } table { } tr { } td { } caption { } img.imgl { float:left; margin:2em; margin-left: 0em; } img.imgr { float:right; margin:2em; margin-right: 0em; } img.scale { max-width: 100%; } .clear { clear: both; } @media (max-width:35em) { div.liin {position: relative} body {margin: 1ex} .inhalt ul {list-style-position: inside; padding-left:1em} }
Stil A (a.css), alternativ ist eine leichte Fortführung des M-Stils, allerdings bereits mit zahlreichen dekorativen Formatierungen und Positionierungsanweisungen, jedoch ohne Hintergrundbilder.
body, html { margin: 0em; padding: 0em; } html { background-color: #ffffff; color: #000000; } body { font-size: 1.0em; font-family:Helvetica, sans-serif; } body:hover { color: #111111; } h1 { font-size:2em; } h2 { font-size:1.7em; } h3 { font-size:1.4em; } h4 { font-size:1.2em; } h5 { font-size:1.1em; } p.obensub { font-size:1.0em; } acronym:hover, abbr:hover { cursor: help; } abbr[title], acronym[title], span[title] { border-bottom: thin dotted; cursor: help; } abbr, acronym, kbd, var { font-family: serif; } code, kbd, var { font-weight: bolder; } h1[title] { cursor: help; } a:link {color:#0033ff;} a:visited {color:#3300ff;} a:hover {color:#ff0033;} a:active {color:#ff0000;} a:focus {color:#cccc55; background-color:#0000aa;} div.links a:link {color:#0088ff;} div.links a:visited {color:#8800ff;} div.links a:hover {color:#ff0088;} div.links a:active {color:#ff0000;} div.links a:focus {color:#dddddd;} div.hg1 { } div.hg2 { } div.hg3 { } div.logo { } h1.logo { font-size:3em; padding: 0em; margin: 0em; } div.liin { position: fixed; top: 0em; left: 0em; bottom: 11em; width: 13em; overflow: auto; border: solid 1px #000000; padding: 0.5em; margin: 0.5em; } div.links { } div.rechts { margin-left: 14.5em; padding: 1em; } ul.menu { list-style-type: none; list-style-position: inside; padding:0em; margin:0em; width: 12em; } ul.menu li { padding-right: 1.5em; } ul.menu li:hover { padding-right: 0.5em; border-right: ridge 1em #777777; } ul.menu li.me:hover { border-right: groove 1em #777777; } ul.menu li.leer { list-style-type: none; } ul.menu li.stil { } li#s1 { } li#s2 { } div.oin { position: fixed; bottom: 0em; left: 0em; border: solid 1px #000000; padding: 0.5em; padding-top: 0em; padding-bottom: 0em; margin: 0.5em; width: 13em; } div.oben h1 { font-size: 1.6em; } div.iin { padding-bottom: 0.5em; } div.inhalt { } div.inhalt h2 { float: left; border: solid 1px #000000; padding: 0.5em; margin: 0.5em; margin-top: 0em; margin-right: 1em; background-color: #ffffff; } div.inhalt h3, div.inhalt h4, div.inhalt h5 { border: solid 1px #000000; padding: 0.5em; margin: 0.5em; clear: both; } body:hover h1, body:hover h2, body:hover h3, body:hover h4, body:hover h5 { color: #ff0000; } div.inhalt ul, div.inhalt ol { clear: both; list-style-position: inside; margin-left: 1em; padding-left: 1em; } div.inhalt ul h3, div.inhalt ol h3, div.inhalt ul h4, div.inhalt ol h4 { display: inline; } div.inhalt ul ul { margin-top: 1em; margin-bottom: 1em; padding: 0.5em; } div.pre { border: solid 1px #000000; margin: 0.5em; padding: 1em; overflow: auto; } div.box { } div.table { } table { border-collapse:separate; border: thin solid #444444; border-spacing:0.3em; empty-cells:show; padding: 0.5em; text-align: left; margin: 0.5em; margin-bottom: 2em; } th { padding: 0.5em; border: thin dashed #dddddd; text-align: left; } td { padding: 0.5em; border: thin dashed #eeeeee; } thead th, tfoot th { border: thin solid #aaaaaa; } caption { padding: 0.5em; border: thin dashed #cccccc; margin: 0.5em; } .imgl { float:left; margin:2em; margin-left: 0em; clear: left; } .imgr { float:right; margin:2em; margin-right: 0em; clear: right; } img.scale { max-width: 100%; } .clear { clear: both; } input, select, option { border: thin solid #5555ff; color: #000000; } @media (max-width:35em) { div.liin {position: relative} div.oin {position: relative} div.rechts {margin-left:1em} .inhalt ul {list-style-position: inside; padding-left:1em} }
Zu diesem Stil gibt es kleinere Korrekturen fuer den mircosoft internet-explorer, näheres zu solchen Korrekturen bei den anderen Stilen, Original alternativer Stil ohne msie-Korrektur, Datei ma.css , welche die Korrektur enthält:
div.liin { position: absolute; bottom: auto; height: auto; overflow: visible; }