Webdesign ohne Tabellen

Tutorials
Tutorials

von Fries Websolutions

Anspruchsvolle Internetseiten werden seit Jahren mit tabellen realisiert. Es geht aber auch ganz ohne Tabelle. Die Lösungen heißen Stylesheets und CSS-Layer.


Stylesheets sind eine einfache Gestaltungsweise, alle Elemente einer Seite werden untereinander gestellt. Damit diese Gestaltungsweise am Monitor lesbar bleibt könnte man beispielsweise diesen Code verwenden:

<body style="margin-left : 15%; margin-right : 20%">

Möchten Sie Textteile besonders hervorheben, z.B. mit einer anderen Hintergrundfarbe, so können Sie dies mit dem folgenden Code realisieren.

<p style="background-color : blue ">Der hervorgehobene Text</p>

Mehr Möglichkeiten haben Sie bei der Verwendung von CSS-Layern. Diese können in beliebiger größe auf der Seite eingesetzt werden. Ihnen stehen hiermit viele Designmöglichkeiten zur Verfügung, wie z.B. eigene Rollbalken. Tabellen sind bei einem CSS-Layer vollkommen überflüssig. Der Begriff Layer steht für Container, diese Container önnen sogar in externe Dateien ausgelagert weren. Ihnen steht somit eine optimale Kontrolle zur Verfügung.

Ein Beispiel für ein CSS-Layer:

<div id="layer01" style="position:absolute; width:250px; padding : 8px;height:400px; left: 100px; top: 100px; background-color: #000000;">Das ist ein Beispiel für ein CSS-Layer</div>

Sie sehen also, dass Sie ein modernes Design vollkommen auf Tabellen verzichten kann. Haben Sie erst einmal Ihre Seite nach diesem Prinzip erstellt, so haben Sie eine äußerst pflegeleichte Seite. Es muss nur immer eine Datei verändert werden. Inhalt und Design werden so von einander getrennt, was auch den Suchmaschinen die Arbeit erleichert. Hierbei sei aber noch angemerkt, dass es zum Teil noch ältere Browser gibt, die mit dieser Designart Probleme haben

11 Trackbacks / Pingbacks

  1. official site
  2. Magic mushroom dispensary Oregon
  3. สล็อต ฝากถอน true wallet เว็บตรง 888pg
  4. Pragmatic Play
  5. Dan Helmer
  6. เว็บปั้มไลค์
  7. รับทำเว็บไซต์
  8. John Lobb
  9. https://stealthex.io
  10. แผ่นปูทางเท้า
  11. link

Leave a Reply

Your email address will not be published.