SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Fieldset & Legend w/o Form??

    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...
    Attachment 59978


    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just use the same styles on whatever elements you use to style the results.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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>

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's not working quite right.

    Here is my markup...
    HTML Code:
    	<!-- 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...
    Code CSS:
    #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...
    Attachment 59979


    2.) What I have...
    Attachment 59980


    3.) What I have with FireBug...
    Attachment 59981


    Close, but not quite there...


    Debbie

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

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    As mentioned, use top rather than margin-top.

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    As mentioned, use top rather than margin-top.

    Code:
    #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


Bookmarks

Posting Permissions

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