✔ Fieldset ähnlicher Effekt - wie?

Status
Nicht offen für weitere Antworten.
H

Html

Erfahrenes Mitglied
Hallo, bin gerade dabei eine Homepage zu erstellen. Jetzt würde ich meine Inhaltstext gerne wie in einem Fieldset darstellen. D.h ein Rahmen um das ganze, wenn möglich mit abgerundeten ecken und die Überschrift soll dann wie bei einem Fieldset im Rahmen stehen.

z.B ------Überschrift--------

Ist das irgendwie möglich?

Hoffe es kann mir jemand weiterhelfen, Olli
 
Hier ein CSS-Modell, das ein fieldset-Element "simuliert":

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></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>

        <div class="box">
             <h1><span>Überschrift</span></h1>
             <p>dummy text dummy text dummy text</p>
        </div>

</body>
</html>
 
Hey super, sowas habe ich gesucht. Nur gibt es jetzt noch die möglichkeit die ecken abzurunden?

Olli
 
Da es mir ja doch keine Ruhe gelassen hat, ob es nun funktioniert, hab ich es mal überprüft, and it works :-)

Meine Testumgebung: Win2k, FF 1.5.0.4, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#xsnazzy {
position:relative;
margin:1em;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #000; border-right:1px solid #000;}
.xb1 {margin:0 5px; background:#000;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

div.xboxcontent {
display:block;
background:#fff;
border:0 solid #000;
border-width:0 1px;
}

div.xboxcontent h1 {
position:absolute;
top:-0.5em;
left:1em;
margin:0;
padding: 0;
font-size:1em;
font-weight:normal;
}

div.xboxcontent h1 span {
margin: 0;
padding:0 0.5em;
color:#000;
background:#fff;
font-size:1em;
}

div.xboxcontent p {
margin: 0;
padding:0.5em;
color:#000;
background:#fff;
}
-->
</style>

</head>
<body>

<div id="xsnazzy">
     <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
     <div class="xboxcontent">
          <h1><span>Snazzy Borders</span></h1>
          <p>dummy text dummy text dummy text</p>
     </div>
     <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück