Dr. O. Hoffmann
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; }