Hinweise können über besondere Boxen auf der Webseite angezeigt werden. Hierzu werden die Bereiche mit eine div-tag umrandet, welcher je nach Einsatzzweck eine andere Klasse nutzt.

box_rechts

Mit der Klasse box_rechts kann eine umrandete Box mit einem Text erstellt werden, die rechts vom normalen Text positioniert wird.

Dieser Text ist rechts
vom normalen Textbereich.

Die Darstellung im HTML-Code:

<div class="box_rechts">
	<p>
	Dieser Text ist rechts<br />
	vom normalen Textbereich.
	</p>		
</div>

Variante klein_box_rechts

Eine Variante der rechten Box ist die Klasse klein_box_rechts. Diese ist lediglich 200px breit und eignet sich daher nur für kurze Texte, Links oder Thumbnails.


box_links

Mit der Klasse box_links wird eine Box links vom normalen Text positioniert. Wie bei der rechten Box ist auch diese flexibel in Ihrer Breite und der normale text umfließt die Box.

Dieser Text ist links
vom normalen Textbereich.

Die Darstellung im HTML-Code:

<div class="box_links">
	<p>
	Dieser Text ist links<br />
	vom normalen Textbereich.
	</p>		
</div>

Variante klein_box_links

Eine Variante der linken Box ist die Klasse klein_box_links. Diese ist lediglich 200px breit und eignet sich daher nur für kurze Texte, Links oder Thumbnails.


hinweis

Beispiel:

Achtung!

Ein ins Wasser gefallenes Elektrogerät auf keinen Fall berühren. Sofort den Netzstecker ziehen.

Es bestehen mehrere Möglichkeiten, Hinweise als solche im Text hervorzuheben. Genauso wie Illustrationen können Hinweisboxen entweder links oder rechts platziert werden. Der eigentliche Text würde dann um die Boxen herum fließen. Es soll aber genügend Text vorhanden sein, sonst führt es zu unschönen Darstellungen.

Die Darstellung im HTML-Code:

<div class="hinweis">
Ein ins Wasser gefallenes Elektrogerät auf keinen Fall berühren. 
Sofort den Netzstecker ziehen.</div>

hinweis_rechts

Dieses Beispiel zeigt eine rechts ausgerichtete Hinweisbox.

Achtung

Niemals irgendwelche Gegenstände in die Geräteöffnungen stecken oder fallen lassen.

Die Darstellung im HTML-Code:

<div class="hinweisrechts">
<h4>Achtung</h4>
<p>Niemals irgendwelche Gegenstände in die 
Geräteöffnungen stecken oder fallen lassen.</p>
</div>

hinweis_wichtig

In diesem Beispiel wird bei der Hinweisbox ein anders Sysmbolö verwendet um auf die Bedeutung hinzuweisen.

Achtung!

Elektrogeräte niemals in der Badewanne oder unter der Dusche benutzen

Die Darstellung im HTML-Code:

<div class="hinweis_wichtig">
<h4>Achtung!</h4>
<p>Elektrogeräte niemals in der 
Badewanne oder unter der Dusche benutzen</p>
</div>

baustelle

Der klassische Hinweis, daß man sich auf einer Baustelle befindet...

Achtung!

Die Webseite ist in Bearbeitung.

Die Darstellung im HTML-Code:

<div class="baustelle">
<h4>Achtung!</h4>
<p>Die Webseite ist in Bearbeitung.</p>
</div>