rahmen mit überschrift

[jayjay]

hallo, bin auf der suche nach dem style/code von sowas:

__überschrift____
|inhalt |
| |
_______________

hab das mal irgendwo gesehen, wie heisst so ein kasten?

[webcreate]

Fieldset
http://de.selfhtml.org/html/formular...eren.htm#label

Zitat von jayjay

hab das mal irgendwo gesehen, wie heisst so ein kasten?

fieldset heisst der.

<fieldset>
<legend>überschrift</legend>
<p>inhalt</p>
</fieldset>

//laaaaaaaaaaaaaaaaaaangsam

[jayjay]

jo, super, danke ;-)

[rewboss]

<fieldset> ist, soweit ich weiß, nur innerhalb eines Formulars valide. Außerdem sieht's nicht in allen Browsern gleich aus (im FF besonders unschön, wenn eine Hintergrundfarbe definiert ist).

Eine andere Möglichkeit wäre das hier:

<div class="boxmitueberschrift">
<div>Überschrift</div>
Inhalt
</div>

Das ganze dann mit CSS gestylt, so ungefähr:

.boxmitueberschrift {
 position: relative;
 border: 1px solid blue;
}

.boxmitueberschrift div {
 position: absolute;
 top: -.5em;
 background: #ffffff;
}

Das ist aber nur ein Anfang. Bestimmt sieht's nicht sonderlich gut aus, aber wenn du mit den Werten ein bisschen experimentierst, findest du bestimmt die richtigen.

Zitat von rewboss

<fieldset> ist, soweit ich weiß, nur innerhalb eines Formulars valide.

mit transitional - doctype kann man´s überall verwenden und die seite validiert.
bei einem strict - doctype stimmt das wohl.

ist zwar nicht für den einsatz ohne formular gemacht, praktisch isses dennoch.
mit ´nem feuerzeug kriegt man ja schließlich auch ´n bier auf, nech?!

[rewboss]

Naja, mit <h1> kriegt man auch großen fetten Text, aber ob das praktisch ist...?

ich seh hier überall erbsen rumliegen.
viel spass

[321]

Bei Legend ist es nützlich, ein &nbsp; hinten anzufügen:

<fieldset>
<legend>Meine Überschrift&nbsp;
</legend>
<p>inhalt
<br>12
<br>
34</p>
</fieldset>

weil sonst der Rahmen die Schrift berührt.
Vorne ist das nicht der Fall.
getestet in IE + FF

Im weiteren können Fieldsets auch geschachtelt werden:

<fieldset>
<legend>Meine Haupt-Überschrift&nbsp; 
</legend>
<p>Hauptinhalt
<br>12
<fieldset style="margin-left:30px" 
><legend>Meine Unter-Überschrift&nbsp;
</legend>
<p>Unterinhalt
<br>12
<br>34
</p>
</fieldset>
h34
</p>
</fieldset>

getestet in IE + FF