SitePoint Sponsor

User Tag List

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

    Need help styling "Manage Friend Requests" page

    I have a page in each User's Account that shows all Friend-Requests for that User. (Think "Inbox".)

    On this page they can see who wants to be their friend, check out the User's Profile if need be, and then decide whether or not to accept.

    Each Request should be on its own row, and has...
    Code:
    - Username
    - User Photo
    ...and then to the right all in one line...
    Code:
    __ Decide Later		__ Accept		__ Decline
    I suppose doing alternate shading of each "row" (i.e. <li>) would be a nice extra touch.


    Current Problems:

    1.) I need some better way to align the Radio Buttons and Username/Photo because they vary in size and look messy now.

    2.) I'm not sure if I should wrap the Radio Buttons in a <field> or leave them out in the open?

    3.) I tried creating the illusion of a "row" by applying styles to my <li> but that never worked out.


    Here is the HTML I have so far...
    PHP Code:
    <!-- FRIEND-REQUESTS -->
    <form id="manageRequests" action="" method="post">
        <fieldset>
            <legend>Manage Friend-Requests</legend>
            <ul>
            <?php
                
    // Loop through Requests.
                
    while (mysqli_stmt_fetch($stmt1)){
                    echo 
    "<li>
                            <a href=''>
                                
    $username<br />
                                <img src='/uploads/" 
    $photoName "' width='80' alt='Thumbnail of ' . $username />
                            </a>
                            <fieldset id='friendRequestDecision'>
                                <input id='" 
    $requestorID "_1' name='friendRequestDecision[" $requestorID "]' type='radio' value='0' />
                                <label for='" 
    $requestorID "_1'>Decide Later</label>

                                <input id='" 
    $requestorID "_2' name='friendRequestDecision[" $requestorID "]' type='radio' value='1' />
                                <label for='" 
    $requestorID "_2'>Accept</label>

                                <input id='" 
    $requestorID "_3' name='friendRequestDecision[" $requestorID "]' type='radio' value='2' />
                                <label for='" 
    $requestorID "_3'>Decline</label>
                            </fieldset>
                        </li>\n"
    ;

                }
    //End of LOOP THROUGH REQUESTS
            
    ?>

            </ul>
        </fieldset>
    </form>

    Here are my styles...
    Code CSS:
    /****************************/
    /* MANAGE REQUESTS Styles		*/
    /****************************/
    #manageRequests fieldset{
    	padding: 2em 2em 2em 3em;
    }
     
    #manageRequests ul{
    }
     
    #manageRequests ul li{
    	clear: both;
    	background-color: #EEE;
    }
     
    #manageRequests ul li a{
    	float: left;
    	font-size: 1em;
    	font-weight: bold;
    	text-decoration: none;
    }
     
    #manageRequests #friendRequestDecision{
    	float: left;
    }
     
    #manageRequests #friendRequestDecision label{
    	display: inline;
    	padding: 0 1em 0 0;
    	font-weight: normal;
    }


    And here is a screen-shot of what I have so far...
    Attachment 59836

    (I suppose it doesn't look too bad, but it obviously needs some cleaning up!!)

    Hopefully I am not too far off on what I have so far.

    Any advice on how to "tighten up" my markup or styles would be appreciated!!

    Thanks,



    Debbie

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    In my mind that would be tabular data and you could happily put it in table rows with a table header.
    There is no need to complicate things trying to line up and shoehorn fields in.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If you want a relationship between the radio and the username/photo then you could use display:inline-block on the photo container and then inline-block on the fieldset which will allow vertical-align to work.

    Very roughly like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body, fieldset {
    	margin:0;
    	padding:0
    }
    #manageRequests img {
    	display:block;
    	background:red;/* for testing */
    	margin:0 20px 0 0;
    }
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    legend span {
    	position:absolute;
    	left:-999em;
    	top:-999em;
    }
    #manageRequests fieldset { margin:10px; }
    #manageRequests a, #friendRequestDecision {
    	display:inline-block;
     *display:inline;/* ie7/6 */
    	zoom:1.0;/* ie7/6 */
    	vertical-align:bottom;
    }
    #manageRequests li { padding:10px; }
    #manageRequests li:nth-of-type(even) { background:#eee }/* modern browsers only */
    #manageRequests fieldset fieldset {
    	border:none;
    	margin:0 0 5px
    }
    #manageRequests label { padding-right:50px }
    </style>
    </head>
    
    <body>
    <form id="manageRequests" action="" method="post">
    		<fieldset>
    				<legend>Manage Friend-Requests</legend>
    				<ul>
    						<li> <a href=''> username<br />
    								<img src='/uploads/" . $photoName . "' width='80' height="60" alt='Thumbnail of ' . $username /> </a>
    								<fieldset id='friendRequestDecision'>
    										<legend><span>friendRequestDecision</span></legend>
    										<input id='" . $requestorID . "_1' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='0' />
    										<label for='" . $requestorID . "_1'>Decide Later</label>
    										<input id='" . $requestorID . "_2' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='1' />
    										<label for='" . $requestorID . "_2'>Accept</label>
    										<input id='" . $requestorID . "_3' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='2' />
    										<label for='" . $requestorID . "_3'>Decline</label>
    								</fieldset>
    						</li>
    						<li> <a href=''> username<br />
    								<img src='/uploads/" . $photoName . "' width='80' height="100" alt='Thumbnail of ' . $username /> </a>
    								<fieldset id='friendRequestDecision'>
    										<legend><span>friendRequestDecision</span></legend>
    										<input id='" . $requestorID . "_1' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='0' />
    										<label for='" . $requestorID . "_1'>Decide Later</label>
    										<input id='" . $requestorID . "_2' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='1' />
    										<label for='" . $requestorID . "_2'>Accept</label>
    										<input id='" . $requestorID . "_3' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='2' />
    										<label for='" . $requestorID . "_3'>Decline</label>
    								</fieldset>
    						</li>
    						<li> <a href=''> username<br />
    								<img src='/uploads/" . $photoName . "' width='80' height="120" alt='Thumbnail of ' . $username /> </a>
    								<fieldset id='friendRequestDecision'>
    										<legend><span>friendRequestDecision</span></legend>
    										<input id='" . $requestorID . "_1' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='0' />
    										<label for='" . $requestorID . "_1'>Decide Later</label>
    										<input id='" . $requestorID . "_2' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='1' />
    										<label for='" . $requestorID . "_2'>Accept</label>
    										<input id='" . $requestorID . "_3' name='friendRequestDecision[" . $requestorID . "]' type='radio' value='2' />
    										<label for='" . $requestorID . "_3'>Decline</label>
    								</fieldset>
    						</li>
    				</ul>
    		</fieldset>
    </form>
    </body>
    </html>
    You'll need to change the ids of course as I just quickly copied and pasted the same code so the above code is invalid.

    The fieldsets and radios are set to vertical-align:bottom but you can change that to middle or top if needed.

    It's a little difficult to give specific advice as there are many ways to style depending on what comes next or what you want it to look like.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    What do you think about spikeZ's comments about using an HTML Table instead?

    I think he brings up an often forgotten point...


    Debbie

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Yes, I have seen arguments that forms can be tabular data. I just prefer not to use them especially as we can mimic most of that behaviour with display:table now (ie8+).

    It's a choice you will have to make as you will get arguments from both sides.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, Paul!!!!


    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
  •