HTML: Ausrichtung

von Jan Winkler

Manchmal reicht es nicht Elemente einfach nur auf dem Bildschirm darzustellen, dann soll eine Ausrichtung erfolgen. Die einzelnen Formen der Ausrichtung werden Ihnen nun in diesem Kapitel näher erläutert.

Zeilenumbruch  

Um einen Zeilenumbruch (Zeilenwechsel) einzufügen können Sie das br-Element benutzen. Der Text (bzw. die Elemente) werden dann bei der Darstellung direkt auf die nächste (Text-)Zeile umgebrochen. Beispiel:

<p> Zeile 1 <br> Zeile 2 </p> 

Hinweis: Das br-Element hat keinen beenden Tag und kann außer bei Text auch anderswo angewandt werden. Beispiel:

<img><br><img> 

Bereich ohne Umbruch  

Bei Bereichen ohne Umbruch, d.h. Bereichen, bei denen die Inhalte unbedingt auf einer gemeinsamen Zeile stehen sollen/müssen, können Sie das nobr-Element verwenden. Beispiel:

<p> normaler Text 
    <nobr> Bereich ohne Umbrüche</nobr> 
    normaler Text </p>

Hinweis: Das genannte Element bezieht sich natürlich nicht nur auf Text sondern kann auch bei anderen Elementen angewandt werden. Beispiel:

<img><nobr><img> <img><img></nobr><img> 

Umbruchbereiche  

Falls bei Bereichen ohne Umbruch doch die Möglichkeit bestehen soll, das in einem Bereich ein möglicher Umbruch sein kann, so können sie diesen Bereich mit dem wbr-Element festlegen. Beispiel:

<p> normaler Text 
    <nobr> Bereich ohne Umbrüche 
     <wbr>Möglicher Umbruchbereich </wbr> 
    Bereich ohne Umbrüche</nobr>
    normaler Text </p> 

Ebenen  

Um mehrere Elemente zu einer gemeinsamen Gruppe/Ebene zusammen zu fassen, können Sie das div-Element benutzen. Es umschließt die gewünschten Elemente und kann so Festlegungen (z.B. Ausrichtung etc.) für alle eingeschlossenen Elemente vereinheitlichen. Beispiel:

<div align="right">
 normaler Text <br>
<img>
 normaler Text
</div> 

Zentrierung  

Um eine Zentrierung von mehreren Elementen zu erhalten, können Sie das center-Element verwenden. Dieses umschließt die gewünschten Elemente und richtet sie mittig aus. Allerdings funktioniert dieses Element nicht auf allen Browsern. Beispiel:

<center>
 Text<br>
 Text 
</center> 

Horizontale Linie  

Eine horizontale Linie wird durch das hr-Element eingefügt. Dieses gilt als selbständiger Absatz und braucht keinen beendenden Tag. Beispiel:

<p> Text </p>
<hr>
<p> Text </p> 

Folgende Attribute können bei horizontalen Linien verwendet werden:

• align - Ausrichtung (right, left, center, justify)
• color - Farbe als Farbname oder Farbcode
• size - Höhe in Pixel oder Prozent
• width - Breite in Pixel oder Prozent

Beispiel:

<hr align="right" color="red" size="1" width="50%"> 

« zurück

weiter »