Groupbox (Windows-like) erstellen mit CSS

[Stephan]

Hallo Forum, ich möchte eine Groupbox (wie in Windows-Anwendungen)
mit CSS umsetzen.
Dazu verwende ich ein div-Element:

<div class="group">
Content...
</div>

mit folgenden CSS-Eigenschaften:

.group
{
 border-style:    groove;
 border-width:    2px;
 margin-top:   10px;
 margin-left:   10px;
 margin-bottom:   10px;
 margin-right:   10px;
}

Den Rahmen bekomme ich damit hin. Wie aber definiere ich einen
Rahmentext in dieser Box, dass es folgendermaßen aussieht?

--- Rahmentext ---------------------------------
|                                               |
|     C O N T E N T                             |
|                                               |
|                                               |
------------------------------------------------

Es sollte mindestens im InternetExplorer laufen. Vielleicht gibts
aber auch ne Lösung für NN7 bzw. W3C. Habe leider nichts passendes
gefunden. Vielleicht könnt Ihr mir weiterhelfen.

besten Dank
Stephan

[norbert =:-)]

Hallo Stefan!

Schau mal unter

http://selfhtml.teamone.de/html/formulare/strukturieren.htm#gruppieren

... kannst Du auch mit CSS formatieren.

mfg

norbert =:-)

[Thomas Meinike]

Hallo,

Den Rahmen bekomme ich damit hin. Wie aber definiere ich einen
Rahmentext in dieser Box, dass es folgendermaßen aussieht?

--- Rahmentext ---------------------------------
|                                               |
|     C O N T E N T                             |
|                                               |

Versuche es mal mit den Elementen fieldset und legend: http://www.styleassistant.de/tips/beispiel50.htm.

MfG, Thomas

[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