I know a Fieldset uses a layout like that. But i don't think there is a single CSS statement for that.
Ikke
2008-09-22 07:38:27
+1
A:
+2
A:
Take a look at html element fieldset and styles such as these:
http://www.cssplay.co.uk/menu/form.html
Hope that helps.
AlexDuggleby
2008-09-22 07:38:38
+2
A:
As far as I know (correct me if I'm wrong!), there isn't.
I'd recommend you to use a div with a negative-margin-h1 inside. Depending on the semantic structure of your document, you could also use a fieldset (HTML) with one legend (HTML) inside which approximately looks like this by default.
Mudu
2008-09-22 07:41:01
Thanks, yes you are right! I was looking for fieldset/legend option. Thanks
Mozammel
2008-09-22 07:44:02
+16
A:
I believe you are looking for the fieldset HTML tag, which you can then style with CSS. E.g.,
<fieldset style="border: 1px black solid">
<legend style="border: 1px black solid;
margin-left: 1em; padding: 0.2em 0.8em ">title</legend>
Text within the box <br />
Etc
</fieldset>
Athena
2008-09-22 07:42:46
you should copy this exact html code in your answer (in addition of your html source code already there). This code will be interpreted and displayed in this post, and that would show it is works exactly as advertised. I am not yet able to edit your post to do just that...
VonC
2008-09-22 08:09:40
VonC, I tried doing that, but it stripped out all my HTML. Leaving just my text.
Athena
2008-09-22 08:31:17
It only allows basic literal HTML so its probably that the fieldset tag is not allowed or something like that
Garry Shutler
2008-09-22 09:17:00
+4
A:
from http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html
<form>
<fieldset>
<legend>Subscription info</legend>
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail">E-mail:</label>
<input type="text" name="mail" id="mail" />
<br />
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="40" />
</fieldset>
</form>
<style type="text/css">
fieldset { border:1px solid green }
legend {
padding: 0.2em 0.5em;
border:1px solid green;
color:green;
font-size:90%;
text-align:right;
}
</style>
AlexWilson
2008-09-22 07:44:14
+2
A:
This will give you what you want
<head>
<title></title>
<style type="text/css">
legend {border:solid 1px;}
</style>
</head>
<body>
<fieldset>
<legend>Test</legend>
<br /><br />
</fieldset>
</body>
naspinski
2008-09-22 07:44:22
+1
A:
For an excellent article on using fieldsets and legends check out Fancy Form Design Using CSS.
b3
2008-09-22 07:49:59
+3
A:
I can't believe no one's correcting your common mistake - the tag doesn't look like anything, it's just markup. You can make any combination of tags look like the picture you showed - a header and a paragraph, a term and definition... whatever.
matt lohkamp
2008-09-22 09:04:26
+2
A:
If you are not using it in forms, and instead want to use it in an non-editable form, you can do this via the following code -
<div class="title_box" id="bill_to">
<div id="title">Bill To</div>
<div id="content">
Stuff goes here.<br>
For example, a bill-to address
</div>
</div>
And in the CSS file
.title_box {
border: #3c5a86 1px dotted;
}
.title_box #title {
position: relative;
top : -0.5em;
margin-left: 1em;
display: inline;
background-color: white;
}
.title_box #content {
}
Jagath
2010-05-29 22:59:54