Sie sind hier:

CSS-Formatierungen

Feinschliff mit CSS

Zuerst erstellen wir eine Textdatei mit dem Namen seite.css, im selben Verzeihnis wie unsere HTML-Vorlage.
Jetzt definiere ich in der seite.css allgemeine Dinge, wie etwa die Schriftart und Farbe. Oder das Verhalten von Links im allgemeinen.
body,td {
     font-family: Arial, sans-serif, Helvetica, Verdana,;
     color: #000000;
     font-size: 11px;
}

a:link, a:visited, a:active {
     color: #333333;
     text-decoration: underline;
}
a:hover {
     color: #000000;
     text-decoration: none;
}

h1 {
     color: #e9bdc8;
     font-size: 15px;
     font-weight: bold;
}

h2 {
color: #333333;
font-size: 13px;
}

Folgendes bedeuten diese Formatierungen:
der Inhalt zwischen <body> und </body>, so wie der Inhalt aller Tabellenzellen (<td>) bekommt die Schriftart Arial. Wenn diese nicht verfügbar ist sans-serif usw.
Die Schriftfarbe wird Schwarz (#000000)
Die Schrift soll eine Größe von 11 Pixeln haben.
Alle Links sind in einem dunklen Grau (#333333) und unterstrichen (text-decoration: underline;)

Wenn die Maus über einen Link bewegt wird (a:hover), dann ändert sich dessen Farbe in Schwarz (color: #000000;) und er ist nicht mehr unterstrichen (text-decoration: none;)

Alle Überschriften erster Güte (<H1>) erhalten das gleiche helle Rot, wie das Design, sind fett und werden 15 Pixel gross.
Überschriften zweiter Güte werden Dunkelgrau und nur 13 Pixel gross.

Formatierung des Menüs

Um unser Menü besser mit CSS formatieren zu können definieren wir in der HTML-Vorlage eine Klasse ( class="menu" ) und sorgen noch dafür, dass Das menü nicht mittig, sondern oben sitzt (valign="top").

Vorher:
<td bgcolor="#e9bdc8">
    
    <table border="1" width="250">
    <tr>
      <td>
        <?php
          if(SHOW_MENU) { /* Wird nur angezeigt, wenn auch benötigt */
            show_menu();
          }
        ?>
      </td>

Nachher:
<td bgcolor="#e9bdc8" valign="top">
    
    <table border="1" width="250">
    <tr>
      <td class="menu">
        <?php
          if(SHOW_MENU) { /* Wird nur angezeigt, wenn auch benötigt */
            show_menu();
          }
        ?>
      </td>

Jetzt kann das Menü in CSS formatiert werden.

Als erstes möchte ich, dass die hässlichen Aufzählungspunkte nicht mehr zu sehen sind und deren Ausdehnung sich auf 0 beschränkt
td.menu li, td.menu ul {
           margin: 0px;
           padding: 0px;
           list-style: none;
}

Jetzt sollen alle Menüpunkte eine Höhe von 20 Pixel haben und sich üner 100% der Menübreite ausdehnen. Weiter soll die Hintergrundfarbe in einem angenehmen, hellen Blau sein, die Schriftgröße 15 Pixel betragen und der Abstand der einzelnen Menüpunkte 3 Pixel sein.
Das sieht dann so aus:

td.menu a.menu_default, td.menu a.menu_current {
        display: block;
        width: 100%;
        height: 20px;
        line-height: 20px;
        margin-bottom: 3px;
        font-size: 15px;
        text-decoration: none;
       background-color: #b6e2da;
}

Der Menüpunkte, der aktuell aktiven Seite, so wie alle Menüpunkte über die ma die Maus bewegt, sollen fett sein und nicht unterstrichen. Z.B. so:

td.menu a.menu_current, td.menu a:hover {
font-weight: bold;
text-decoration: underline;
}
Ausserdem sollen alle Menüpunkte über die man die Maus bewegt eine Hintergrundfarbe Weiß bekommen:

td.menu a:hover {
background-color: #ffffff;
}

Die Kopfzeile

Die Schrift der Kopfzeile Soll etwas eingerückt werden und 25 Pixel, so wie fett sein. Ausserdem in dem selben Blau wie die Menüpunkte.

Um dies mit CSS zu bewerkstelligen ist es hilfreich auch hier eine Klasse im HTML zu definieren (class="kopf").
Vorher:
<td colspan="2" bgcolor="#e9bdc8">
    
    <table border="1" width="100%" height="120">

Nachher:
<td colspan="2" bgcolor="#e9bdc8" class="kopf">
    
    <table border="1" width="100%" height="120">

Anschließend in der seite.css die gewünschte Formatierung vornehmen:
td.kopf table td {
       font-size: 25px;
       text-indent: 10px;
}

Jetzt folgt der letzte Feinschliff
Ich ersetze in der HTML Vorlage alle border="1" gegen border="0".

Jetzt möchte ich noch, dass der Hintergrund der gesammten Seite in einem hellen Grau erscheint
Vorher:
<body>
Nachher:
<body bgcolor="#dddddd">

Ausserdem soll der eigentliche Seiteninhalt weiterhin einen weißen Hintergrund (bgcolor="ffffff") haben:
Vorher:
    <table border="1" width="100%">
   <tr>
      <td><?php page_content(); ?></td>
    </tr>
    </table>
Nachher:
    <table border="1" width="100%" bgcolor="ffffff">
   <tr>
      <td><?php page_content(); ?></td>
    </tr>
    </table>

Wäre unsere Arbeit bis hier schon ein Websitebaker-Template, so würde das ganze in etwa so aussehen:

Websitebaker Template mit CSS formatiert

Das ist doch schon ganz nett, oder?

Was jetzt noch fehlt ist unser CSS-Design für Ausdrucke.
Bei mit sieht das dann etwa so aus, auch wenn es nicht sehr schön ist:

body, td {
     font-family: Arial, sans-serif, Helvetica, Verdana,;
     color: #000000;
     font-size: 11px;
     background-color: #ffffff;
}

a:link, a:visited, a:active, a:hover {
color: #000000;
text-decoration: underline;
}

h1 {
     color: #000000;
     font-size: 15px;
     font-weight: bold;
}
h2 {
     color: #000000;
     font-size: 13px;
}

td.menu {
display: none;
width: 0px;
}

td.kopf {
height: 30px;
}

table {
width: 0px;
}

So ungefähr würde dann die Druckvorschau aussehen:
CSS formatierte Druckvorschau ohne Menue

Alle Farben sind jetzt Schwarz und das Menü wird nicht mit ausgedruckt. Auch alle Links werden unterstrichen und in der Farbe #000000 (schwarz) dargestellt. Mit dieser Formatierung sollte die Seite auf jedem Drucker gut lesbar gedruckt werden können.

Jetzt müssen wir nur noch alle Dateien zu einem Websitebaker-Template zusammen bauen.

Weiter zum Zusammenbau des Websitebaker Templates >>

Seitenanfang