Ränder

Sie können zwischen zwei Möglichkeiten wählen:

• Ränder mit HTML
• Ränder mit CSS

Ränder mit HTML

Eine Möglichkeit in reinem HTML verwendet eine HTML Tabelle. Achten Sie bitte darauf, dass Sie die Breiten von Tabelle und Rand angeben, da der Browser sonst mit der Darstellung wartet, bis er die Seite komplett geladen hat.

<table width="100%"><tr>
  <td width="40">&nbsp;</td>
  <td>Eigentlicher Seiteninhalt<br>2<br>3<br>4<br>5</td></tr>
</table>

Das ganze funktioniert also so, dass die verfügbare Breite in zwei Spalten aufgeteilt wird. Eine für den Rand, eine für den eigentlichen Inhalt.

Die linke Spalte hat eine fixe Breite, die ich hier absolut angegeben habe (40 Pixel) und enthält nur das Zeichen   welches ein spezielles Leerzeichen ist, das sog. non-breaking-space.

Dieses ist im HTML Kurs beschrieben. Der eigentliche Seiteninhalt kommt in die rechte Spalte. Schon haben wir einen linken Rand, da die linke Spalte effektiv leer ist.

Ränder mit CSS

Eine andere Möglichkeit arbeitet mit der aktuelleren Technologie CSS (cascading style sheets). Sie ist sauberer, da Sie nichts mißbraucht, um einen Effekt zu erzeugen, sondern formatiert.

Das folgende Fragement gehört in den head-Bereich der HTML-Datei und gibt der Klasse body (also allem) einen linken Rand der Breite 40px (40Pixel)

<style type="text/css">
  body { margin-left:40px; }
</style>

Das Schöne an CSS und mit reinem HTML sauber nicht präzise zu realisieren ist zum Beispiel folgendes:

• Alles soll einen linken Rand von 40 Pixel haben (1):
• Die Listen (ul, ol und dl) (unnummerierte, nummerierte Liste und Glossar) sollen einen zusätzlichen Rand von 20 Pixel haben (2), d.h. ihr linker Rand ist 40+20=60 Pixel breit.
• Bilder img hingegen würden "herausgezogen" um -10 Pixel, d.h. ihr linker Rand ist nur 40-10=30 Pixel breit (3).

<style type="text/css">
  body { margin-left:40px; }        /*1*/
  ul, ol, dl { margin-left:20px; }  /*2*/
  img { margin-left:-10px; }        /*3*/
</style>

Als abschließendes Beispiel möchte ich etwas in CSS bringen, was in HTML nicht geht.

Sie können in CSS verschiedene Maßeinheiten nutzen, hier: Zentimeter. Zudem sehen Sie, dass Sie auch einfach zum Beispiel einen rechten Rand hinzufügen könnten, was in HTML wiederum nur mit einer weiteren leeren Spalte simuliert werden könnte.

<style type="text/css">
  body { margin-left: 1cm; margin-right: 0.5cm; }
</style>

Interessant ist es besonders deshalb, weil Sie Ihre CSS Angaben vom Medium abhängig machen können. Und so zum Beispiel eine Einrückung fordern, die auf dem Bildschirm 40 Pixel und beim Ausdruck 1 cm betragen soll.

<style type="text/css">
@media screen {
  body { margin-left: 40px; margin-right: 20px; }
}

@media print {
  body { margin-left: 1cm; margin-right: 0.5cm; }
}
</style>

Nätürlich sind hier die Ränder nur ein Beispiel. Sie können so alle Formatierungen anpassen, und zum Beispiel für den Ausdruck andere Schriftarten nutzen.