/* Alles was zwischen /* und */ steht ist ein Kommentar
* und wird in der CSS-Datei nicht beachtet.
* das dient nur als gedächtnisstütze für Dich oder
* als Info für andere. Mehrzeilige Kommentare kannst Du
* mit einem Stern wie hier erreichen */
/* Bezeichner sind z.B. body, p, logocontainer und content
* Wenn Bezeichner schon Schlüsselworte sind in html wie body und p,
* dann stehen sie hier so, wenn es eigene Bezeichner sind, wie
* logocontainer oder content, dann muss ein Rautenzeichen # oder
* ein . (Punkt) davor stehen
*Mit einer Raute ist der Bezeichner ein Name, der nur einmal vorkommen darf
*mit dem Punkt davor bildet der Bezeichner eine class (Klasse), die immer
*wieder verwendet werden darf */
/* Hier steht, wie Schriften grundsätzlich aussehen */
body
{
font-family: sans-serif; /* Irgendeine Schrift ohne Schnörkel*/
font-size:16px; /* soll 16 Pixel groß sein*/
color: #000000; /* in schwarzer Schrift*/
background-color:#ffffff; /* auf weißen Grund, wenn nicht anders angegeben*/
text-align:left; /* linksbündig geschrieben*/
}
h1 {font-size:30px;color:#000000;} /* Überschriften 1. Ordnung Schriftgröße und Farbe*/
h2 {font-size:24px;color:#33cc33;} /* 2. Ordnung*/
h3 {font-size:16px;color:#000000;} /* 3.Ordnung*/
/* Das Absatzzeichen "p"erhält einen Abstand nach oben von 20 Pixeln*/
p {margin-top:20px;}
/*Ein Link - er hat die Abkürzung "a" - soll grundsätzlich so aussehen*/
a:link, a:visited, a:active, a:hover
{
font-weight:bold;
color:#0000ff;
font-size:16px;
background-color:#ffffff;
}
/* wenn der Link besucht wurde, soll er diese Farbe haben*/
a:visited
{
color:#8888ff;
}
/* Wenn die Maus über einen Link gehalten wird, hat er diese Farbe*/
a:active, a:hover
{
color:#ff0000;
}
/* Ein Link wird ohne Schriftdeko dargestellt, also nicht unterstrichen*/
a.menu:link, a.menu:visited, a.menu:active, a.menu:hover
{
text-decoration:none;
}
/* Die Titelzeile hat einen Abstand von oben und von links*/
#title {
padding-top:200px; /* padding ist der Abstand vom hier oberen Objekt*/
margin-left:200px; /* margin ist der Abstand vom linken Rand*/
}
/* Der Logocontainer */
#logocontainer {
border:0px solid #000000;
background-color:#000000;
width:950px;
height: 110px;
padding-left: 10px;
padding-top: 7px;
float:left; /* beschreibt, wo das Objekt stehen soll */
}
/* Der Titelcontainer */
#titelcontainer {
border:0px solid #ffff00;
background-color:#00ff00;
height:100px;
margin-left: 210px;
padding-left:30px;
}
/* Das Menü */
#menucontainer {
border:1px solid #ffffff; /* Ein Rahmen, ein Pixel stark, in der Farbe weiß*/
background-color:#f00000;
width:950px;
height:35px;
padding:5px;
margin:0px 5px 5px 0px;
line-height:35px; /* ist hier = height und unnötig,
* bei einer senkrechten Navigation aber wichtig!*/
float:left;
}
/* Mit dem Punkt davor gehört menutitle zum menucontainer
* hier kommt er nicht vor, aber in einem senkrechten Menü*/
.menutitle
{
margin:-5px -5px 5px -5px; /* Abstand links,oben, rechts, unten*/
padding:5px;
background-color:#00dd00;
font-weight:bold; /* fette Schrift*/
border-bottom:1px solid #606060; /* bekommt nach unten einen eigenen Rand*/
}
/* Der Inhalt */
#content {
border:0px solid #606060; /* Die Randfarbe ist natürlich ohne sichtbaren Rand (0px) witzlos*/
background-color:#dddddd;
padding:10px;
margin-left:0px;
min-height:600px; /* Es gibt eine Hintergrundfarbe, deswegen fällt eine
zu kurze Seite schnell auf, hier wird sie auch ohne Inhalt länger*/
width:940px; /* 950 Pixel Gesamtbreite minus 10 Pixel Rand*/
}
/* Container für irgendwas, was ich anders darstellen will
mit einer anderen Schrift, einer anderen Schriftfarbe, einem
anderen Hintergrund usw.*/
.code {
color: #dddd55;
border:0px solid #606060;
background-color:#666666;
padding:10px;
font-family: monospace;
font-weight:bold;
}