Web Analytics Made Easy - StatCounter HTML and CSS Problem - CodingForum

Announcement

Collapse
No announcement yet.

HTML and CSS Problem

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    HTML and CSS Problem

    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 -

    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 -

    Code:
    #userblock{width:25%;}
    Thanks
    Tags: None
  • #2
    Check following sample working

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

    Comment

    • #3
      Works perfect - thanks so much

      Comment

      Previous template Next
      Working...
      X
      😀
      🥰
      🤢
      😎
      😡
      👍
      👎