Fieldset & Legend w/o Form??

[DoubleDee]

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...
FieldSet+Legend.png


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?!

Any suggestions on how to fix this issue?

Thanks,


Debbie

[ralph.m]

Just use the same styles on whatever elements you use to style the results.

[DoubleDee]

Just use the same styles on whatever elements you use to style the results.

And what about the Legend that is in the upper left-hand corner and breaks the border around the Fieldset?? (Did you look at my screen-shot??)

I don't see an easy way to do that, thus why I am posting here!


Debbie

[ralph.m]

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.

[DoubleDee]

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.

Does that mean I have to user Position: Relative on the DIV and the TEXT?

What impact will that have on the rest of my page?

If you could post some sample code that would help. (I've never been very good with positioning things...)

Is there another way to do this? (I guess keeping a Form in there when I'm not using the Form is bad, right?)

Thanks,


Debbie

[ralph.m]

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.

[dresden_phoenix]

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.

eg.:
legend, .lgnd {background: pink; color:black;}
div.lgnd{ any additional styles needed;}


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.

[DoubleDee]

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.

eg.:
legend, .lgnd {background: pink; color:black;}
div.lgnd{ any additional styles needed;}


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.

All nice points, but they don't answer my Original Questions, and they don't address what Ralph was debating about either...


Debbie

[dresden_phoenix]

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*/}

<div class="rejected"><h3 class="legdn">Who declined...</h3>...</div>

[DoubleDee]

perhaps we were already agreeing and you missed my point.

Or you missed MY point!

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*/}

<div class="rejected"><h3 class="legdn">Who declined...</h3>...</div>

I'm playing with it now...


Debbie

[ralph.m]

And I asked if I need to add position: relative to the containing DIV as well?

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.

[DoubleDee]

It's not working quite right.

Here is my markup...

	<!-- DECLINED FRIEND-REQUESTS -->
	<div id="declinedRequestsWrapper">
		<div>
			<h2>Who Declined My Friend-Requests</h2>
			<ul>
				<?php
					// ************************
					// Loop through Declines.	*
					// ************************
				?>
			</ul>
		</div>
	</div>

Here are my Styles...

#declinedRequestsWrapper{
	width: 640px;
	margin: 30px auto;
	border: 1px solid #AAA;
}
 
#declinedRequestsWrapper div{
	padding: 0em 2em 2em 2em;
}
 
#declinedRequestsWrapper div h2{
	position: relative;
	z-index: 100;
	display: inline-block;
	margin: -5em 0 0 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
	background: #fff;
}

And here are some screen-shots of...

1.) What I want...
DesiredLegend.png


2.) What I have...
TestLegend_1.png


3.) What I have with FireBug...
TestLegend_2.png


Close, but not quite there...


Debbie

P.S. I don't think that position: relative; thingy is working...

[ralph.m]

As mentioned, use top rather than margin-top.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
#declinedRequestsWrapper{
	width: 640px;
	margin: 30px auto;
	border: 1px solid #AAA;
	padding: 0em 2em 2em 2em;
}
 
#declinedRequestsWrapper h2{
	position: relative;
	top: -10px;
	padding: 0 5px;
	margin: 0;
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	background: #fff;
}

#declinedRequestsWrapper ul {
	margin: 0; padding: 10px 0 0 20px;
}
</style>
	
</head>
<body>

<div id="declinedRequestsWrapper">
			<h2>Who Declined My Friend-Requests</h2>
			<ul>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
			</ul>
	</div>
</body>
</html>

[DoubleDee]

As mentioned, use top rather than margin-top.

#declinedRequestsWrapper h2{
	position: relative;
	top: -10px;
	padding: 0 5px;
	margin: 0;
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	background: #fff;
}

Oops! I missed that one, and forgot there was a difference between top: -10px and margin-top: -10px!

Thanks for the help, Ralph and Dresden!


Debbie