...

View Full Version : How to make a grid for images / products



Odie101
08-02-2011, 04:55 PM
Hi everyone. I was hoping someone could help me figure out how to make a grid similar to the one at this site - http://www.coffeerocket.com/Default.asp

Under their "Featured Products" they have a pretty nifty looking table with dividers that span horizontally and vertically that nicely separates their images.

Can someone please tell me how I can go about getting that same effect?

I know that I will need to create a table and do some styling with CSS, and I have tried to add a background image to the <td> with no-repeat, etc.. but it does not give me the effect I am looking for.

How can I make my image go vertically the length of the image and description, and also have a line going horizontally that spans the width of both cells like they do at the above website?

Would really appreciate and help or guidance with this. I know a little about HTML/CSS but I just can't figure out how to get this to look right.

teedoff
08-02-2011, 06:30 PM
Well first off, Im pretty sure they are using a database to populate that table with their products and everything else you see, using asp.

Have you tried viewing their source code and finding that particular table and copying the source? Firebug for firefox is great for finding specific code in a webpage.

Odie101
08-02-2011, 06:43 PM
Hey Teed.. yeap, I have looked at their source code and have copied it, but there is so much in there that I'm not sure how to go about doing it.

Yeap, I do know that they have some code that is rotating their products, but all I'm interested in right now is just getting the layout - i.e. the vertical and horizontal line, and then I will just add images and descriptions manually within the cells to get the similar look of their site.

Odie101
08-03-2011, 04:54 PM
Umm, bump? :(

Yaneau
08-04-2011, 01:42 AM
<style type="text/css">
#wrap-main {
width: 500px;
margin: auto;
background: #C2C2C2;
padding: 5px;
}
.clear-all {clear: both; }
.row {
margin: 5px 0 5px 0;
padding: 5px 0 5px 0;
border-bottom: 1px #000000 solid;
}
.row-last {
margin: 5px 0 5px 0;
padding: 5px 0 5px 0;
border-bottom: 0;
}
.col-left {
width: 50%;
border-right: 1px #000000 solid;
float: left;
padding: 3px;
}
.col-right {
width: 50%;
float: left;
padding: 3px;
}
</style>

<div id="wrap-main">

<div class="row">
<div class="col-left">
<!--Product 1-->
<strong>Product 1</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>

<div class="col-right">
<!--Product 2-->
<strong>Product 2</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>
<div class="clear-all"></div>
</div>

<div class="row">
<div class="col-left">
<!--Product 3-->
<strong>Product 3</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>

<div class="col-right">
<!--Product 4-->
<strong>Product 5</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>
<div class="clear-all"></div>
</div>

<div class="row-last">
<div class="col-left">
<!--Product 5-->
<strong>Product 5</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>

<div class="col-right">
<!--Product 5-->
<strong>Product 6</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>
<div class="clear-all"></div>
</div>

</div>


Something like this maybe?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum