Groupbox (Windows-like) erstellen mit CSS

[Christian Seiler]

Hallo,

<fieldset> und <legend> empfehle ich nicht, weil Du sie dadurch zweckentfremdest.

Nimm lieber diese Lösung:

div.groupbox {
  margin-top: 1em;
  border: 1px solid black;
  padding: 0 5px 5px 5px;
}

div.groupboxcaption {
  position: relative;
  top: -1.5ex;
  left: 0.25em;
  background-color: #fff;
  padding: 2px;
  font-weight: bold;
  text-align: center;
}

<div class="groupbox">
<div class="groupboxcaption" style="width: 5em;">Groupbox</div>
Text...
</div>

Die style="width: 5em;" musst Du nur noch der Breite des Textfeldes anpassen. Diese Lösung funktioniert auch prima, wenn Du die Schrift skalierst.

Die Lösung klappt bis auf den Rand (der wird nicht oder nur teilweise gezeichnet) auch im Netscape 4.

http://www.christian-seiler.de/temp/test-groupbox.html

Viele Grüße,
Christian