Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    CSS Fieldset replacement

    Is there an easy way to replace the fieldset+legend effect easily in css?
    http://www.hazelryan.co.uk/Site2/index.php?page=scripts

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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:
    Code:
    <!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...

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Or maybe a slight alternative.
    Code:
    <!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.

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    both very good suggestions and not nearly as gnarly as I feared Thanks!

  • #7
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, what's the difference in semantics if you're mimicking the meaning (or 'look and feel'), essentially by reproducing the control?
    Thanks in advance!

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #9
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".
    Last edited by enumerator; 05-22-2005 at 07:45 AM. Reason: key
    Thanks in advance!

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    lol well if you notice, the Smilies on this forum are in a fieldset, as well as the Post Icons, among other items.
    Last edited by _Aerospace_Eng_; 05-22-2005 at 08:23 AM.

  • #11
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's consistent with my expectations: selecting smilies is a form-al type o' thing...
    Thanks in advance!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •