CSS-Style-Sheets Tutorial Teil 2

Tutorial zu CSS-Style-Sheets Seite 2

Inhaltsverzeichniss CSS Tutorial

Beispiel 5. Freies Positionieren von Schriftzügen und Grafiken:

Bisher war uns das freie Positionieren von Schriftzügen und Grafiken in der Homepage nur mühselig mit unsichtbaren Tabellen möglich. Mit CSS geht es auch anders. In unserem Beispiel wird der Schriftzug "HELLOWORLD" und eine beliebige Grafik frei auf dem Bildschirm positioniert.

<!--

.positioniert {

position:absolute;

left:50px;

top:50px;

font-family:arial;

color:red;

}

.grafikposition {

position:relative;

left:50%;

top:20%;

}

//-->

</style>
</head>
<body>

<div class="positioniert">HELLO WORLD</div>

Und so sieht's im Browser aus...

".positionieren" - Definiert den Namen der Klasse. Sie kann in jedem Tag verwendet werden.

"position:absolute" - Definition der Art der Positionierung. In CSS-Style-Sheets wird grundsätzlich zwischen dem relativen und absoluten Positionieren unterschieden. Die angegebenen Koordinaten beziehen sich auf den linken oberen Fensterrand.

"left:50px" - Definition der Elementposition vom linken Rand aus gesehen. Neben der Maßeinheit px können Sie auch cm oder % einsetzen.

"topt:50px" - Definition der Elementenposition vom oberen Rand aus gesehen. Auch hier können Sie cm oder % als Maßeinheit verwenden.

Eine weitere Möglichkeit der freien Positionierung besteht darin, die Style-Angaben nicht in den Head-Bereich zu schreiben oder sie in eine Datei auszulagern, sondern die Style Angaben direkt in den Body-Bereich der HTML Datei zu schreiben. Hierzu haben Sie folgende Möglichkeiten:

<div style="position:absolute;top:50px;left:50px">HELLO WORLD!</div>

oder

<span style="position:absolute;top:50px;left:50px">HELLO WORLD!</span>

Die beiden obigen Beispiele erzielen den gleichen Effekt wie das erste Beispiel mit den Formatierungen durch die Klassen.

zurück zu CSS Tutorial Seite 1 || weiter zu Seite 3