Minimales Projekt

Dr. O. Hoffmann

CSS-Datei v.css

Der Stil V ist mit einigen Hintergrundbildern verziert. Das große Hintergrundbild mit spiralförmigen Punktwolken wird dynamisch und daher bei jedem Aufruf neu und mit Zufallsanordungen berechnet, ebenso die Listensymbole. Zu erklären, wie das im einzelnen gemacht wird, ist allerdings nicht Gegenstand dieses Projektes. Hier handelt es sich nur um Dekoration.
Neben der Positionierung des Menüs oben über dem Inhalt werden Teile des Inhalts und Teile des Menüs teiltransparent hinterlegt. Dazu werden teiltransparente png-Graphiken verwendet. Es gibt einige dynamische Effekte beim Bewegen der Maus über der Seite. Am wichtigsten ist das Sichtbarwerden des Menüs beim Überfahren des bezeichneten Bereiches mit der Maus.
Dazu wird das Pseudoformat :hover verwendet. Nehmen wir etwa das Menü, so wird dessen Inhalt zunächst nicht angezeigt: div.links ul.menu[class] {visibility: hidden;}.
Er wird erst durch das Pseudoformat hover sichtbar gemacht: div.links:hover ul.menu[class] {visibility: visible;}
Beim umgebenden div.links wird gleichzeitig die Größe verändert und das Hintergrundbild ausgetauscht. So wirkt es, als täte das Menü aufklappen, wenn die Maus auf die Aufschrift "Menü" zusteuert.
Solch komplizierte Aktionen machen alte browser wie der msie oder auch der an sich leistungsfähigere Konqueror2.X natürlich nicht mit. Beide können zudem teiltransparente png-Graphiken nicht korrekt interpretieren. Beide können auch den Attributselektor [attribut] nicht interpretieren. Bei der Angabe div.hg1[class] etwa ist der Attribut-Selektor [class] an sich redundant, führt aber bei den browsern, die ihn nicht kennen, dazu, daß entsprechende Anweisungen ignoriert werden. In solche Bereiche können Anweisungen geschrieben werden, die diese browser falsch interpretieren. Das ist hier vor allem für Konqueror2.X relevant, weil für den msie eine extra-Datei vorliegt, siehe unten.
Das Layout der Seite ist also für alte browser deutlich einfacher gehalten, entsprechend ihren Möglichkeiten.

html
{
margin: 0em;
padding: 0em;
background-image:url(bgspirale.php);
background-position: 50% 50%;
background-color:#000000;
color: #55bbcc;
}
body
{
margin: 0em;
padding: 0em;
font-size: 1.0em;
font-family:Helvetica, sans-serif;
}


h1
{
  font-size:2em;
}
h2
{
  font-size:1.8em;
}
h3
{
  font-size:1.6em;
}
h4
{
  font-size:1.4em;
}
h5
{
  font-size:1.1em;
}

acronym:hover, abbr:hover 
{
cursor: help;
}
abbr[title], acronym[title]
{
  border-bottom: thin dotted;
  cursor: help;
}
span[title], h1[title] 
{
  cursor: help;
}


a:link {color:#88aaff;}
a:visited {color:#5588ff;}
a:hover {color:#77aa00;}
a:active {color:#ff00aa;}
a:focus {color:#cccc55; background-color:#008844;}


div.links a:link {color:#ffffdd;background-color:#00aa66;}
div.links a:visited {color:#ffffaa;background-color:#00bb33;}
div.links a:hover {color:#eeffdd;background-color:#66cc00;}
div.links a:active {color:#ffaa00;background-color:#cc0066;}
div.links a:focus {color:#dddd00;background-color:#00ffaa; }

div.links strong {color:#ffffdd;background-color:#00aa66;}

div.hg1[class]
{
position: absolute;
position: fixed;
top: 0em;
left: 0em;
height: 100%;
width: 120px;
background-image:url(bgrst.png);
background-position: 0% 0%;
background-repeat: repeat-y;
z-index: 0;
}

body:hover div.hg1[class]
{
background-image:url(btsg.png);
}

div.hg2[class]
{
position: absolute;
position: fixed;
top: 0em;
right: 0em;
height: 100%;
width: 150px;
background-image:url(bgrst.png);
background-position: 100% 0%;
background-repeat: repeat-y;
z-index: 0;
}

body:hover div.hg2[class]
{
background-image:url(btsg.png);
}

div.hg3
{
display: none;
}

div.logo
{
display: none;
}

h1.logo
{
  font-size:4em;
  padding:0.1em;
  margin:0em;
}

div.links
{
position: absolute;
position: fixed;
top: 0em;
left: 0em;
width: 100%;
z-index: 300;
font-weight:bold;
color: #88ff88;
}
div.links[class]
{
background-image:url(elligruenm60.png);
background-position: 50% 100%;
background-repeat: no-repeat;
height: 50px;
}

div.links[class]:hover
{
background-image:url(elligruent80.png);
height: auto;
}

div.rechts
{
position: static;
margin-left: auto;
margin-right: auto;
margin-top: 13em;
margin-bottom: 0em;
max-width: 44em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
text-align: center;
font-weight:bold;
}



div.links[class] ul.menu
{
visibility: hidden;
}

div.links:hover ul.menu
{
visibility: visible;
}

ul.menu
{
list-style-type: none;
list-style-position: inside;
line-height:2.8em;
text-align:center;
margin-left:0em;
margin-right:0em;
padding-left: 0em;
padding-right: 0em;
}

ul.menu li
{
display: inline;
padding-left: 0.4em;
padding-right: 0.4em;
background-color:#00ff99;
}

ul.menu:hover li
{
background-color:#88ffcc;
}

ul.menu a, ul.menu strong
{
padding: 0.2em;
border: outset 0.2em #005500;
}

ul.menu a:hover
{
border: inset 0.2em #008800;
}

ul.menu a:active
{
border: inset 0.2em #884400;
}

ul.menu li.me a, ul.menu li.me strong
{
padding: 0.2em;
border: outset 0.3em #aaffaa;
font-weight:bolder;
background-color:#008888;
}
ul.menu li.me a:hover
{
border: inset 0.3em #aaccaa;
}

ul.menu li.me a:active
{
border: inset 0.3em #aa66aa;
}

ul.menu li.leer
{
display: none;
}

ul.menu li.stil
{
display: block;
margin: auto;
width: 20em;
background-color: inherit;
}

li#s1
{
}

li#s2
{
display:inline;
}


div.oben
{
border: groove 0.8em #00aa44;
padding-left: 2em;
padding-right: 2em;
text-align: center;
background-color:#aaffbb;
color:#005511;
margin: auto;
max-width: 20em;
}
div.oben:hover
{
border: ridge 0.8em #88ffaa;
}
div.oben p, div.oben h1
{
padding: 0em;
margin: 0.3em;
}


div.inhalt
{
position: relative;
top: 1px;
text-align: justify;
padding-bottom: 2em;
z-index: 100;
}

div.inhalt p:first-letter {font-size:1.4em; color: #00ff88;}
div.inhalt h1:first-letter {font-size:2.4em; color: #00ff88;}
div.inhalt h2:first-letter {font-size:2.0em; color: #00ff88;}
div.inhalt h3:first-letter {font-size:1.8em; color: #00ff88;}
div.inhalt h4:first-letter {font-size:1.8em; color: #00ff88;}

div.inhalt li
{
list-style-image:url(punkt.php?x=30&y=30&e=1)
}

div.inhalt li li
{
list-style-image:url(punkt.php?x=25&y=25&e=0.25)
}

div.inhalt li li li
{
list-style-image:url(punkt.php?x=20&y=20&e=0.5)
}

div.pre
{
background-image:url(mpgt40.png);
padding: 2em;
}

pre
{
padding: 0.5em;
background-image:url(mpgt40.png);
overflow: auto;
margin: 0em;
border: thin solid #00ffcc;
}



div.box
{
  background-color:#E6E6E6;
  margin: 1em;
  padding: 1em;
  width: 20em;
}

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

}
table:hover
{
border: ridge 10px #99dd99;
}
caption
{
padding: 0.5em;
border: thin solid #000000;
margin: auto;
background-color:#ccffdd;
text-align: center;
border: groove 10px #aaccaa;
}


th
{
padding: 0.2em;
border: thin solid #ffffff;
background-color:#ddffdd;
text-align: left;
}
td
{
padding: 0.2em;
border: thin solid #558855;
background-color:#99ee99;
}
input, select, option
{
border: thin solid #558855;
background-color:#99ee99;
}
.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;
}

div.inhalt a[id]:focus
{
display: block;
margin-top: 100px;
}
div.inhalt h4, h3, h2, h1
{
text-align: center;
}

div.inhalt h4 a[id]:first-letter {font-size:1.8em; color: #00ff88;}


@media (max-width:35em) {
.inhalt ul {list-style-position: inside; padding-left:1em} 
div.inhalt {text-align:left}
}

Auch bei diesem Stil ist wieder eine Korrektur der Fehler des browsers msie fällig: mv.css.
Zum Vergleich mit dem msie: Original Verde Stil ohne msie-Korrektur! (Allerdings kann der msie hier bereits von der Kompensation der Konqueror2-Fehler mitprofitieren).

div.hg1, div.hg2
{
display: none;
}


div.links
{
position: absolute;
background-image: none;
}


div.links ul.menu
{
visibility: visible;
}

ul.menu li
{
background-color: transparent;
}

div.pre
{
background-image: none;
padding: 2em;
}
pre
{
background-image: none;
}