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
Dieser Text ist rechts
vom normalen Textbereich.
Mit der Klasse box_rechts
kann eine umrandete Box mit einem Text erstellt werden, die rechts vom normalen Text positioniert wird.
Die Darstellung im HTML-Code:
<div class="box_rechts"> <p> Dieser Text ist rechts<br /> vom normalen Textbereich. </p> </div>
Variante klein_box_rechts
Dieser Text ist rechts
vom normalen Textbereich.
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
Dieser Text ist links
vom normalen Textbereich.
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.
Die Darstellung im HTML-Code:
<div class="box_links"> <p> Dieser Text ist links<br /> vom normalen Textbereich. </p> </div>
Variante klein_box_links
Dieser Text ist links
vom normalen Textbereich.
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.
Vollbox
Vollboxen erstrecken sich über den ganzen Inhaltsbereich. Sie eignen sich bspw. für große Bilder.
Beispiel: Große Illustration
Bild aus dem Bladecenter.
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>