Homepage-Tipps & -tricks für Webmaster mit HTML & CSS

Info-Box Deluxe mit "legend" & "fieldset" hervorheben!

Mit den Html-Tags "legend" & "fieldset" können besonders wichtige Infos viel interessanter, bedeutend auffälliger und dazu noch viel schöner gestaltet bzw. dargestellt werden, als mit einer üblichen Box! Wie das umzusetzen ist, entnehmen Sie dem nachfolgenden Beispiel:

Anweisung im Html-Dokument:

<html>
<head>
<title>Info-Box Deluxe</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<fieldset>
<legend>Info-Titel</legend>
Hier wird der Informationstext eingefügt, der besonders
interessant hervorgehoben werden soll. Anstatt dem Text
kann genauso auch eine Grafik eingesetzt werden ...
</fieldset>
</body>
</html>

Anweisungen in der CSS-Datei "style.css":

legend
{
font-family: Courier;
color: #ff3366;
font-size: 14px;
font-weight: bold
}
fieldset
{
font-family: 'Courier New';
color: #009933;
font-size: 12px;
border: 4px double #ff3366;
padding: 5px
}

Beispiel ansehen

Die Informationsbox kann ganz individuell je nach Geschmack über die CSS-Datei angepasst werden! Beispielsweise könnte der Rahmen (border) anstatt doppelt (double) auch einfach (solid), gepunktet (dotted) oder gestrichelt (dashed) gestaltet werden; eine andere Rahmenfarbe oder -stärke wäre ebenso möglich. Die Möglichkeiten sind unbegrenzt, um diese Box zu stylen - lassen Sie einfach Ihrer Phantasie freien Lauf!

[ veröffentlicht am 14.03.2008 ] __________________________

Das könnte Sie vielleicht auch interessieren:
[ Mouseover-Info-Box mit CSS kreieren, formatieren und gestalten ]
[ Scrollbare Div-Box anstatt Iframe ]

zurück | weiter

Diese Seite wurde zuletzt am 03.09.2010 10:43 aktualisiert.

Anzeigen

Marktplatz

WebPack® 3.0: Mit über 20 Web-Applikationen wie Wordpress, phpBB Forum und MediaWiki. Ab EUR 1,49/Monat*!
[ mehr Infos ]

Mit klarmobil.de ab 9 Cent/Min. in alle Netze ohne Grundgebühr keine Vertragsbindung incl. 10 EUR Startguthaben für nur 4,95 EUR - [ jetzt wechseln und sparen! ]