Help with footer

From C++ to PHP, debugging to webhosting; help and discussion about writing your latest program to running your website. NOT for help when your PC won't work.

Announcements Posted on
Search Thread
Advanced Search
Sign in to Reply
  1. AD7863's Avatar
    1 09-09-2011  18:37
    • Junior Member
    • Location: Bradford, England
    • Posts: 57
    Help with footer
    So... I was creating a website and this happened:



    Here's the code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Potatoes</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="menu">Announcement: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
<div class="wrapper">
<div class="head"><p><h1>Potatoes</h1> <h2>are awesome.</h2></p></div>
<div class="images"><img src="images/potatoes1.jpg" width="986" height="250" alt="Various Potatoes" /><div class="text"><p>We're serious about our potatoes.</p></div><div class="subtext"><p>You should be too.</p></div></div>
<div id="nav"><ul id="button">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Variety</a></li>
<li><a href="#">References</a></li>
<li><a href="#">Contact Me</a></li>
</ul></div>
<div class="content"><p><span class="red">Alert:</span> Did you know blah blah fact about potatoes?</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

<p><blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</blockquote></p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

<div class="sidebar"><p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></p></div>
<div class="sidebar"><img src="images/phead.jpg" width="250" height="250" alt="Mr. Potato Head" /></div>
<div class="sidebar"><ul><li><a href="http://www.twitter.com">Twitter</a></li><li><a href="http://www.facebook.com">Facebook</a></li><li><a href="http://www.google.com">Google</a></li></ul></div>
</div>
<div class="footer">
	<div class="fl">Footer Left</div>
    <div class="fc">Footer Centre</div>
    <div class="fr">Footer Right</div>
</div>
</body>
</html>
    Code:
    @charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500,700,300italic);

/*CSS Reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;}
body {
line-height: 1;}
ol, ul {
list-style: none;}
blockquote, q {
quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: ''; content: none;}
table {
border-collapse: collapse; border-spacing: 0;}
/*End reset*/

html {height:100%;}
body {height:100%; margin: 0 auto; font-family: 'Ubuntu', sans-serif;}
.menu {width:100%; background: #333; color: #CCC; padding: 5px 5px; font-size:12px; text-align:center;}
.wrapper {width: 986px; margin: 0 auto;}
div.head h1 {display: inline; font-weight:700; font-size:72px; margin-right:7px;}
div.head h2 {display: inline; font-weight:500; font-size:32px; color:#999;}
div.head p {color: #FFF;}
p {font-weight:300;}
.content p {margin:15px 5px 15px 15px; text-align:justify; color: #666;}
div.head {padding:25px 25px; border-left: #CCC 1px solid; border-right:#CCC 1px solid;}
div.images {height:250px; position:relative; border-left: #CCC 1px solid; border-right:#CCC 1px solid;}
.images .text {position:absolute;top:70px;left:30px; background: #333; color:#FFF; font-size:35px; padding:10px 10px; display:inline;}
.images .subtext {position:absolute;top:125px;left:30px; background: #666; color:#FFF; font-size:15px; padding:10px 10px; display:inline;}
div.images img {filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;}
div#nav {height:40px;}
#button {padding: 0;}
#button li {display: inline;}
#button li a {font-size:22px;text-decoration: none;float:left;padding: 10px;background-color: #2175bc;color: #fff;}
#button li a:hover {background-color: #2586d7;margin-top:-4px;padding-bottom:14px;}
.content {padding: 10px 10px 10px 0px; width:690px; display:block; float:left; border-left: #CCC 1px solid; margin-top:10px;}
.sidebar {padding: 0px 10px 0px 15px; width:252px; display:block; float:right; border-left: #CCC 1px solid; border-right: #CCC 1px solid; margin-top: 5px;}
span.red {background:#F00; padding:2px 3px; color:#FFF; text-transform:uppercase;}
blockquote {border-left: #F00 5px solid; margin: 10px 15px; padding-left: 10px; font-style:italic; text-align:justify;}
.sideinfo {background-color:#fffed6;border-width:0px;border-color:#999999;-moz-border-radius:11px;-webkit-border-radius:11px;border-radius:11px; padding: 10px 10px;}
.sideinfo li {font-weight:500;}
.sidebar a:link {text-decoration:none; color:#999; font-style:italic;}
.sidebar a:visited {text-decoration:none; color:#999; font-style:italic;}
.sidebar a:active {text-decoration:none; color:#999; font-style:italic;}
.sidebar a:hover {text-decoration:underline; color: #666; font-style:italic;}
.footer {width: 100%; height: 200px; background:#333;}
.fl {width:200px; float:left;}
.fc {width:200px;}
.fr {width:200px; float:right;}
    Help please.
    Last edited by AD7863; 09-09-2011 at 18:38.
  2. AD7863's Avatar
    2 09-09-2011  19:01
    • Junior Member
    • Location: Bradford, England
    • Posts: 57
    Re: Help with footer
    Fixed by adding

    Code:
    clear:both;
    to footer style.
  3. AD7863's Avatar
    3 09-09-2011  19:25
    • Junior Member
    • Location: Bradford, England
    • Posts: 57
    Re: Help with footer
    Ok well, I now have another problem.

    See that text in the footer? How do I centre it?



    HTML Code:
    <div class="footer">
		<div class="fl">Footer Left
    		<ul>
        		<li>Random Link 1</li>
          	  <li>Random Link 2</li>
           	 <li>Random Link 3</li>
        	</ul>
   		</div>
    	<div class="fc">Footer Centre
    		<ul>
        		<li>Random Link 1</li>
            	<li>Random Link 2</li>
            	<li>Random Link 3</li>
        	</ul>    
    	</div>
    	<div class="fr">Footer Right
    	<ul>
        		<li>Random Link 1</li>
            	<li>Random Link 2</li>
            	<li>Random Link 3</li>
    	</ul>
        </div>
</div>
    Code:
    .footer {width: 100%;margin: 0 auto; height: 200px; background:#333; clear:both; color:#CCC; padding: 20px 20px; font-size:14px;}
.fl {width:300px; display: inline-block; margin: 0 28px;}
.fc {width:300px; display: inline-block; margin: 0 28px;}
.fr {width:300px; display: inline-block; margin: 0 28px;}
    Thanks in advance. Internets to anyone who can help me.
  4. AD7863's Avatar
    4 09-09-2011  19:55
    • Junior Member
    • Location: Bradford, England
    • Posts: 57
    Re: Help with footer
    Fixed myself by adding this CSS code:

    Code:
    .fcontainer {width:986px; margin:0 auto;}
    and wrapping fl, fc and fr div tags in the fcontainer div.
  5. c4za69's Avatar
    5 09-09-2011  20:07
    • Junior Member
    • Posts: 41
    Re: Help with footer
    You could possibly drop the divs around the <ul> tags.

    Code:
    <style>
#footer {margin-top: 25px;background: #a5a5a5;padding: 20px 0 0 20px;border-top: 1px solid #000;color: #4a4a4a;}
#sub-footer {width: 600px;margin: 0px auto;}
#footer ul{list-style:none;padding:0;}
#left, #middle{float: left;width: 200px;}
#right {width: 200px;float: right;}
.clear {clear:both;}
</style>
<div id="footer">
	<div id="sub-footer">
		<ul id="left">
			<li><h2>Left Column</h2><li>
			<li>Left One</li>
			<li>Left Two</li>
			<li>Left Three</li>
		</ul>
		<ul id="middle">
			<li><h2>Middle Column</h2></li>
			<li>Middle One</li>
		</ul>
		<ul id="right">
			<li><h2>Right Column</h2></li>
			<li>Right One</li>
			<li>Right Two</li>
			<li>Right Three</li>
			<li>Right Four</li>
			<li>Right Five</li>
		</ul>
	</div>
	<div class="clear">
</div>
    There's probably a cleaner way of doing it than my method though
  6. estel's Avatar
    6 09-09-2011  20:33
    • TSR Idol
    • Location: Bristol
    • Posts: 9,352
    Re: Help with footer
    Why 983px wide, out of interest?
    Post rating:
    1
  7. AD7863's Avatar
    7 09-09-2011  21:46
    • Junior Member
    • Location: Bradford, England
    • Posts: 57
    Re: Help with footer
    (Original post by estel)
    Why 983px wide, out of interest?
    It's actually 986. I don't know why I chose it, just did. 1000px is too cliché.
  8. AD7863's Avatar
    8 09-09-2011  21:47
    • Junior Member
    • Location: Bradford, England
    • Posts: 57
    Re: Help with footer
    (Original post by c4za69)
    You could possibly drop the divs around the <ul> tags.

    Code:
    <style>
#footer {margin-top: 25px;background: #a5a5a5;padding: 20px 0 0 20px;border-top: 1px solid #000;color: #4a4a4a;}
#sub-footer {width: 600px;margin: 0px auto;}
#footer ul{list-style:none;padding:0;}
#left, #middle{float: left;width: 200px;}
#right {width: 200px;float: right;}
.clear {clear:both;}
</style>
<div id="footer">
	<div id="sub-footer">
		<ul id="left">
			<li><h2>Left Column</h2><li>
			<li>Left One</li>
			<li>Left Two</li>
			<li>Left Three</li>
		</ul>
		<ul id="middle">
			<li><h2>Middle Column</h2></li>
			<li>Middle One</li>
		</ul>
		<ul id="right">
			<li><h2>Right Column</h2></li>
			<li>Right One</li>
			<li>Right Two</li>
			<li>Right Three</li>
			<li>Right Four</li>
			<li>Right Five</li>
		</ul>
	</div>
	<div class="clear">
</div>
    There's probably a cleaner way of doing it than my method though
    Here's how I did it in the end:

    Code:
    .footer {width: 100%;margin: 0 auto; height: 115px; background:#666; clear:both; padding: 20px 20px; font-size:14px;}
.fcontainer {width:986px; margin:0 auto;}
.fl {width:250px; display: inline-block; padding-right:50px; border-right: #999 solid 1px;}
.fc {width:250px; display: inline-block; margin: 0 50px;}
.fr {width:250px; display: inline-block; padding-left:50px; border-left:#999 solid 1px;}
.fbox {background-color:#ffffff; border: #CCC 1px solid; -moz-border-radius:11px; -webkit-border-radius:11px; border-radius:11px; padding: 10px 10px;}
.fbox h1 {font-weight:300; color:#999;margin-bottom:10px; font-size:16px;}
.fbox ul li {border-bottom: #CCC 1px solid; margin-bottom:3px;}
.fbox ul li a {font-size:12px;}
.fbox ul li a:link {text-decoration:none; color:#06C; line-height:15px;}
.fbox ul li a:visited {text-decoration:none; color:#06C; line-height:15px;}
.fbox ul li a:active {text-decoration:none; color:#06C; line-height:15px;}
.fbox ul li a:hover {text-decoration:underline; color:#06C; line-height:15px;}
.copyright {margin:10px 10px;}
.copyright p {text-align:center; font-size:10px; color:#CCC;}
    HTML Code:
    <div class="footer">
	<div class="fcontainer">
		<div class="fl"><div class="fbox"><h1>Footer Left</h1>
    		<ul>
			  <li><a href="http://www.google.com">Random Link 1</a></li>
          	  <li><a href="http://www.google.com">Random Link 2</a></li>
           	 <li><a href="http://www.google.com">Random Link 3</a></li>
        	</ul></div>
   		</div>
    	<div class="fc"><div class="fbox"><h1>Footer Centre</h1>
    		<ul>
        		<li><a href="http://www.google.com">Random Link 1</a></li>
            	<li><a href="http://www.google.com">Random Link 2</a></li>
            	<li><a href="http://www.google.com">Random Link 3</a></li>
        	</ul></div>    
    	</div>
    	<div class="fr"><div class="fbox"><h1>Footer Right</h1>
    	<ul>
        		<li><a href="http://www.google.com">Random Link 1</a></li>
            	<li><a href="http://www.google.com">Random Link 2</a></li>
            	<li><a href="http://www.google.com">Random Link 3</a></li>
    	</ul></div>
        </div>
        <div class="copyright"><p>Copyright &copy; 2011 Gulam Kashim</p></div>
	</div>
</div>
    ...and the result:



    Oh, I also kept the divs because in the future I was thinking of adding things other than just a list with different formatting etc.
    Last edited by AD7863; 09-09-2011 at 21:50.
  9. estel's Avatar
    9 09-09-2011  22:53
    • TSR Idol
    • Location: Bristol
    • Posts: 9,352
    Re: Help with footer
    (Original post by AD7863)
    It's actually 986. I don't know why I chose it, just did. 1000px is too cliché.
    Well, 960 or 950 are probably a bit more cliche (and with good reason).
Sign in to Reply
Search Thread
Advanced Search
Share this discussion:  
Useful resources

Quick Link:

Unanswered Webmaster,Coding and Software Dev Threads

Groups associated with this forum:

View associated groups
Article updates
Moderators

We have a brilliant team of more than 60 volunteers looking after discussions on The Student Room, helping to make it a fun, safe and useful place to hang out.

This forum is moderated by:

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22

Registered Office: International House, Queens Road, Brighton, BN1 3XE

Shortcuts

Get Started

TSR Group

Using TSR

Info

Connect with TSR

Reputation gems:
The Reputation gems seen here indicate how well reputed the user is, red gem indicate negative reputation and green indicates a good rep.
Post rating score:
These scores show if a post has been positively or negatively rated by our members.