...

View Full Version : HTML and CSS Problem



Ryan55
09-06-2011, 07:37 PM
Hey,

I am currently working on a site and having a problem (see below photo)

http://img838.imageshack.us/img838/5586/38840642.png

What I want is to have for lots of profile photo and name on one line and when there are four on one line it moves the fifth to the next line.

Here is my current code -


echo "<font size='4'><u>".$assoc3['name']."</u></font><br /><br />";

while($assoc4 = $db->assoc($query4))
{

$date = date("d-m-Y", strtotime($assoc4['date']));

$query5 = $db->query("SELECT firstname, lastname, avatar_location FROM users WHERE id='$assoc4[uid]'");

$assoc5 = $db->assoc($query5);

echo "<div id='userblock'><span style='float:left'><img src='".$assoc5['avatar_location']."' width='50' height='50' /></span><span style='float:left;padding-left:5px;padding-right:15px;'><a href='profile.php?id=".$assoc4['uid']."'><b>".$assoc5['firstname']." ".$assoc5['lastname']."</b></a><br />Added On ".$date."</span></div>";

}



and the CSS -


#userblock{width:25%;}

Thanks

vikram1vicky
09-07-2011, 08:45 AM
Check following sample working


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#imagethumbs {
width:760px;
margin:0 auto;
border:1px solid #ddd;
overflow:auto;
padding:3px 0 0 3px;
height:1%;
}
.imageblock {
width: 185px;
float:left;
overflow:auto;
margin:0 3px 3px 0;
border:1px solid #ddd;
}
img {
float:left;
vertical-align:middle;
border:none 0;
}
.text {
width: 130px;
float:right;
}
.text div {
color:#000;
font:12px Arial, Helvetica, sans-serif;
padding:3px;
}
.bold {
font-weight:bold;
}
</style>
</head>

<body>
<div id="imagethumbs">
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
<div class="imageblock">
<img src="sample.png" width="50" height="50" alt="image" />
<div class="text">
<div class="bold">Ryan Robers</div>
<div>Added on 05-09-2011</div>
</div>
</div>
</div>
</body>
</html>

Ryan55
09-20-2011, 10:48 PM
Works perfect - thanks so much



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum