Forums

hal8

Hi all.

Ok so im still messing around trying to convert a PSD sample i did to try and learn more stuff.

So i wanted to have a footer image bg image for the footer div which i can do ok. But then i wanted to have 2 divs inside the footer with ul links next to each other.

How would i go about doing that. Could any one help me out. I suppose a good example would be this site's footer.
Where Chris has got Friends, Navigation etc.

Would i just have a div container then 2 divs inside that then how would i go about getting them both next to each other in the container div.....its driving me made!!! :x

Ok so reading this back i dunno if it makes sense...but im too tired and going to bed !!

This is the live link anyway

http://www.footballsmylife.com

Thanks in advance for the help :)

apostrophe

You have way to many divs in there.

<div id = \"footer\"
    <div class=\"footer_col>
      <h2> FML Friends </h2>
      <ul>
            <li></li>
            <li></li>
      </ul>
    </div><!--end footer_col-->

    <div class=\"footer_col>
      <h2> Navigation </h2>
      <ul>
            <li></li>
            <li></li>
      </ul>
    </div><!--end footer_col-->
</div><!--end footer-->

and the CSS

#footer {
background: whatever;
}
.footer_col {
float: left;
}

Set widths and add margins and padding where required.

Robskiwarrior

firstly - why have you set margin right so large? why dont you just set the footer div width to 900px or whatever it is?

Ok for your HTML footer structure I would do...


<div id=\"footer-conatiner\">
								
			<ul id=\"footer-friends\">
				<li>Friends</li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
			</ul>
		
			<ul id=\"footer-nav\">
				<li>Navigation</li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
				<li><a href=\"/\">Test Links</a></li>
			</ul>
</div>

with the CSS something like



div#footer-conatiner {
    width:900px;
    height:290px;
}

ul#footer-friends {
      width:400px;
      display:inline-block;
      float:left;
}

ul#footer-friends li:first-child {
    font-size: 1.5em;
    font-weight: bold;
}

Obvioulsy thats just an untested idea - but pretty much what I would do.

hal8

Ah ok. Thanks guys, I’ll try your ideas when I finish work.

I only set the margin-right that large coz I was just messing around to see wot things looked like….(hence red border) and never took it off :D

treehouse : what would you like to learn today?

Forums

Need help with footer !!