The image below is the design for a footer, with links in top left, slogan top right, copyright bottom left and phone number bottom right. When I do this in html I can't get the objects on the bottom in the right place. I am trying to make a flexible screen so I don't want to be too specific with sizes.
Below is the HTML and CSS I have done.
HTML
HTML Code:<div id="foot"> <div id="navigation"> <ul> <li><a href="#">Home page</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Client access</a></li> <li><a href="#">Site Map</a></li> </ul> </div> <div id="navigation"> <ul> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> </ul> </div> <div id="navigation"> <ul> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> <li><a href="#">Service</a></li> </ul> </div> <div id="slogan"> Getting IT right for you and keeping you connected </div> <div id="copyright"> Website designed and developed by <a href="#">Kent Tec</a> </div> <div id="contact"> 01843 232777 </div> </div>
CSS
Code:/*-------Footer------*/ #foot{ width:100%; height: 200px; overflow:hidden; background-image:url(../images/footbg.jpg); background-repeat:repeat-x; } /*--Links--*/ #navigation { position:relative; overflow:hidden; width:150px; height:auto; float:left; top:10px; left:10px; font-family:"Agency FB", Tahoma, Verdana, Arial; font-size:16px; } #navigation ul { width:100%; height:auto; margin:0; padding:0; list-style-type:none; text-align:left; } #navigation ul li { margin:0; padding:0; display:block; height:30px; line-height:25px; } #navigation ul li a { text-decoration:none; color:#000; } #navigation ul li a:hover { color:#0033FF; } /*--Links--*/ #slogan { float:right; font-size:16px; font-family:"Segoe Print", "MV Boli", "Lucida Calligraphy", "Freestyle Script", Script; margin-top:10px; width:500px; text-align:right; } #copyright{ float:left; font-family:"Agency FB", Tahoma, Verdana, Arial; font-size:18px; width:300px; } #contact { float:right; font-family:"Agency FB", Tahoma, Verdana, Arial; font-size:24px; color:#FFF; width:200px; text-align:right; margin-top:125px; } /*-------Footer------*/



Reply With Quote

Bookmarks