Throughout the “Manage Friends” area of my website, I have been using Forms with a 1px gray border around the Fieldset and also have had a Legend to good effect.
Here is an example of the “look-and-feel” I have established…
On my current page, I am showing a listing of “Declined Friend-Requests”. Unfortunately, there is no legitimate need for a Form, because it is a read-only list.
So if I remove the Form, then I lose the extra styling to which I’ve grown accustomed?!
You could just use position: relative to move the text over a normal div border. Give the text a background color matching the page background to obscure the border line underneath it.
You could just add position: relative to the text container (a <p> or <div>) and give it a top and left position to sit it where you want. The space where the text was be default would be preserved but remain empty.
All the same, you can use a fieldset and legend without other form bits. I’m not sure if any browsers cough over it, or screen readers, but it seems to work OK. And the validator doesn’t seem to be upset either, so maybe I’m misleading you.
This is exactly what classes are for. Add ad additional class in your CSS definitions then you could easily style that element in the same way as any other form element.
Also, semantically speaking no interaction (in other words no user interaction intended) it would seem like bad practice to use the elements simply because their styled appearance anyway. If you are presenting a list of declined request, for no other reason that to present the info… then it’s most likely just a UL anyway.
perhaps we were already agreeing and you missed my point.
because it is a read-only list.
So if I remove the Form, then I lose the extra styling to which I’ve grown accustomed?!
So code it as such, but create a CSS class that holds all the same styles applied to your equivalent form elements, apply said class to your list items. This was Ralphs original answer as well.
your concerned then remained with the LEGEND… again ralph and I were trying to address this. That yuu could emulate the look of a legend on whichever tag was most semantic, simply by using position:relative; (and/or margin) and z-index;
AGAIN something like
.legdn{ font-weight:bold; position:relative; z-index:100; margin-top:-.5em; background:#fff; display:inline:block; /* essentially style to mach whatever style you gave your legend PLUS positioning*/}
you’re concerned then remained with the LEGEND… again ralph and I were trying to address this. That yuu could emulate the look of a legend on whichever tag was most semantic, simply by using position:relative; (and/or margin) and z-index;
And I asked if I need to add position: relative to the containing DIV as well?
AGAIN something like
.legdn{ font-weight:bold; position:relative; z-index:100; margin-top:-.5em; background:#fff; display:inline:block; /* essentially style to mach whatever style you gave your legend PLUS positioning*/}
You don’t need to. If you put position:relative on an element, it allows you to move it from its natural position with top/bottom/left/right settings without upsetting anything else on the page.