» Vorteile!

Hier sehen sie verschiedene Möglichkeiten wie sie diverse Informationen auf ihrer Seite darstellen können.

Wie ich schon Anfangs erwähnt habe:

  • Einfache Navigation
  • Klare Aufbereitung
  • Übersichtlichkeit

Beispiele mit 2,3 oder auch 4 Spalten. Es können aber auch 5 oder mehr Spalten im Code verwendet werden!

Die hier gezeigten Beispiele werden alle über "css" gesteuert. Es wurde kein Table Code table,tr,td usw. verwendet. Der Programmierer bzw. Webdesigner muss den Inhalt PUNKTGENAU ausrechnen und diese im css Code definieren!



Information: Wird ein Element mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Innenabstand und Rahmen von je 20 Pixel Stärke auf allen Seiten definiert,

beträgt die tatsächliche Breite letztendlich 280 Pixel (20 für border-left, 20 für padding-left, 200 für width, 20 für padding-right und 20 für border-right),

die Höhe 180 Pixel (20 für border-top, 20 für padding-top, 100 für height, 20 für padding-bottom und 20 für border-bottom).

Ein zusätzlich definierter Außenabstand müsste zu diesen Werten nochmals addiert werden.

Da ich im #content (Inhalt) einen Seitenabstand links bzw. rechts von padding: 20px gesetzt-definiert habe und in den gezeigten Beispielen 1,2,3,4 und 9-17 noch extra in den Boxen (Inhalt) 5px Seitenabstand geschrieben habe stehen die angesrpochenen Beispiele etwas links von Rand weiter weg, als zum Beispiel 5,6,7 und 8!

Auf meiner Download Seite habe ich zum Beispiel 3 Spalten mit Fotos und einen kurzen Text verfasst.

Beispiel 1
float: left
Hier sehen sie 2 Boxen - eine links - eine rechts. In der ersten Box ist eine blaue Grafik und der Hintergrund der Box ist weiss! padding: 5px
Beispiel 2
float: right
Hier sehen sie 2 Boxen - eine links - eine rechts. In der zeiten Box ist eine grüne Grafik und der Hintergrund der Box ist weiss definiert! padding: 5px
Beispiel 3
text text
Hier sehen sie eine gelbe Grafik mit einem weissen Hintergrund!
padding: 5px
Beispiel 4
text text
Hier sehen sie eine rote Grafik mit einem ebenfalls weissen Hintergrund!
padding: 5px

Beispiel 5
float: left
width:160
padding: 0px;
min-height: 300px;
Beispiel 6
float: left
width:160
padding: 0px;
min-height: 300px;
Beispiel 7
float: left
width:160
padding: 0px;
min-height: 300px;
Beispiel 8
float: right
width:160
padding: 0px;
min-height: 300px;

Beipsiel 9
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 10
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 11
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 12
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 13
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 14
Zentriert Zentriert
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 15
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 16
text text text
mit padding: 5px weiterer text weiterer text weiterer text
Beipsiel 17
text text text
mit padding: 5px weiterer text weiterer text weiterer text

Ein kurzes Zitat lautet:

Es ist ein großer Vorteil im Leben, die Fehler, aus denen man lernen kann, möglichst früh zu begehen!

  Top
Top