...

View Full Version : css div - help with pictures jumping everywhere!



tonygot
11-22-2012, 01:34 PM
Hello everyone.

I have been creating a website (http://gotminifigures.com) 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 (http://www.gotminifigures.com/delete2.phphttp://) of what I am actually working on, along with the appropriate code below.

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.



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

tracknut
11-22-2012, 03:14 PM
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

tonygot
11-22-2012, 04:52 PM
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.


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

tracknut
11-22-2012, 05:07 PM
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

tonygot
11-22-2012, 05:44 PM
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.

tracknut
11-22-2012, 05:54 PM
Yep, that's what I'd do.

Excavator
11-22-2012, 06:48 PM
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...


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum