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

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


verwandte Artikel und Seiten

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 &nbsp; 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:

<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>

Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 2. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/12.html .