Need help styling "Manage Friend Requests" page

HTML & CSS
1

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…


- Username
- User Photo

…and then to the right all in one line…

__ 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…


<!-- 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>\
";

			}//End of LOOP THROUGH REQUESTS
		?>

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

Here are my styles…


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

(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

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.

3

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:


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

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

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.:slight_smile:

6

Thanks for the help, Paul!!! :tup:

Debbie