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

4 column footer using 960 grid

Footer here: www.sunnysihota.com

I want the full background to be colored in. For the items in the last column, the width is much too wide but the problem is lining up the end so the headline, list items AND the area in between them is all the same length, any ideas?

I want the last 3 columns to come down 4 spaces so it looks like a rectangle, I tried adding an empty list item but then that place in the column highlights when I scroll over it, so that doesn't work well.

Anyone have a link to something similar to what I'm creating?

my css code:

.col {
background: #1A3FBA;
float: left;
padding: 30px 0 0 35px;
width: 200px;
}

.col:first-child {

padding: 0px 0 0 0; }

h3 {

background: #1A3FBA; color: #FFF; float: left; font: bold 18px Arial, Helvetica, sans-serif; font-variant: small-caps; margin: 0 0 20px 0; padding: 9px 0 0 19px; height: 33px; width: 220px; }

ul.col {

list-style: none; margin: 0; padding: 0; }

ul.col li {

background: #1A3FBA; border-bottom: 1px dotted #0B12D9; border-top: 1px dotted #0B12D9; float: left; height: 35px; margin: 3px 0; padding: 0; width: 220px; }

ul.col li a {

color: #FFF; display: block; float: left; font: normal 12px Verdana, Geneva, sans-serif; padding: 10px 0 0 19px; text-decoration: none; }

ul.col li:hover {

background: #5fa4c5; }

.foot {
background: #1A3FBA;
}

.footer {
text-align: right;
}

My html code:

<div id="foot" class="grid_12">
        <ul class="col grid_3">
            <h3>Support</h3>
                <ul>
                    <li><a href="/contact">Contact Us</a></li>
                    <li><a href="/feedback">Feedback</a></li>
                    <li><a href="/faq">FAQ</a></li>
                    <li><a href="/sitemap">Sitemap</a></li>
                </ul>
        </ul>
        <ul class="col grid_3">
            <h3>Payments</h3>
                <ul>
                    <li><a href="/paymentoptions">Payment Options</a></li>
                    <li><a href="/paymentsecurity">Payment Security</a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
        </ul>
        <ul class="col grid_3">
            <h3>Policies</h3>
                <ul>
                    <li><a href="/shippingpolicy">Shipping Policy</a></li>
                    <li><a href="/privacypolicy">Privacy Policy</a></li>
                    <li><a href="/terms">Terms & Conditions</a></li>
                    <li><a href=""></a></li>
                </ul>
        </ul>   
        <ul class="col grid_3">
            <h3>Signs and Banners</h3>
                <ul>
                    <li><a href="/aboutus">About Us</a></li>
                    <li><a href="/testimonials">Testimonials</a></li>
                    <li><a href="/pricing">Pricing</a></li>
                    <li><a href=""></a></li>
                </ul>
        </ul>   

    </div>

I also got bullets to the left of all the list items which I can't get rid of.

thanks in advance

5 Answers

Ryan Allen
Ryan Allen
6,280 Points
Ryan Allen
Ryan Allen
6,280 Points

A bit overcomplicated it seems. You have unordered lists nested inside other unordered lists.

Try this http://jsfiddle.net/6NSLn/1

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

That made my whole page background go blue and the 4 columns, 3 are on 1 line and the 4th is on the 2nd line centered. ugh

Ryan Allen
Ryan Allen
6,280 Points
Ryan Allen
Ryan Allen
6,280 Points

Change your <ul class="col"> elements to divs and update your css to match

Also, you'll need to add 'ul' to this line: div.col ul{ list-style: none; margin: 0; padding: 0; }

Remove all set widths on the list-items and h3 tags as well as the float: left;

.... getting closer http://jsfiddle.net/VRguq/

Ryan Allen
Ryan Allen
6,280 Points
Ryan Allen
Ryan Allen
6,280 Points

Yikes, replies don't accept markup formatting -- that comment above will make little sense without it.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

If this is still troublesome in the morning, for me, about 6 hours, I'll pop some code together for you. :)

Ryan Allen
Ryan Allen
6,280 Points
Ryan Allen
Ryan Allen
6,280 Points

Rajinder Sihota I cleaned up the CSS quite a bit but the HTML is as before:

http://jsfiddle.net/VRguq/1/

Rajinder Sihota
Rajinder Sihota
3,473 Points

I put in what you wrote up but the results were off. www.sunnysihota.com scroll down and you'll see it's 3 columns on 1 line and the 4th on the next and it's not in an even box. Wierd it works for you but it shows up as this for me.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

This will get you going.

http://codepen.io/Th3M8dH8tt3r/pen/ukwhz

Couple of things I noticed when I briefly looked over your code.

1) You're using a grid. That means each column has a margin on it, something that you haven't take off when assigning the classes.

2) You're assigning col classes widths...that's the grids job so it isn't needed.

A tip: when doing footers, it's easier to just do what I've done in the code. They're responsive down to resolution where a media query would then be required to shrink the font, but nobody has a resolution that small.

I've started it off there in the pen, I hope this is enough to get you going.

If you get stuck and want some help, email me: matthew@globotek.net.

Alternatively, I'm on Skype: th3m8dh8tt3r