Using <fieldset><legend> in a <div>

So I am hosting a site from my home server, and I would like the main page to be an area for updates about the site. I am providing these updates in a blog-style format, using this code:

Expand|Select|Wrap|Line Numbers

 
<form><fieldset>

<legend>December 15, 2009</legend>
 
<p>This is an update.  Lorem ipsum, etc. etc. and so on.</p>
 
--goatboy
 
</fieldset></form>

Now, while this layout looks exactly like what I want, it does not make sense to format it within a set of <form> tags. Is there a way to achieve the same style - a line around the content with the legend text interrupting the line - without using the <form> tag? Ideally, I'd like to just use <div> and <legend>, but something tells me that is not possible.

I'm entirely open to CSS, but I'd prefer staying away from images, javascript, and PHP. It's not that I don't like them or understand them, I just think it's easier to stick with what I have.

ADD: I have searched this forum and Google, but I'm not entirely sure what it's called, so my searches haven't turned up anything relevant.

Thanks in advance,
goatboy

Dec 16 '09 #1

Follow Post Reply

✓ answered by drhowarddrfine

Here's one example of what you can do with a div. Replacing the div with a p has the same effect:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

div{border:1px solid;padding:10px}

span{display:inline:block;position:relative;top:-20px;background-color:#fff;}

</style>

<body>
 
        <div><span>Some stuff.</span>More stuff</div>
 
</body>

</html>

19052

Dormilich

8,658

Expert Mod 8TB

Ideally, I'd like to just use <div> and <legend>, but something tells me that is not possible.

that one is called DTD. <legend> must only be used as child element of <fieldset>, which itself is only allowed inside <form>.

I’d propose a div with a border and a label bearing the text. use position: relative and a negative top value to shift the text onto the border.

Dec 16 '09 #2

drhowarddrfine

7,435

Expert 4TB

Here's one example of what you can do with a div. Replacing the div with a p has the same effect:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

div{border:1px solid;padding:10px}

span{display:inline:block;position:relative;top:-20px;background-color:#fff;}

</style>

<body>
 
        <div><span>Some stuff.</span>More stuff</div>
 
</body>

</html>

Dec 16 '09 #3

Dormilich

8,658

Expert Mod 8TB

Expand|Select|Wrap|Line Numbers

display:inline:block;

do you mean

Expand|Select|Wrap|Line Numbers

display:inline-block;

Dec 16 '09 #4

goatboy

I'm sure that's what he meant, but changing it made no difference (at least in Firefox). Either way, that's exactly what I was looking for! Thank you!

Dec 16 '09 #5

Dormilich

8,658

Expert Mod 8TB

I think it doesn’t matter, if the display is inline or inline-block.

Dec 16 '09 #6

drhowarddrfine

7,435

Expert 4TB

Yeah, the inline-block thing wasn't necessary.

Dec 16 '09 #7

Using <fieldset><legend> in a <div>

✓ answered by drhowarddrfine

Post your reply

Similar topics