Minimales Projekt

Dr. O. Hoffmann

CSS-Datei s.css

Der Stil S geht von der Idee her auf einen Stil auf den W3C-Seiten zurück. Mittels position: relative, margin, padding und verschiedenen Hintergrundfarben wird ein Effekt hervorgerufen, als täten verschiede Strukturen Schatten werfen.
Zudem wird das Menü rechts oben fixiert. Ältere browser interpretieren das gar nicht und der ebenfalls ältere microsoft-internet-explorer (kurz: msie) interpretiert es fehlerhaft (statt position: fixed; nimmt er position: static;). Korrekt wäre ein Ignorieren, wenn er technisch nicht in der Lage wäre, das zu interpretieren. Dann kann das technische Problem im Prinzip umgangen werden, indem erst position: absolute direkt gefolgt von position: fixed festgelegt wird. Da der msie fixed aber als static interpretiert, zeigt er Unfug an. Um diesen Fehler des msie zu kompensieren, bekommt der msie eine Datei mit besonderen CSS-Anweisungen zugewiesen. In weiser (?) Voraussicht der zahlreichen Fehler dieses browsers oder aus Größenwahn haben die microsoft-Entwickler eine spezielle Syntax erfunden (siehe Kopfdateien), mit der auskommentierte CSS-Anweisungen vom msie trotzdem interpretiert werden. Das wird hier im Bedarfsfalle angewendet, um ihm eine besondere Behandlung zukommen zu lassen. Die Datei heißt dann entsprechend zu s.css einfach ms.css. Diese Datei dient nicht dazu, den Stil genauso wie korrekt interpretiert anzeigen zu lassen, sondern den Inhalt auch für diesen browser zugänglich zu halten. Hier war es beispielsweise einfacher, den msie das Menü links statt rechts anzeigen zu lassen, um weiteren Unfug bei der Anzeige des preformatierten Quelltextes zu vermeiden.

html
{
margin: 0em;
padding: 0em;
background-color:#ffffdd;
color:#000044;
}
body
{
margin: 0em;
padding: 0em;
font-size: 1em;
font-family:times, serif;
}

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:#770077;}
a:active {color:#550077;}
a:focus {color:#cccc55; background-color:#0000aa;}


div.links a:link {color:#0000ff;}
div.links a:visited {color:#0000aa;}
div.links a:hover {color:#bb0066;}
div.links a:active {color:#ffaa00;}
div.links a:focus {color:#dddd00;background-color:#0066cc; }

div.hg1
{
display: none;
}

div.hg2
{
display: none;
}

div.hg3
{
display: none;
}


div.logo
{
background-color: #442266;
padding-left: 0.25em;
padding-top: 0.5em;
}

h1.logo
{
font-size:3em;
text-align: center;
padding: 0em;
margin: 0em;
background-color:#ffffdd;
border: thin solid #8844cc;
}

div.liin
{
position: absolute;
position: fixed;
top: 2em;
right: 1em;
background-color: #442266;
border: thin solid #8844cc;
width: 13em;
}

div.links
{
position: relative;
top: -1em;
left: -0.5em;
background-color: #ccccee;
border: thin solid #000000;
padding: 1em;
}

div.rechts
{
position: absolute;
top: 0em;
right: 14em;
left: 0.5em;
}


ul.menu
{
list-style-type: none;
list-style-position: inside;
padding-left: 0em;
margin-left: 0em;
}

ul.menu li
{
}

ul.menu a, ul.menu strong
{
display: block;
border: 5px groove #000055;
text-align: center;
padding: 1px;
margin: 1px;
background-color: #aaaaff;
}

ul.menu a:hover
{
background-color: #8888ee;
border: 5px inset #000055;
padding-top: 2px;
padding-bottom: 0px;
}

ul.menu li.me
{
border: 7px groove #000055;
}

ul.menu li.me a
{
border: 7px solid #aaaaff;
font-weight:bold;
}

ul.menu li.me a:hover
{
border: 7px inset #000055;
}


li.leer
{
}

li.stil a, li.stil strong
{
display: inline;
border: none;
text-align: left;
padding: 0px;
margin: 0px;
background-color: #ccccee;
}

li.stil a:hover
{
display: inline;
border: none;
text-align: left;
padding: 0px;
margin: 0px;
background-color: #ccccee;
}


li#s1
{
}

li#s2
{
}

div.oin
{
background-color: #442266;
margin: 1em;
margin-top: 2.0em;
margin-left: 1.5em;
border: thin solid #8844cc;
}

div.oben
{
position: relative;
top: -1em;
left: -0.5em;
background-color: #ccccee;
border: thin solid #000000;
padding: 0.5em;
}

div.iin
{
background-color: #442266;
margin: 1em;
margin-left: 1.5em;
margin-top: 1.5em;
border: thin solid #8844cc;
}

div.inhalt
{
position: relative;
top: -1em;
left: -0.5em;
background-color: #ccccee;
border: thin solid #000000;
padding: 0.5em;
}

div.inhalt p:first-letter 
{font-size:2em; 
color: #0088ff; 
float: left; 
padding-right: 0.2em; 
margin-top: 0em; 
margin-bottom: 0em;
}
div.inhalt h1:first-letter 
{
font-size:2.4em; 
color: #0088ff;
}
div.inhalt h2:first-letter 
{
font-size:2.0em; 
color: #0088ff;
}
div.inhalt h3:first-letter 
{
font-size:1.8em; 
color: #0088ff;
}
div.inhalt h4:first-letter 
{
font-size:1.6em; 
color: #0088ff;
}
div.inhalt h5:first-letter 
{
font-size:1.4em; 
color: #0088ff;
}
div.pre
{
margin: 1em;
background-color:#442266;
padding-top: 0.5em;
padding-left: 0.25em;
}

pre
{
padding: 0.5em;
background-color:#ffffdd;
overflow: auto;
margin: 0em;
border: thin solid #8844cc;
}

div.box
{
}

div.table
{
overflow: auto;
}
table
{
border-collapse:separate;
border: groove 10px #aaaacc;
border-spacing:0.3em;
background-color:#ccddff;
empty-cells:show;
padding: 0.5em;
text-align: left;
margin: auto;
margin-bottom: 2em;

}
table:hover
{
border: ridge 10px #9999dd;
}
caption
{
padding: 0.5em;
border: thin solid #000000;
margin: auto;
background-color:#ccddff;
}


th
{
padding: 0.2em;
border: thin solid #ffffff;
background-color:#ddddff;
text-align: left;
}
td
{
padding: 0.2em;
border: thin solid #555588;
background-color:#9999ee;
}



.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
{
background-color:#9999ee;
border: thin solid #555588;
}


@media (max-width:35em) {
div.liin {position: relative; right:0} 
div.rechts {position: relative; right:0; left:0}
.inhalt ul {list-style-position: inside; padding-left:1em} 
}

Wenn es unter den Lesern noch jemanden gibt, der noch den microsoft internet explorer 6 oder älter benutzt, für den habe ich nochmal die unkorrigierte Originalstilvorlage im Angebot, nur mal um zu gucken, wie schlecht der browser wirklich CSS interpretiert: Original Schatten Stil ohne msie-Korrektur!
Sofern eine solche Korrektur vorhanden ist, kann sie bei jedem Stil in der location-Zeile abgeschaltet werden, indem dem Stil eine 0 vorangestellt wird, also stil=0s statt stil=s.
Die CSS-Datei ms.css mit den Korrekturen:

div.liin
{
position: absolute;
left: 1em;
}

div.links
{
width: 13em;
}

div.rechts
{
left: 14em;
right: 1em;
}

ul.menu li
{
width: 10em;
padding: 0em;
margin: 0em;
}

div.pre
{
padding-bottom: 1px;
}