DevTrain - Position für Position

Das Herz schlägt jedem Designer höher, wenn es um CSS geht. An zentraler Stelle - in einem einzigen File - kann man die gesamte Corporate Identity der Firma hinterlegen. An zentraler Stelle legt man einmal Überschriften H1 bspw. so fest, daß sie in roter Schrift und Größe 18 pt mit blauem Rahemn erscheint. Aber das ist nicht alles, was CSS zu bieten hat. Darum widme ich eine kleine Reihe den besonderen Funktionen der Stylsheets.

In diesem Beitrag beschäftigen wir uns mit der Fähigkeit der CSS Objekte auf der Website genau zu plazieren. Kennen Sie die Krux mit Tabellen arbeiten zu müssen, damit ein Image oder Text genau dort steht wo er stehen soll? Mit CSS ist das alles ein gute Stück leichter.

Mittels Positionsangaben, die bei der Angabe absoluter Positionen vom linken oberen Eck des Browserfensters gerechnet werden, kann man Objekte Pixelgenau plazieren.

<div style="position:absolute; top:100px; left:45px; ><img src="bild.gif"></div>

Die Positionen für die Objekte können dabei aber geausogut relativ festgelegt werden. Relativen Verweise verwenden wir, wenn wir uns auf ein vorheriges Objekt beziehen, wi z.B eine Tabelle.

Damit ist nun sicher gestellt, daß die Grafik bombenfest an dieser Stelle auch verankert ist.
Sicher stellen Sie sich nun die Frage, was passiert, wenn hier bereist eine Tabelle steht...Das macht überhaupt nichts. Die Grafik bleibt genau dort, wo Sie auch hingehört.

Ein Tipp. Alles was durch CSS positioniert werden soll, packt man am besten in einen <div> und vergibt eine ID. Dadurch kann man in CSS gezielt auf bestimmte Objekte zugreifen. Die volle Leistungsfähigkeit schöpft man bei der Erstellung von Klassen in CSS. Dazu aber mehr im nächsten Beitrag.

Wollen wir das Beispiel mal etwas vertiefen. Eine Tabelle wie wir sie aus unseren Anwedungen kennen soll das Browser Fenster ausfüllen.

Das Stylesheet lautet dazu:

<STYLE TYPE="text/css">
BODY
{
    BACKGROUND-COLOR: black
}
TABLE
{
font:8.25pt,Verdana;
position:absolute;
top:0pt;
left:0pt;
height:8.25pt;

}
TD
{
    BACKGROUND-COLOR: white;


}
THEAD
{
    BACKGROUND-COLOR: silver
}
</STYLE>

Der dementsprechende Body dazu könnte so lauten:

<body>
<TABLE>
<thead>
<th >Spalte 1</th>
<th >Spalte 2</th>
</thead>
<tr>
    <td>Test1</td>
    <td>Test2</td>
</tr>
<tr>
    <td>Test3</td>
    <td>Test4</td>
</tr>
</table>
</body>

Das Ergebnis ist ein Site, die oben links eine Tabelle aufbaut.

Eine gute und eine schlechte Nachricht: Der derzeitige Standard CSS 2.0 bietet viele Funktionen, die aber nur annähernd vom IE 6.0 richtig umgesetzt werden. Netscape User ziehen auch hier immer wieder den kürzeren.