Minimales Projekt

Dr. O. Hoffmann

CSS-Datei o.css

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