MULTIPLE LEGENDS IN ONE FIELDSET

[freelance84]

Does anybody know if it is possible to have multiple legends on the same fieldset?

 

Here's an example of what I trying to do:

<legend align="left">pre</legend>
<legend align="center"><u>Creating $sName</u></legend>
<legend align="right">next</legend>

 

With the above code I get the "pre" in the fieldset lines but the others inside.

 

I've attached a picture of what I am trying to achieve. I've had a search on the old goggle pages and this forum but nothing has really turned up.

 

Does anyone know if this is possible? And if so how?

 

Much thanks for any replies

 

[attachment deleted by admin]

[ignace]

What amazes me is that you ask this question while you could have just read the DTD@http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict or validate it using your IDE or W3 validator.

 

And what's a <legend>-tag? Nothing special just a tag with some default style applied to, you can use any tag you like (as many times you like, or one with the accesskey attribute if you want to maintain accessibility).

 

Or for semantics sake, you could write:

 

<fieldset>
  <legend class="legend left">..</legend>
  <div class="legend center">..</div>
  <div class="legend right">..</div>
  ..
</fieldset>

[haku]

I'm curious Ignace - how would you format a div tag the same way a legend tag is formatted? I've never been able to do it, but I'd definitely like to know how.

[ignace]

I am no expert in CSS and have actually no idea what the browser applied CSS-rules are for the <legend>-tag but I tried and worked:

 

<fieldset>
  <legend style="display: block; float: left; margin-top: -17px; background-color: #FFF; padding: 0 5px;">test</legend>
  <div style="display: block; float: right; margin-top: -17px; background-color: #FFF; padding: 0 5px;">test</div>
  test
</fieldset>

 

If you use a reset script (cf Eric Meyer) you'll notice the <legend>-tag is no longer where it used to be. It's quite possible the browser uses background-color: inherit for the <legend>-tag to animate no line under the tag itself from the <fieldset>.

[theverychap]

Or do something like:

<legend>
    Creating Yi
    <span style="float:right;"><a href="#next">Next</a></span>
    <span style="float:left;"><a href="#prev">Prev</a></span>
</legend>

 

Which is a lot neater