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 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    css div - help with pictures jumping everywhere!

    Hello everyone.

    I have been creating a website over the last month, learning along the way using coding forums and various other resources on the net.

    I am stumped at this current point where I have coded 4 of the latest products to appear on my main page. If I adjust my php/mysql code, I can get one product to show in my div, but the remaining products jump outside the div. For example when I set it to 6 products, 1 product will stay in the div and the remaining 5 products will line up below the div.

    If I adjust the CSS, I can get the products to appear inline, inside the required area, but then the background div vanishes. If I adjust the height to auto, max-height and it seems adjusting the css is the only way that I can get the items to display and move around.

    The link above is a temporary solution so visitors have something mildly decent to look at. Here is the link of what I am actually working on, along with the appropriate code below.

    PHP Code.

    PHP Code:
    $sql mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 4"); // You can change the limit to the number you wish to 
    while($row mysql_fetch_array($sql)){     
        
    $id $row["id"];
        
    $product_name $row["product_name"];
        
    $subpartnumber $row["subpartnumber"];
        
    $price $row["price"];       
    echo 
    '<div class="productDisplay">';
    echo   
    '<div class="smallprodgap"></div>';
    echo      
    "<div class=\"smallprodtitleb\">{$row['product_name']}</div>";
    echo         
    '<div class="smallprodphoto">';
    echo              
    '<div class="smallphotoHolder"><img src="../store/inventory_images/' $id '.jpg" width="116" height="118" alt="Series 1"> </div>';
    echo           
    '</div>';
    echo       
    '<div class="smallprodyearb">Year: <strong>2012</strong></div>';
    echo    
    '<div class="smallprodpartnum">Part # <strong>' $subpartnumber '</strong></div>';
    echo    
    '<div class="smallprodprice">$<strong>' $price '</strong></div>';
    echo    
    '</div>';
    echo
    '</div>';            
    }
    ?> 



    CSS Seperate Style Sheet.

    Code:
    .lastItemsAdded {
    	background-image:url(images/542x250.jpg);
    	background-repeat:no-repeat;
    	padding-top: 15px;
    	width: 542px;
    	height: auto;
    	min-height: 250px;	
    }
    
    
    .productDisplay {
    	background-image:url(images/smallprodbacks.jpg);
    	background-repeat:no-repeat;
    	background-position:center;
    	width: 135px;
    	height: 199px;
    	float: left;
    }
    Thank you in advance for helping me out and pointing me in right direction. I am clearly a noob!!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,343
    Thanks
    11
    Thanked 288 Times in 287 Posts
    In the second link you gave, your div lastItemsAdded only surrounds one of your productDisplay divs, and the other three productDisplay divs are outsite the lastItemsAdded div. So that looks exactly as you'd expect, no?

    Dave

  • Users who have thanked tracknut for this post:

    tonygot (11-22-2012)

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    In the second link you gave, your div lastItemsAdded only surrounds one of your productDisplay divs, and the other three productDisplay divs are outsite the lastItemsAdded div. So that looks exactly as you'd expect, no?

    Dave
    Thanks for the response Dave. I had about 8 links with all different combinations, using 1 style sheet, making it even more confusing for me. lol
    So I went a completely different route and re-wrote the php so the divs are styled in the php code instead of going to a separate style sheet.

    Now I am just having issues applying an href link to the div background so when the item displayed is clicked, it redirects the user to the clicked item. Right now it is only displaying the items without any further advancement for the user.

    PHP Code:
    $sql mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 4"); // You can change the limit to the number you wish to 
    while($row mysql_fetch_array($sql)){     
        
    $id $row["id"];
        
    $product_name $row["product_name"];
        
    $subpartnumber $row["subpartnumber"];
        
    $price $row["price"]; 
        
    $yearavail $row["yearavail"];              
    echo
    "
    <div id='productDisplay' style='background-image:url(images/smallprodbacks.jpg);background-repeat:no-repeat;background-position:center;width: 135px;height: 199px;float: left;'>
    <div id='smallProdGap' style='width: 135px;height: 11px;'></div>
    <div id='smallProdTitle' style='width: 135px;height: 14px;font-family:Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;text-decoration:underline;text-align:center;color: #000;'>"
    .$product_name."</div>
    <div id='smallProdPhoto' style='width: 135px;height:116px;'>
    <div id='smallphotoHolder' style='width:130px;height: 116px;padding-left: 10px;padding-top: 3px;'>
    <img src='../store/inventory_images/" 
    $id ".jpg' width='116' height='118' alt=".$product_name.">
    </div>
    </div> 
    <div id='smallProdYear' style='    width: 135px;height: 12px;font-family:Arial, Helvetica, sans-serif;font-size:12px;color: #206691;text-align:center;padding-top: 3px;'>Year: <strong>"
    .$yearavail."</strong></div>
    <div id='smallProdPartNum' style=' width: 135px;height: 12px;font-family:Arial, Helvetica, sans-serif;font-size:12px;color: #206691;text-align:center;padding-top: 3px;'>Part # <strong>"
    .$subpartnumber."</strong></div>
    <div id='smallProdPrice' style='     width: 135px;height: 14px;font-family:Arial, Helvetica, sans-serif;font-size:14px;color: #C03;text-align:center;padding-top: 3px;'>$<strong>"
    .$price."</strong></div>
    </div>"
    ;      
    }
    ?>
    </div> 

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,343
    Thanks
    11
    Thanked 288 Times in 287 Posts
    To put an anchor around a div background, you'd need to put the anchor around the whole div. While technically not legal code, I suspect it will work. But it's not the greatest solution. IMO if there's an item you want the user to be able to click, it should be in the foreground (ie, an <img> in this case) and not the background.

    Dave

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That makes sense I suppose. I was just trying to make it easier for the user in the sense of being able to click "anywhere" on the item, price, part #, pic, title, instead of limiting them only to clicking on the pic to proceed. In the meantime I guess at least a clickable link on the pic will suffice. I can also add the same links to the part #, price, title also which I suppose will do the same trick as clicking on the background.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,343
    Thanks
    11
    Thanked 288 Times in 287 Posts
    Yep, that's what I'd do.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello tonygot,
    Since an inline anchor cannot contain a block level div element... look at why you're using divs. Those div elements that hold a line of text can semantically be spans and an image does not necessarily need to be wrapped by a div.

    See what I mean in this snippet posted below. I changed your containing elelment to a class as it looks like you'll probably use it more than once. I hate inline styles but I left a lot because I don't know how you're adding them. Changed your divs to spans where needed.
    Then wrapped it all in an anchor so it's all clickable.
    It's a mess but maybe it'll give you an idea or two...

    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 {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    .productDisplay {
    	width: 361px;
    	float: left;
    	background: #f00 url(http://www.codingforums.com/img/logo.gif) no-repeat center 60px;
    }
    .productDisplay a {
    	height: 300px;
    	display: block;
    }
    .productDisplay img {
    	display: block;
    	background: #00f;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div class='productDisplay'> 
            <a href="#">
                <span class='smallProdGap' style='width: 135px;height: 11px;'></span> 
                <span class='smallProdTitle' style='width: 135px;height: 14px;font-size:11px;font-weight:bold;text-decoration:underline;text-align:center;color:#000;'>".$product_name."</span> 
                	<img src='../store/inventory_images/" . $id . ".jpg' alt=".$product_name." width='116' height='118' class="smallphotoHolder" style='padding-left:10px;padding-top:3px;' /> 
                <span class='smallProdYear' style='width:135px;height:12px;font-size:12px;color:#206691;text-align:center;padding-top: 3px;'>Year: <strong>".$yearavail."</strong></span> 
                <span class='smallProdPartNum' style='width:135px;height:12px;font-size:12px;color:#206691;text-align:center;padding-top: 3px;'>Part # <strong>".$subpartnumber."</strong></span>
                <span class='smallProdPrice' style='width:135px;height:14px;font-size:14px;color:#C03;text-align:center;padding-top: 3px;'>$<strong>".$price."</strong></span> 
            </a>
        <!--end .productDisplay--></div>
    <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    tonygot (11-24-2012)


  •  

    Posting Permissions

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