CSS Syntax kleine Einführung Teil 2

Im zweiten Teil unser Einführung in die Syntax und Semantik des CSS geht es um die Weiterentwicklung der im ersten Beitrag gemachten Darstellungen . Wir werden hier zur Hinführung unseres größeren Ziels: „Der Verkaufseite mit dem Menü“, wichtige Konzepte wie das „Tabellenlayout vs. CSS“ kennenlernen.

Um unser vorläufiges Endziel „Der Verkaufsseite mit  Seiten-Menüs“ zu erreichen, wird hier das in Verruf gekommene Tabellenlayout dem mit CSS gegenübergestellt.

Tabellenlayout vs. CSS

Betrachten wir  uns zunächst ein Layout einer Seite, die mit Tabellen aufgebaut ist. Composer wie Dreamweaver, NVU etc.  machen einen derartigen Aufbau, wenn man sie nicht zwingt die Seite anders aufzubauen.

Machen wir ein Beispiel.

Wie sieht eine typische Seite im Internet aus?

logo bild Name der Seite Name Eigner
Zeile für Menü
linkes Menü

menü1
menü2
menü3
menü3
Seiten text mit Tabelle für Einrückungen
Seiten text mit Tabelle für Einrückungen
Seiten text mit Tabelle für Einrückungen

Wie Sie sehen, haben wir oben horizontal ein Logo-Bereich. Dann kann nach unten ein Horizontalmenü folgen. Nun teilt sich die Seite in einen linken Menüteil und – im einfachen Fall – einen rechten Textteil, wo der Inhalt der Seite steht. Unten sollen beide Teile durch einen die Seite überdeckenden wieder zusammenwachsen.

Das zugehörige HTML-Coding sieht folgendermaßen aus:

<table border=“1″ width=“60%“>
<tr>
<td  colspan=“2″>
<table border=“1″ width=“100%“>
<tr>
<td width=“33%“>logo bild</td>
<td width=“33%“>Name der Seite</td>
<td width=“33%“>Name Eigner</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=“2″>Zeile für Menü</td>
</tr>
<tr>
<td> linkes Menü
<table border=“1″>
<tr>
<td> menü1</td>
</tr>
<tr>
<td> menü2</td>
</tr>
<tr>
<td> menü3</td>
</tr>
<tr>
<td> menü3</td>
</tr>
</table>
</td>
<td>
<table border=“1″>
<tr>
<td> Seiten text mit Tabelle für Einrückungen</td>
</tr>
<tr>
<td> Seiten text mit Tabelle für Einrückungen</td>
</tr>
<tr>
<td> Seiten text mit Tabelle für Einrückungen</td>
</tr>
</table>
</td>
</tr>
<tr>
</table>

Ganz schön unübersichtilich, oder?  Wenn nun noch der Text innerhalb des rechten Textteils dazu kommt, der Einrückungen haben soll, dann müssen Sie in die Bereiche, die den Text „Seiten text mit Tabelle für Einrückungen“ beinhalten auch nochmals jeweils  eine  Tabelle anlegen. Also nochmals <table>…</table>.

Schauen  Sie sich aber  einmal die Seite eines Blogs im Quelltext an z.B. meine Seite hier. Dann sehen Sie Anweisungen wie

<div id=“container“>
<div id=“menu“>
…………….
…………….
</div>
</div>

Mit der Anweisung <div>..</div> werden die Seiten eingeteilt.  Das Aussehen der Seiten überläßt man CSS. Welchen Bereich die Seite gerade hat, wird über die Schachtelung der <div id=“xxx“> gesteuert.

Ich hatte ja im ersten Teil schon erwähnt, dass der id-Wert  nur einmal auf einer Seite erlaubt ist. Deshalb kann man ggf. die einzelnen <div id=“xxx“>…</div> von anderen absetzen.!

Die obige Seitensturktur könnte man im Prinzip so mit <div>..</div>  abbilden:

<div id=“header“>
logo bild
Name der Seite
Name Eigner
</div> <!— end header –>
<div id=“menue“>hor Menü</div>
<div id=“l_menue“>
linkes Menü
<ul>
<li>menü1</li>
<li>menü2</li>
<li>menü3</li>
</ul>
</div> <!— end l_menue –>
<div  id=“text“>
Seitentext
</div>  <!— end text –>
</div> <!– end conainer –>

Das ist schon übersichtlicher. Nur habe ich bei der Unterteilung des Logo-Bereiches etwas gemogelt:  . Man könnte diesen Bereich nun auch noch mit CSS unterteilen und anzeigen. Doch wäre der Aufwand erhöht.

Man kann mit CSS zwar fast völlig ohne Tabellen auskommen, doch : „Trotz CSS, dürfen Sie doch noch Tabellen anwenden„.

Ich persönlich würde diesen Logo-Bereich mit einer Tabelle ausstatten, da ich die Abstände mit Prozentweiten, noch variabel halten könnte, und Logo, Seitentitiel und „Name Eigner“ auf der Seite verteilen könnte.

In vielen Büchern liest man Aussagen wie „CSS  das tabellenlose Design“! In einigen wird es geradezu als sportliche Betätigung angesehen, ohne jegliche Tabelle in einem Design auszukommen. Meist sind aber diese Quellcodes genauso unübersichtlich und schlecht wartbar, wie die alten tabellenbehafteten.

Deshalb sollten Sie die „Kirche im Dorf“ lassen und dann Tabellen aufnehmen, wenn es übersichtlicher  ist. Sie wollen die Seite ja in 1 bis 2 Monaten auch noch schnell verstehen können!

CSS soll ich ja auch gewährleisten – so ist zu lesen – dass man Programmierung vom Design trennt. Auch hierzu sind quasi sportliche Aktivitäten im Gange, die man in Foren und Blogs verfolgen kann. Ganz durchhalten kann man das aber meist nicht!

Mein Rat an der Stelle, erstellen Sie Ihre Seiten unter zu Hilfenahme von CSS so, dass Sie sie auch in 3 Jahren noch gut warten können.

Beim nächsten Blog werden wir doch versuchen,  den angesprochenen Logo-Bereich  ohne Tabelle zu gestalten, dazu werden wir uns um das Floatieren von Bereichen kümmern müssen.

Bis dann also

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar