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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • goatboy
    New Member
    • Sep 2009
    • 7
    #1

    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:

    Code:
    <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
    Last edited by goatboy; Dec 16 '09, 02:49 AM. Reason: Clarifying my prior research
    Tags: div, div legend, fieldset, fieldset div, legend
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      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.

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Here's one example of what you can do with a div. Replacing the div with a p has the same effect:
          Code:
          <!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>

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              Code:
              display:inline:block;
              do you mean
              Code:
              display:inline-block;
              ?

                Comment

                • goatboy
                  New Member
                  • Sep 2009
                  • 7
                  #5
                  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!

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      I think it doesn’t matter, if the display is inline or inline-block.

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          Yeah, the inline-block thing wasn't necessary.

                            Comment

                            Previous template Next
                            Working...