Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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>

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Works perfect - thanks so much


  •  

    Posting Permissions

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