✔ Rechteck erzeugen mit beschrifteten Rahmen

Status
Nicht offen für weitere Antworten.
mitch_byu_kennen

mitch_byu_kennen

Erfahrenes Mitglied
Hi,

also ich will ein Rechteck erzeugen was einige Felder einschließt die zusammen gehören und dieses Rechteck soll eine Beschreibung haben.
So das der Rahmen kurz unterbrochen wird und dazwischen die Überschrift steht.
Bloß wie erzeugt man so ein Rechteck?

mfg mitch
 
Hier ein Beispiel, wenn Du kein Fieldset (Gruppierung von Formularfeldern) auszeichnest:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type"
            content="application/xhtml+xml; charset=UTF-8" />
        <title>Test: Box mit Header</title>
    <style type="text/css">
        div.box {
            position:relative;
            margin:1em;
            width:400px;
            padding:0.5em 0 0 0;
            border:1px #000 solid;
            color:#000;
            background:#fff;
            font-family:Arial, sans-serif;
        }
        div.box h1 {
            position:absolute;
            top:-0.5em;
            left:1em;
            margin:0;
            padding: 0;
            font-size:1em;
            font-weight:normal;
        }
        div.box h1 span {
            margin: 0;
            padding:0 0.5em;
            color:#000;
            background:#fff;
            font-size:1em;
        }
        div.box p {
            margin: 0;
            padding:0.5em;
            color:#000;
            background:#fff;
        }
    </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit. Curabitur volutpat dolor vitae elit. Nullam
            justo ipsum, laoreet sit amet, ultrices iaculis,
            porta et, neque. Nam at nulla non nunc porttitor
            sodales. Etiam nec est eu risus congue facilisis.
            Aliquam sodales velit sit amet felis. Cras ipsum.
            Phasellus tristique leo non.</p>
        <div class="box">
            <h1><span>&Uuml;berschrift</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
                elit. Curabitur volutpat dolor vitae elit. Nullam
                justo ipsum, laoreet sit amet, ultrices iaculis,
                porta et, neque. Nam at nulla non nunc porttitor
                sodales. Etiam nec est eu risus congue facilisis.
                Aliquam sodales velit sit amet felis. Cras ipsum.
                Phasellus tristique leo non.</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit. Curabitur volutpat dolor vitae elit. Nullam
            justo ipsum, laoreet sit amet, ultrices iaculis,
            porta et, neque. Nam at nulla non nunc porttitor
            sodales. Etiam nec est eu risus congue facilisis.
            Aliquam sodales velit sit amet felis. Cras ipsum.
            Phasellus tristique leo non.</p>
    </body>
</html>
getestet mit IE 6.0, FF 1.0, OP 8.01, NS 7.1, NS 8.0
funktioniert nicht mit NS 4.7

Gruß hpvw
 
Hallo,

Danke nero und hpvw für eure Hilfe, jetzt Funktioniert es bei mir!
Obwohl ich bei dem Beispiel noch nicht so ganz durch steige von dir hpvw aber ich werde mal ein bisschen rum probieren und mich belesen.

Weis denn auch zufällig jemand von euch wie ich mit css so einen Vertikalen Strich erzeugen kann, der am rechten Rand als Deko ca. 2cm vom Rand von oben nach unten durchläuft ohne auf den Text einzuwirken der links auf der Seite steht?

mfg mitch

Wir haben gelernt, wie Vögel zu fliegen, wie Fische zu schwimmen. Doch wir haben die einfache Kunst verlernt, wie Brüder zu leben. [Martin Luther King]
Zum Vergrößern anklicken....
 
Also ich denk, dass das von nero_85 verlinkte <fieldset> die bessere, und einfachere Loesung ist.
Ich hab mich auch vor kurzem mal damit angefreundet und finde es ganz gut.
Man kann es sogar problemlos verschachteln, welches ich gerade in einem Script fuer diverse Foren-Einstellungen nutze.
 
Hi,

einen vertikalen Strich bekommst Du, wenn Du z.B. den Inhalt in einen div-container packst, und diesen per css so formatierst, daß er z.B. nur einen border-left hat, ansonsten unsichtbar ist.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück