Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Rajinder Sihota
Rajinder Sihota
3,473 Points

960.gs grid

www.sunnysihota.com scroll down to 'top selling products', underneath that is 3 grid_4 items, but the middle items 'welcome victoria, bc' isn't in the grid_4 area which should be around 300px in width.

Here's the html code for it:

<!DOCTYPE HTML>

<html> <head> <?php $pageTitle = "SignsAndBanners.com"; ?>

<link rel="stylesheet" type="text/css" href="css/960_12_col.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/refineslide.css"/>

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

<script src="js/jquery.refineslide.min.js"></script>
<script src="js/jquery.min.js"></script>

</head> <body>

<div class="container_12 clearfix">
    <div id="header" class="grid_12">
        <p style="float:left">1-800-555-5555 | Live Chat</p>
        <p style="float:right">Sign In | Register | Shopping Bag </p>

        <div id="header2" class="grid_12">
            <h1>Signs and Banners</h1>
            </div>

                <ul class="nav grid_12">
                    <li><a href="/signs">Signs</a></li>
                    <li><a href="/banners">Banners</a>
                        <ul>
                            <li><a href="/banners/vinylbanners">Vinyl Banners</a></li>
                            <li><a href="/banners/vinylbanners">Mesh Banners</a></li>
                            <li><a href="/banners/vinylbanners">Fabric Banners</a></li>
                        </ul>
                    </li>
                    <li><a href="/flags">Flags</a></li>
                    <li><a href="/Canvas">Canvas</a></li>
                    <li><a href="/DigitalPrints">DigitalPrints</a></li>
                    <li><a href="/miscellaneous">Miscellaneous</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="grid_12">
        <div class="rs-wrap">
            <ul class="rs-slider">
                <li><img src="img/largebanner.jpg" alt="" /></li>
                <li><img src="img/largebanner2.jpg" alt="" /></li>
                <li><img src="img/flags.jpg" alt="" /></li>
            </ul>



        <script>
            $(function() {
                $('.rs-slider').refineslide({
                    maxWidth: 960  // set to native image width (px)
                });
            });
        </script>
        </div>
    </div>

    <div class="custom1 grid_4">
        <h2>Showcase Your Brand</h2>
    </div>
    <div class="custom2 grid_4">
        <h2>Custom Banners</h2>
    </div>
    <div class="custom3 grid_4">
        <h2>Custom Signs</h2>
    </div>

    <div class="images grid_4">
        <img src="img/banner1.jpg" title="Your Brand" width="300" height="270" />
    </div>
    <div class="images grid_4">
        <img src="img/banner2.jpg" title="Custom Banners" width="300" height="270" />
    </div>
    <div class="images grid_4">
        <img src="img/signs.jpg" title="Custom Signs" width="300" height="270" />
    </div>

    <div class="TopSelling grid_12">
        <h2>Top Selling Products</h2>
    </div>
    <div class="images2 grid_3"
        <img src="img/topseller1.jpg" title="" width="220" height="160" />
    </div>
    <div class="images2 grid_3"
        <img src="img/topseller2.jpg" title="" width="220" height="160" />
    </div>
    <div class="images2 grid_3"
        <img src="img/topseller3.jpg" title="" width="220" height="160" />
    </div>
    <div class="images2 grid_3"
        <img src="img/topseller4.jpg" title="" width="220" height="160" />
    </div>

    <div class="images3 grid_4">
        <img src="img/vinylbanners.jpg" title="Vinyl Banners" width="300" height="200" />
    </div>
    <div class="article grid_4">
        <p> Welcome Victoria, BC </p>
    </div>
    <div class="images3 grid_4">
        <img src="img/digitalprints.jpg" title="Digital Prints" width="300" height="200" />
    </div>

    <div class="article2 grid_6">
        <h2>Why SignsAndBanners.com?</h2>
        <p>We offer the lowest prices online, we feel our competitive rates will give you the most value for your dollar.  Our customizations give you the power to create everything you want for your business.  We offer a huge variety of products.  Our online security is AAA rated and you can rest assure that all transactions are processed in an anonymous and secure method.</p>
    </div>

    <div id="footer" class="grid_12">
        <p>&copy; Copyright 2013 SignsAndBanners.com</p>
    </div>

</div>

</body> </html>

What am I doing wrong in setting that grid up so it fits into what grid_4 should be. I have the 960_12_col.css setup.

Another issue on the site is that my jquery slider isn't appearing at all.

1 Answer

Rajinder Sihota
Rajinder Sihota
3,473 Points
Rajinder Sihota
Rajinder Sihota
3,473 Points

This has to do with using the grid to have columns of images + text, and it doesn't seem to be working. I'm doing something wrong. Need help.