Mittwoch, 24. Juli 2019

07:09

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: bold 14px Courier;
color: #ff3366;
}
fieldset
{
font: normal 12px 'Courier New';
color: #009933;
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 ]





© 2007 - 2019 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:13 aktualisiert.