Rick Flower wrote:
I gather it's somewhat naughty to use fieldset/legend without them
being inside a pair of form tags (even though it seems to work and
validates). Anyway, what is the general wisdom for recreating a
similar layout in pure css without needing the requisite
form/field/legend tags?
My suggestion would be to simply make the legend a relatively positioned
element (suggest a heading or just a div with display:inline),then give
it a higher z-index to position it above the surrounding block element
with a border effect. It might take a little practice to get it right,
but you should be able to get it without much difficulty. I've done
similar effects before, with headings inside the bordered element
"sitting on top" of the border when displayed. The code below leaves an
"indent" where the pseudo-legend used to be, but I'm sure somebody
smarter than I could get rid of it (tried with a pseudo-legend:after
stylesheet, but failed, so it got hardcoded below). That, and the
pseudo-legend needs a background color to keep the border from coming
through. With a solid background color, I think this would work well.
Sorry the inline CSS is a disaster.
<fieldset><legend>Name</legend>
Lorem ipsum I wish I had a cat.</fieldset>
<br/>
<div style="border:1px solid #000;padding: 0 10px 10px
10px;margin-top:10px;">
<h3 name="pseudo-legend"
style="display:inline;padding:5px;font-weight:normal;height:20px;position:relative;z-index:101;top:-12px;background-color:#fff;">Name</h3><br/>
Lorem ipsum I wish I had a cat.</div>
-- Derek
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
