469,327 Members | 1,265 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,327 developers. It's quick & easy.

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

goatboy
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
  1. <form><fieldset>
  2. <legend>December 15, 2009</legend>
  3.  
  4. <p>This is an update.  Lorem ipsum, etc. etc. and so on.</p>
  5.  
  6. --goatboy
  7.  
  8. </fieldset></form>
  9.  
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

✓ 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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. div{border:1px solid;padding:10px}
  7. span{display:inline:block;position:relative;top:-20px;background-color:#fff;}
  8. </style>
  9. <body>
  10.  
  11.         <div><span>Some stuff.</span>More stuff</div>
  12.  
  13. </body>
  14. </html>
  15.  
  16.  

6 18535
Dormilich
8,651 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>.

Id 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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. div{border:1px solid;padding:10px}
  7. span{display:inline:block;position:relative;top:-20px;background-color:#fff;}
  8. </style>
  9. <body>
  10.  
  11.         <div><span>Some stuff.</span>More stuff</div>
  12.  
  13. </body>
  14. </html>
  15.  
  16.  
Dec 16 '09 #3
Dormilich
8,651 Expert Mod 8TB
Expand|Select|Wrap|Line Numbers
  1. display:inline:block;
do you mean
Expand|Select|Wrap|Line Numbers
  1. display:inline-block;
?
Dec 16 '09 #4
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,651 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

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

14 posts views Thread by Ian Rastall | last post: by
9 posts views Thread by Warren Post | last post: by
nathj
5 posts views Thread by nathj | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by listenups61195 | last post: by
reply views Thread by haryvincent176 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.