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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make a grid for images / products

    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.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Umm, bump?

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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?


  •  

    Posting Permissions

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