...

View Full Version : CSS Fieldset replacement



NancyJ
05-21-2005, 08:58 PM
Is there an easy way to replace the fieldset+legend effect easily in css?
http://www.hazelryan.co.uk/Site2/index.php?page=scripts

_Aerospace_Eng_
05-21-2005, 09:33 PM
Why would you want to? Its perfectly valid to use a fieldset+legend, why do more work when you don't have to? You can style a fieldset with css if that is what you are wondering. I guess if you really wanted to, float some divs with the borders turned on on one side only.

NancyJ
05-21-2005, 09:46 PM
Its not semantically correct to us a fieldset for purposes other than a set of fields... which a list of links isnt IMO.
Obviously I dont want to do more work than I have to but I also dont want to use semantically incorrect markup - why go to the bother of using css instead of tables only to incorrectly use other markup? That would make no sense

rmedek
05-21-2005, 10:20 PM
The simplest way would be to give the header a background image and scoot it up to cover the border surrounding the section it's in:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>fieldset look</title>
<style type="text/css">

body {
font: .8em verdana, sans-serif;
color: #333;
}

div {
border: solid 1px #999;
margin: 2em;
padding: 1em;
}

h2 {
background: #fff;
width: 8em;
margin-top: -1.4em;
padding: 0 .5em;
}
</style>
</head>
<body>

<h1>Fieldset look, no fieldset</h1>
<div>
<h2>Unordered list</h2>
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
</ul>
</div>
<div>
<h2>Ordered list</h2>
<ol>
<li>first this</li>
<li>then this</li>
<li>and finally, this</li>
</ol>
</div>
</body>
</html>


Hope this helps...

_Aerospace_Eng_
05-21-2005, 10:26 PM
Or maybe a slight alternative.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
.fieldset {
width:305px;
margin:auto;
}
.topleft {
width:30px;
font-size:0px;
height:18px;
float:left;
border-bottom:1px solid #000000;
}
.thelegend {
width:75px;
float:left;
text-align:center;
position:relative;
top:8px;
}
.topright {
width:200px;
float:left;
font-size:0px;
height:18px;
border-bottom:1px solid #000000;
}
.texthold {
width:283px;
border:1px solid #000000;
border-top:0;
padding:10px;
clear:left;
text-align:justify;
}
/*//]]>*/
</style>
</head>

<body>
<div class="fieldset">
<div class="topleft"></div>
<div class="thelegend">This is text</div>
<div class="topright"></div>
<div class="texthold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
</body>
</html>

Looks pretty close to a fieldset, at least I think it does.

NancyJ
05-21-2005, 11:04 PM
both very good suggestions and not nearly as gnarly as I feared :) Thanks!

enumerator
05-22-2005, 08:34 AM
Hmm, what's the difference in semantics if you're mimicking the meaning (or 'look and feel'), essentially by reproducing the control?

rmedek
05-22-2005, 08:39 AM
Well, a fieldset is designed to group form controls and inputs, and a legend labels those groups. I think the only difference is grouping a form versus grouping any old set of elements.

enumerator
05-22-2005, 08:43 AM
Right, it looks to be a name game in this case, because the user is going to say "hey look, a fieldset... this must be a form". :D

_Aerospace_Eng_
05-22-2005, 09:17 AM
lol well if you notice, the Smilies on this forum are in a fieldset, as well as the Post Icons, among other items.

enumerator
05-22-2005, 09:44 AM
That's consistent with my expectations: selecting smilies is a form-al type o' thing... ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum