Minimales Projekt

Dr. O. Hoffmann

CSS-Datei u.css

Es handelt sich bei Universum um einen recht einfachen Stil, interessant ist dabei vor allem, daß der Menübereich so ausgelegt ist, daß die teiltransparente Hintergrundgraphik die gesamte Höhe des browser-Fensters ausfüllt. Bei älteren browsern kann es auch da zu Fehlanzeigen kommen. Beim msie ist zudem wieder position:fixed zu korrigieren.

html,body 
{
margin: 0px;
padding: 0px;
}

html
{
background-image:url(knitter.jpg);
background-position: 50% 50%;
background-color:#ffffff;
background-attachment: fixed;
color: #6666aa;
}


body
{
min-height: 100%;
font-size: 1.0em;
font-family:Helvetica, sans-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;
}

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:#009933;}
a:visited {color:#007733;}
a:hover {color:#007777;}
a:active {color:#550077;}
a:focus {color:#cccc55; background-color:#0000aa;}


div.links a:link {color:#660088;}
div.links a:visited {color:#440066;}
div.links a:hover {color:#ffffff; font-weight: bold;}
div.links a:active {color:#ff00aa;}
div.links a:focus {color:#00dddd;}

div.hg0
{
min-height: 100%;
padding: 0em;
margin: 0em;
}

div.hg1
{
}

div.hg2
{
}

div.hg3
{
}


div.logo
{
border: dotted 1px #ffffff;
margin-left: 4em;
margin-bottom: 1em;
margin-top: 0.5em;
margin-right: 0.5em;
color: #ffffff;
}

h1.logo
{
font-size: 3em;
font-weight: bolder;
margin: 0.5em;

}

div.liin
{
}

div.links
{
position: absolute;
position: fixed;
top: 0em;
left: 0em;
bottom: 0em;
min-height:100%;
width: 12em;
padding-left: 0em;
background-image:url(eistr.png);
text-align: right;
padding-right: 1em;
}

div.rechts
{
margin: 1em;
margin-left: 15em;
}


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

ul.menu li:hover
{
padding-right: 0.5em;
margin-right: -1.5em;
border-right: dotted 1em #aaaaff;
}

ul.menu li.me a
{
color: #0000ff;
}

ul.menu li.me a:hover
{
color: #00aaaa;
}

ul.menu li.me:hover
{
border-right: dotted 1em #0000ff;
}


ul.menu li.leer:hover
{
border: none;
}

ul.menu li.stil
{
}

li#s1
{
}

li#s2
{
}

div.oin
{
border: dotted 1px #aaaaff;
float: right;
margin: 1em;
}

div.oin:hover
{
background-image:url(eistr.png);
}

div.oben
{
position: relative;
top: 4px;
left:6px;
border: dotted 1px #aaaaff;
padding: 1em;
width: 10em;
text-align: center;
z-index: 10;
}

div.oben:hover
{
background-image:url(eistr.png);
color: #ffffff;
}

div.oben h1
{
margin: 0.25em;
}

p.obensub
{
}

div.iin
{
border: dotted 1px #aaaaff;
}

div.inhalt
{
position: relative;
top: 4px;
left:6px;
border: dotted 1px #aaaaff;
padding: 1em;
}

div.pre
{
border: dotted 1px #aaaaff;
clear: both;
}
pre
{
position: relative;
top: 4px;
left:6px;
padding: 1em;
margin: 1em;
overflow: auto;
}


div.box
{
border: dotted 1px #aaaaff;
}

div.table
{
border: dotted 1px #aaaaff;
}

table
{
border: dotted 1px #aaaaff;
}

tr
{
border: dotted 1px #aaaaff;
}

th
{
border: dotted 1px #aaaaff;
}

td
{
border: dotted 1px #aaaaff;
}

caption
{
border: dotted 1px #aaaaff;
}

.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: dotted 1px #aaaaff;
}

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

Bei diesem Stil ist nur die eine kleine Korrektur des fixed-Fehlers des browsers msie fällig: mu.css, andere Fehler bewirken keine den Inhalt unzugänglich machenden Effekte.
Zum Vergleich mit dem msie: Original Universum Stil ohne msie-Korrektur!

div.links
{
position: absolute;
}

div.rechts
{
position: absolute;
top: 0em;
left: 15em;
margin: 1em;
overflow: scroll;
}

CSS-Datei e.css

Im Gegensatz zum Stil U wird das Menü beim Stil Elementar anders fixiert. Dazu werden Menü und Inhalt mit position: absolute ausgezeichnet und mit overflow: auto.
So tauchen Rollbalken nur für einen Bereich auf, wenn der größer als der dafür verfügbare Platz ist - für das Menü in der Regel gar nicht. Die verschiedenfarbigen Bilder mit dem Nautilus werden relativ zum browser-Fenster fixiert.

html, body
{
margin: 0em;
padding: 0em;
}
html
{
background-image:url(nautilus014.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
background-color:#ffffff;
color: #000044;
}
body
{
font-family:Helvetica, sans-serif;
font-weight: bold;
}

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
{
font-weight: bolder;
}
a:link {color:#0088cc;}
a:visited {color:#22dddd;}
a:hover {color:#ff22ff;}
a:active {color:#ff2255;}
a:focus {color:#cccc55; background-color:#0000aa;}


div.links a:link {color:#448800;}
div.links a:visited {color:#226600;}
div.links a:hover {color:#ff4400;}
div.links a:active {color:#5555ff;}
div.links a:focus {color:#dddd00; background-color:#0000aa;}

div.hg1
{
}

div.hg2
{
}

div.hg3
{
}


div.logo
{
}

h1.logo
{
  font-size:2em;
  text-align: center;
}

div.liin
{
position: absolute;
top: 0em;
left: 0em;
width: 15em;
padding-bottom: 3em;
background-image:url(nautilus011.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
font-weight: bolder;
}

div.links
{
margin: 0em;
padding: 0em;
overflow: auto;
}

div.rechts
{
position: absolute;
top: 0em;
left: 16em;
right: 0em;
bottom: 0em;
overflow: auto;
margin: 0em;
padding: 0em;
}


ul.menu
{
margin: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-left:1em;
margin-left:1em;
margin-right: 0em;
list-style-position: outside;
text-align: right;
}

ul.menu li
{
padding-right: 2em;
}

ul.menu li:hover
{
background-image:url(weiss.png);
border-right: solid 1em #0000ff;
padding-right: 1em;
}

ul.menu li.me:hover
{
border-right: solid 1em #00ff88;
}

ul.menu li.leer
{
list-style-type: none;
background-image:none;
border: none;
}

ul.menu li.stil
{
}

li#s1
{
}

li#s2
{
}

div.oin
{
background-image:url(nautilus013.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 1em;
margin: 1em;
}

div.oben
{
}

div.iin
{
background-image:url(nautilus015.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 1em;
margin: 1em;
}

div.inhalt
{
padding: 1em;
}

div.inhalt h2, div.inhalt pre, div.inhalt table, 
div.inhalt caption, div.inhalt ul
{
padding: 0.5em;
background-image:url(nautilus012.jpg);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
}

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

div.pre
{
border: thin dotted #cccccc;
border-right: none;
padding: 1em;
}

div.box
{
}


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;
text-align: left;
}
td
{
padding: 0.5em;
border: thin dashed #000055;
}

thead th, tfoot th
{
border: thin solid #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:#4444aa;
border: thin solid #5555ff;
color: #ffffff;
}

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

Bei diesem Stil ist erneut eine Korrektur eines Fehlers des browsers msie fällig: me.css, die von im falsch positionierten Hintergrundblider werden einfach ausgeblendet. Auch overflow: auto interpretiert er falsch, was den Inhalt aber nicht unzugänglich macht oder den Seitenaufbau verdirbt, daher wird das nicht korrigiert.
Zum Vergleich mit dem msie: Original Elementarer Stil ohne msie-Korrektur!

div.liin, div.oin, div.iin, div.inhalt ul,
div.inhalt p, div.pre, div.inhalt pre, 
div.inhalt table, div.inhalt caption,
{
background-image: none;
}