zurück zu Template 2.4: Vorschau Quelltexte

Beispiel: CSS-Datei zu Template 2.4 (Zwei-Zeiler mit jeweils zwei Spalten im Kopf- und Inhaltsbereich)

/* CSS-File generated by Christiane Mueller, http://www.itib.de */
/* Version: 2009-03-05 */
/* USED COLORS ------------------------------------------------- */
/* BENUTZTE FARBEN --------------------------------------------- */
/* white (e.g. content-background)          #ffffff    weiss     */
/* black (e.g. font)                        #000000    schwarz   */
/* grey (e.g. inner-containers)             #f0eeeb    grau      */
/* red (e.g. hover-links)                   #b80000    rot       */
/* blue (e.g. links)                        #0000a3    blau      */
/* light blue (e.g. website-background)     #efefff    hellblau  */
/* violett (e.g. visited links)             #5d005d    violett   */
/* GENERAL ----------------------------------------------------- */
/* ALLGEMEIN --------------------------------------------------- */
/* page general */
/* Seite generell */
body {
background-color: #efefff;   /* Hintergrund: hellblau */
color: #000000;              /* Textfarbe: schwarz */
font-family: Verdana, Helvetica, Arial, sans-serif; /* Schriftart: Verdana bis sans-serif */
font-size: 100.01%;          /* Schriftgroesse: ca. 100% */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
text-align: left;            /* Horizontale Ausrichtung: linksbuendig */

}
/* page-container including header-, main- and footer-container */
/* Seiten-Container mit Kopf-, Inhalts- und Fussbereich */
#top {
background-color: #ffffff;   /* Hintergrund: weiss */
line-height: 1.5em;          /* Zeilenhohe: 1.5fach */
margin: auto;                /* Aussenabstand: automatisch */
padding: 0;                  /* Innenabstand: keiner */
max-width: 65em;             /* Maximalbreite: 65em */

}
/* link general */
/* Verweis allgemein */
a:link {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #0000a3;              /* Textfarbe: blau */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
text-decoration: none;       /* Textdekoration: keine */

}
/* visited link */
/* Bereits besuchter Verweis */
a:visited {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #5d005d;              /* Textfarbe: violett */
font-style: italic;          /* Schriftstil: kursiv */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
text-decoration: none;       /* Textdekoration: keine */

}
/* link on mouse-over */
/* Verweis bei Mouse-over */
a:hover {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #b80000;              /* Textfarbe: rot */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
text-decoration: underline;  /* Textdekoration: unterstrichen */

}
/* active or focused link */
/* Aktiver Verweis oder Verweis mit Fokus */
a:active,
a:focus {
background-color: #b80000;   /* Hintergrund: rot */
color: #ffffff;              /* Textfarbe: weiss */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
text-decoration: underline;  /* Textdekoration: unterstrichen */

}
/* Skip-Navigation ('hidden' skip-anchors) */
/* Skip-Navigation ('unsichtbare' Sprungmarken) */
ol#skip {
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */

}
ol#skip li {
display: inline;             /* Anzeigeart: Inline, Element erzeugt keine neue Zeile */
list-style: none;            /* Listendarstellung: keine */

}
ol#skip a:link,
ol#skip a:visited,
ol#skip a:hover {
left: -400em;                /* Positionierung: links ausserhalb des Anzeige-Bereiches */
position: absolute;          /* Positionierung: absolut */

}
ol#skip a:active,
ol#skip a:focus {
left: 0;                     /* Positionierung: links oben */
text-align: center;          /* Horizontale Ausrichtung: zentriert */
width: 20em;                 /* Breite: 20em */

}
/* vertical navigation-list */
/* Liste fuer vertikale Navigationsleiste */
ol#vertical {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #000000;              /* Textfarbe: schwarz */
list-style: none;            /* Listendarstellung: keiner */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */

}
/* item in the vertical navigation-list */
/* Einzelne Listenpunkte in der vertikalen Navigationsleiste */
ol#vertical li {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #000000;              /* Textfarbe: schwarz */
letter-spacing: .1em;        /* Zeichenabstand: 0.1em */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0 0 .5em .5em;      /* Innenabstand: oben/rechts keiner, unten/links 0.5em */

}
/* active item in the vertical navigation-list */
/* Aktiver Listenpunkt in der vertikalen Navigationsleiste */
ol#vertical li strong.activated {
background-color: #ffffff;   /* Hintergrund: weiss */
border: 1px solid #000000;   /* Rahmen alle Seiten: 1px, durchgezogen, schwarz */
color: #000000;              /* Textfarbe: schwarz */
display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em;               /* Innenabstand: 0.5em */

}
/* link general in navigation-lists */
/* Verweis allgemein in Navigationsleisten */
ol#vertical li a:link {
background-color: #efefff;   /* Hintergrund: hellblau */
border: 1px solid #0000a3;   /* Rahmen alle Seiten: 1px, durchgezogen, blau */
color: #0000a3;              /* Textfarbe: blau */
display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
font-weight: bold;           /* Schriftgewicht: fett */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em;               /* Innenabstand: 0.5em */
text-decoration: none;       /* Textdekoration: keine */

}
/* visited link in navigation-lists */
/* Bereits besuchter Verweis in Navigationsleisten */
ol#vertical li a:visited {
background-color: #efefff;   /* Hintergrund: hellblau */
border: 1px solid #5d005d;   /* Rahmen alle Seiten: 1px, durchgezogen, violett */
color: #5d005d;              /* Textfarbe: violett */
display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
font-style: italic;          /* Schriftstil: kursiv */
font-weight: bold;           /* Schriftgewicht: fett */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em;               /* Innenabstand: 0.5em */
text-decoration: none;       /* Textdekoration: keine */

}
/* link on mouse-over in navigation-lists */
/* Verweis bei Mouse-over in Navigationsleisten */
ol#vertical li a:hover {
background-color: #ffffff;   /* Hintergrund: weiss */
border: 1px solid #b80000;   /* Rahmen alle Seiten: 1px, durchgezogen, rot */
color: #b80000;              /* Textfarbe: rot */
display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
font-weight: bold;           /* Schriftgewicht: fett */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em;               /* Innenabstand: 0.5em */
text-decoration: underline;  /* Textdekoration: unterstrichen */

}
/* active or focused link in navigation-lists */
/* Aktiver Verweis und Verweis mit Fokus in Navigationsleisten */
ol#vertical li a:active,
ol#vertical li a:focus {
background-color: #b80000;   /* Hintergrund: rot */
border: 1px solid #000000;   /* Rahmen alle Seiten: 1px, durchgezogen, schwarz */
color: #ffffff;              /* Textfarbe: weiss */
display: block;              /* Anzeigeart: Block, Element erzeugt neue Zeile */
font-weight: bold;           /* Schriftgewicht: fett */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em;               /* Innenabstand: 0.5em */
text-decoration: underline;  /* Textdekoration: unterstrichen */

}
/* inner-container */
/* Allgemeiner Container */
div.container p {
background-color: #f0eeeb;   /* Hintergrund: grau */
border: 1px dotted #000000;  /* Rahmen alle Seiten: 1px, gepunktet, schwarz */
color: #000000;              /* Textfarbe: schwarz */
margin: 0 .5em;              /* Aussenabstand: oben/unten keiner, rechts/links 0.5em */
padding: .5em;               /* Innenabstand: 0.5em */

}
/* uppercase word */
/* Text in Grossbuchstaben */
.grossbuchstaben {
text-transform: uppercase;   /* Text in Grossbuchstaben */
}
/* copyright notice */
/* Urheber-Hinweis */
.copyright {
border-top: 1px solid #0000a3;   /* Rahmen oben: 1px, durchgezogen, blau */
clear: both;                 /* Fortsetzung bei Textumfluss: unterhalb */
float: none;                 /* Textumfluss: keiner */
font-size: .85em;            /* Schriftgroesse: 85% des Elternelementes */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
text-align: center;          /* Horizontale Ausrichtung: zentriert */

}
/* HEADER ------------------------------------------------------ */ /* Header-Container */
/* Kopfbereich */
#header {
background-color: #ffffff;   /* Hintergrund: weiss */
clear: both;                 /* Fortsetzung bei Textumfluss: unterhalb */
color: #000000;              /* Textfarbe: schwarz */
float: none;                 /* Textumfluss: keiner */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
width: 100%;                 /* Breite: 100% */

}
/* Left Header-Container */
/* Container links im Kopfbereich */
#header_left {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #000000;              /* Textfarbe: schwarz */
float: left;                 /* Textumfluss: Container links ausrichten */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em 0;             /* Innenabstand: oben/unten 0.5em, rechts/links keiner */
width: 25%;                  /* Breite: 25% */

}
/* Right Header-Container */
/* Container rechts im Kopfbereich */
#header_right {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #000000;              /* Textfarbe: schwarz */
float: right;                /* Textumfluss: Container rechts ausrichten */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em 0;             /* Innenabstand: oben/unten 0.5em, rechts/links keiner */
width: 74%;                  /* Breite: 74% */

}
/* MAIN -------------------------------------------------------- */ /* Main-Container */
/* Inhaltsbereich */
#main {
background-color: #ffffff;   /* Hintergrund: weiss */
border-top: 1px solid #0000a3;   /* Rahmen oben: 1px, durchgezogen, blau */
clear: both;                 /* Fortsetzung bei Textumfluss: unterhalb */
color: #000000;              /* Textfarbe: schwarz */
float: none;                 /* Textumfluss: keiner */
margin: 0;                   /* Aussenabstand: keiner */
padding: 0;                  /* Innenabstand: keiner */
width: 100%;                 /* Breite: 100% */

}
/* Left Main-Container */
/* Container links im Inhaltsbereich */
#navigation {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #000000;              /* Textfarbe: schwarz */
float: left;                 /* Textumfluss: Container links ausrichten */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em 0;             /* Innenabstand: oben/unten 0.5em, rechts/links keiner */
width: 25%;                  /* Breite: 25% */

}
/* Right Main-Container */
/* Container rechts im Inhaltsbereich */
#content {
background-color: #ffffff;   /* Hintergrund: weiss */
color: #000000;              /* Textfarbe: schwarz */
float: right;                /* Textumfluss: Container rechts ausrichten */
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em 0;             /* Innenabstand: oben/unten 0.5em, rechts/links keiner */
width: 74%;                  /* Breite: 74% */

}
/* heading level 1 */
/* Ueberschrift Ebene 1 */
#content h1 {
border: 1px solid #000000;   /* Rahmen alle Seiten: 1px, durchgezogen, schwarz */
font-size: 1.4em;            /* Schriftgroesse: 1.4em */
font-weight: bold;           /* Schriftgewicht: fett */
line-height: 1.5em;          /* Zeilenhohe: 1.5fach */
margin: 0 .3em;              /* Aussenabstand: oben/unten keiner, rechts/links 0.3em */
padding: .2em .3em;          /* Innenabstand: oben/unten 0.2em, rechts/links 0.3em */

}
/* heading level 2 */
/* Ueberschrift Ebene 2 */
#content h2 {
border-bottom: 1px solid #000000;   /* Rahmen unten: 1px, durchgezogen, schwarz */
font-size: 1.2em;            /* Schriftgroesse: 1.2em */
font-weight: bold;           /* Schriftgewicht: fett */
line-height: 1.3em;          /* Zeilenhohe: 1.3fach */
margin: .4em .4em 0 .4em;    /* Aussenabstand: oben/rechts/links 0.4em, unten keiner */
padding: 0;                  /* Innenabstand: keiner */

}
/* paragraph */
/* Absatz */
#content p {
margin: 0;                   /* Aussenabstand: keiner */
padding: .5em;               /* Innenabstand: 0.5em */

} /* paragraph linking to the top of the site */
/* Absatz mit Sprungmarke zum Seitenanfang */
#content p.up {
border-top: 1px dashed #000000;   /* Rahmen oben: 1px, gestrichelt, schwarz */
font-size: .85em;            /* Schriftgroesse: 85% des Elternelementes */
line-height: 1.3em;          /* Zeilenhohe: 1.3fach */
margin: 0 .5em;              /* Aussenabstand: oben/unten keiner, rechts/links 0.5em */
padding: 0;                  /* Innenabstand: keiner */
text-align: right;           /* Horizontale Ausrichtung: rechts */

}

zurück zu Template 2.4: Vorschau Quelltexte