Minimales Projekt

Dr. O. Hoffmann

CSS Dateien des Projekts - Grundlagen

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;
}