Ränder

Weitersagen:

brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Ränder

von Thomas Salvador.

In diesem Tip wollen wir Ränder erstellen, die eine Webseite besser lesbar machen können.

Erste Möglichkeit

Eine Möglichkeit in reinem HTML verwendet Tabellen. 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</td></tr>
</table>

Das ganze funktioniert also so, dass die verfügbare Breite in zwei Spalten aufgeteilt wird. 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, s. verwandte Artikel). Der eigentliche Seiteninhalt kommt in die rechte Spalte. Schon haben wir einen linken Rand, da die linke Spalte effektiv leer ist.

leer
leer
leer

Seiteninhalt
Seiteninhalt
Seiteninhalt

Zweite Möglichkeit

Die zweite Möglichkeit arbeitet mit der aktuelleren Technologie CSS (cascading style sheets):

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 Randist 40+20=60 Pixel breit.
Die horizontale Linie wird "herausgezogen" um -10 Pixel, d.h. ihr linker Rand ist nur 40-10=10 Pixel breit (3).

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

Als abschließendes Beispiel möchte ich etwas in CSS bringen, was in HTML beides nicht oder nicht sauber und schon gar nicht problemlos geht. Zum einen kann man in CSS auch mit anderen Maßeinheiten arbeiten, hier: Zentimeter. Zum anderen lässt sich völlig analog, problemlos und präzise auch ein rechter Rand erzeugen.

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

Ränder

Erste Möglichkeit

Zweite Möglichkeit

Verwandte Artikel und Seiten