Dr. O. Hoffmann
Der Stil O ist mit einigen Hintergrundbildern verziert. Verschiedene Teile des Inhalts und Teile des Menüs werden teiltransparent hinterlegt. Dazu werden teiltransparente PNGs verwendet. Es gibt einige dynamische Effekte beim Bewegen der Maus über der Seite. Dazu wird das Pseudoformat :hover verwendet.
html { background-color:#cceeff; color: #002266; } html,body { height: 100%; margin: 0px; padding: 0px; } body { font-size: 1.0em; font-family:Times, serif; } div.hg0 { } div.hg1 { display: none; } div.hg2 { position: fixed; bottom: 0px; left: 0px; height: 100%; width: 100%; background-image:url(blzirk2.png); background-position: bottom left; background-repeat: no-repeat; z-index: 0; } div.hg3 { display: none; } body:hover div.hg3 { display: block; position: fixed; bottom: 0px; left: 40%; height: 256px; width: 256px; background-image:url(bltoh1.png); background-position: bottom left; background-repeat: no-repeat; z-index: 0; } h1 { font-size:2em; } h2 { font-size:1.6em; } h3 { font-size:1.2em; } h4 { font-size:1.1em; } h5 { font-size:1.1em; } 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:#002277;} a:visited {color:#000066;} a:hover {color:#dd66dd;} a:active {color:#ff00ff;} a:focus {color:#cccc88; background-color:#003399;} ul.menu a:link {color:#002277;} ul.menu a:visited {color:#000066;} ul.menu a:hover {color:#eeeeff;} ul.menu a:active {color:#0000ff;} ul.menu a:focus {color:#cccc88; background-color:#003399;} div.logo { text-align: left; margin: 0em; padding:0em; } h1.logo { font-size:6em; margin: 0em; padding:0em; padding-left:0.5em; } div.links:hover h1.logo { color: #cceeff; } div.links { position: absolute; position: fixed; text-align: left; width: 15em; top: 0em; right: 0em; bottom:0em; font-weight:bold; margin: 0em; padding: 0em; min-height: 100%; background-image:url(blwdh.png); } div.rechts { position: absolute; right:15em; top:0em; bottom:0em; left:0em; background-image:url(blzirk.png); background-position: top right; background-repeat: no-repeat; z-index: 1; } ul.menu { line-height:1.25em; width: 14em; padding-top: 0.2em; margin-top: 0em; padding-bottom: 0.2em; list-style-type: none; list-style-position: inside; padding-left:0em; margin-left:0.5em; } ul.menu:hover { background-image:url(blwdh.png); } ul.menu li { padding-left:1.7em; } ul.menu li:hover { padding-left: 0.5em; border-left: solid 1.2em #0000ff; } ul.menu li.me { font-weight: bolder; } ul.menu li.me a { color: #0000ff; } ul.menu li.me a:hover { color: #ffffaa; } ul.menu li.leer { border: none; background: transparent; } div.oin { background-image:url(blwdh.png); float: right; margin-top: 2em; margin-right:1em; margin-left:3em; margin-bottom: 2em; text-align: right; width:17em; } div.oben { position: relative; top: -6px; left: -6px; background-image:url(blwdh.png); padding: 1em; } div.oben:hover { color: #cceeff; background-image:url(blwdh.png); } div.inhalt { background-color: transparent; margin: 2em; text-align: justify; padding-bottom:2em; } div.inhalt>img, div.inhalt>p>img { max-width:100%; } div.pre { margin: 1em; background-image:url(blwdh.png); padding: 0.5em; clear: both; } pre { padding: 0.5em; border: thin solid #4488cc; overflow: auto; } div.box { margin: 1em; padding: 1em; max-width: 30em; border: solid thin #3399ff; text-align: right; } div.box:hover { background-image:url(blau.png); } table { border-collapse:separate; border: thin solid #000077; 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 #000044; } td { padding: 0.5em; border: thin dashed #000055; } caption { padding: 0.5em; border: thin dashed #000066; 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 { background-color:transparent; border: thin solid #555588; } @media (max-width:35em) { div.links {position: relative} div.rechts {position: relative; right:0} .inhalt ul {list-style-position: inside; padding-left:1em} }
Solch komplizierte Aktionen machen alte browser natürlich nicht mit. Der msie
kann zudem teiltransparente PNGs nicht korrekt interpretieren. Dieses wird mit
dem bereits erläuterten Trick kompensiert.
Zum Vergleich mit dem msie: Original Olafs Stil ohne msie-Korrektur!
body { background-color:#ffffff; } div.hg2 { display: none; } div.oben, div.oin { background-image: none; } div.links { position: absolute; height: 100%; } div.pre { width: 40em; overflow: auto; }