Forums

jesb

I'm really new with webdesign so it's expected that I'm lost. I am nearing close to the end of my design, this of course doesn't count debugging or anything like that. But I am now trying to put in my footer, but nothing is coming in. The only thing coming in is my text from the footer, and even that is not in the right place.

I made sure to do the clear: both; command in my footer. But it's still not showing up. I tried adding the float:bottom option but that does nothing either.

The file name and file format is correct as well for my footer, checked it many times over.

Here is my html

div id="footer">
  <div id="footerContainer">
	<p>Copyright &copy; 2010 company name | <a href="#">Privacy Policy</a></p>
	<p>
	  <a href="#">Home</a> /
	  <a href="#">About </a> /
	  <a href="#">Our Services</a> /
	  <a href="#">Portfolio</a> /
	  <a href="#">Blog</a> /
	  <a href="#">Contact Us</a>
	</ p>
	 <form id="newsletter" action="#" method="post">
	  <label >Enter your email to subscribe for  RSS Updates</label >
	  <input type="text" class="textBox"/>
	  <input class ="btn" type=image src="images/subscripe-button.png"/>
	</form>
  </div>
</div>

And than here is some of the css for this specific div.

#footer {
  clear: both;
  background: url(../images/footer.jpg);
  height: 100px;
  width: 100%;
  margin-top: 40px;
  float:bottom;
}

#footerContainer {
  margin: 0px auto 0;
  width: 960px;
  font-size: 12px;
  color: #ddd;
  padding-top: 20px;
  position: relative;
  float:bottom;
}


#footerContainer p {
  margin: 8px 0 8px;
}
#footerContainer a {
  color: #ddd;
  text-decoration: none;
}
#footerContainer a:hover {
  text-decoration: underline;
}

form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #fff;
border:1px solid #ddd;
color: #666;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

form#newsletter input.btn {
  width: auto;
  border: none;
  padding: 0;
  margin-left: 3px;
}

Any ideas on what the issue could be?

chrisburton

One issue is your code isn't semantic and pieces of it are certainly not correct. Float:bottom? Do you have a link?

jesb

Yeah I realize it isn't, I intend to go through it all to see what is needed and what isn't. But like I said I'm pretty new, and just pretty much trying a few things to see if I could get something to do something.

I don't have any link, no.

chrisburton

I would take a few days to do a crash course with CSS and HTML. Video tutorials might also help so here is one...

http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

jesb

I was actually following a tutorial from net tuts to build this site. And came this far, all I need is the footer, add in links and my site will be pretty much done. I need to know what the issue is with this code and why I cant get the footer in.

chrisburton

If you got this from nettuts, why would you have improper CSS? Especially like a bottom float? Also, not sure if you forgot an opening tag when you copied or not but make sure to have that at the beginning of your div.

div id="footer">

HTML
You need to have an unordered list and list items before your anchor tags.
e.g.

<ul><li><a href="#">Home</a></li></ul>

CSS
Get rid of the bottom float as it does not exist.

float:bottom;

Add these prefixes to border-radius

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;

I would really need a link to check for any visual errors beyond this.

jesb

The only reason I messed around with the code, when I did exactly what the tut said to do the footer still wasn't there. I cant help but think that this has something to do with some other code that messed something else up.

link to a screenshot.

Eclipse

First of all clean up the code:




HTML:

div id="footer">   change to <div id="footer">

<p>
          <a href="#">Home</a> /
          <a href="#">About </a> /
          <a href="#">Our Services</a> /
          <a href="#">Portfolio</a> /
          <a href="#">Blog</a> /
          <a href="#">Contact Us</a>
        </ p>

change to:

<ul>
          <li><a href="#">Home</a></li> /
          <li><a href="#">About </a></li> /
          <li><a href="#">Our Services</a></li> /
          <li><a href="#">Portfolio</a></li> /
          <li><a href="#">Blog</a></li> /
          <li><a href="#">Contact Us</a></li>
</ul>

<form id="newsletter" action="#" method="post">
          <label >Enter your email to subscribe for  RSS Updates</label >
          <input type="text" class="textBox"/>
          <input class ="btn" type=image src="images/subscripe-button.png"/>
        </form>

Change to:

<form id="newsletter" action="#" method="post">
          <label>Enter your email to subscribe for  RSS Updates</label >
          <input type="text" class="textBox"/>
          <input class ="btn" type="image" src="images/subscripe-button.png"/>
</form>



CSS:

#footer

Get rid of float:bottom;

#footerContainer

Get rid of float:bottom;
Fix the margin to: margin: 0 auto;

Now see if it works better!

jesb

Nothing at all changed from making those changes, still looks the same.

virtual

Your problem is probably coming from the html and/or css before the footer, because your screen shot does show the footer (without background image), but not in the right place.
It is difficult to help without seeing the code.

jesb

I'm in the process of going through all my code, just to clean up what I don't need. Once I'm done doing that I'll post all my html and css on here. Hopefully I can figure out the problem in the mean time and the issue resolves itself after some cleaning.

jesb

Well I cant seem to figure out what the problem is. Here is all my code. Hope you guys can figure this one out.

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div  id="container">




<div id="header">



	<h1><a href="#"><img src="images/logo.png"  alt="logo" /></a></h1>
	  </div>
</div>
<!-- end of header -->



<div id="nav">
  <ul>
	<li class="active"><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>services</span></a></li>
	<li><a href="#"><span>gallery</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Blog</span></a></li>
	<li><a href="#"><span>Contact Me</span></a></li>

  </ul>
</div>



<!-- end of nav -->


<div id="featured">
  <ul>
	<li class="ss1"><img src="images/featured.jpg" /><a href=""></a></li>
  </ul>

  <form id="quote" action="#" method="post">
	<h2>Send me any inquiries </h2>

	  <label>Your Name:</label>
	  <input type="text" name="Full Name" />
	  <label>Your Email:</label>
	  <input type="text" name="Email" />
	  <label>Comments:</label>
	  <textarea cols="1" rows="1"></textarea>
	  <input class="btn" type="image" src="images/submit.png"/>

  </form>
</div>




<div id="content">

<div id="twitter">
  <li><a href="#"><span><img src="images/twitter.png" alt="twitter" /></span></a></li>
  </div>

  <div id="facebook">
  <li><a href="#"><span><img src="images/facebook.png" alt="facebook" /></span></a></li>
  </div>



  <div class="col">
	<h2>About <span>Me</span></h2>
	<img src="images/portrait.jpg" alt="about me" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

  </div>
  <div class="col noMargin">
	<h2>My <span>Services</span></h2>
	<img src="images/services.png"  alt="services i offer" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

  </div>
  <div class="col noMargin fr">
	<h2>My <span> Tools</span></h2>
	<img src="images/tools.png" alt="tools" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

  </div>
</div>
<div class="clear"></div>

<li><a href="#"><span></span></a></li>



<div id="footer">
  
	<p>Copyright &copy; 2010 Company Name | <a href="#">Privacy Policy</a></p>
	<p>
	<ul>
	  <li><a href="#">Home</a> </li>
	  <li><a href="#">About Company name</a></li> 
	  <li><a href="#">Our Services</a> </li>
	  <li><a href="#">Portfolio</a> </li>
	  <li><a href="#">Blog</a> </li>
	  <li><a href="#">Contact Us</a></li>
	</ul>
	</p>
	
	<form id="newsletter" action="#" method="post">
	  <label>Enter your email to subscribe for  RSS Updates</label>
	  <input type="text" class="textBox" />
	  <input class="btn" type="image" src="images/subscripe-button.png"/>
	</form>
  </div>
</div>
<!-- end of content -->
</body>
</html>

Now here is the CSS

/* CSS Reset */
* { margin: 0 auto; padding: 0;  
   outline: 0;
   border:none;
   list-style-type: none;
   
   
   
  }

body {
  background:url(images/bg.jpg) repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  
  
  
}

#container {
  width: 960px;
  margin: 0 auto;

  
}

#header {
  position:relative;
  width: 100%;
  bottom: 6px;
  
}

#header h1 {
  
  float:left;
  width:365px;
  height:115px;
  margin-top: 35px;
}

#header h1 a {
 
  height: 100%;
  width: 100%;
}
 #header ul li h6 {
  font-size: 11px;
}

#nav {
  clear: both;
  height: 30px;
  width: 100%;
}
#nav ul {
  
  position: absolute;
  right: 180px;
  top: 20px;
  
}

#nav ul li {
  display: inline;
  float: left;
}


#nav ul li a {
  color: white;
  display: inline;
  text-decoration: none;
  font-size: 16px;
  font-weight: normal;
  font-family: calibri, georgia, garamond, arial;
  text-transform: uppercase;
  text-align: right;
  float: left;
  padding: 10px;
  
  
}

#nav li a span {
  
  
  line-height: 28px;
  height: 100%;
  
}

#nav li a:hover, #nav li {
  
  color: #ffc000;
  cursor: pointer;
  text-decoration: none;
}
 
 #featured  {
  
  padding: 10px;
  height: 340px;
  width: 940px;
  border:1px dashed;
  color: #ffe5c4; 
  background-color: #562e00;
  
  
}
#featured ul {
  
}

#featured ul li {
  float: left;
  display:block;
  width: 630px;
}

#featured ul li a {
  display: block;
  height: 350px;
}


#featured ul li.ss1 img a {
 background: url(/images/featured.jpg) 
 
 }
 
 
form#quote {
  background: #ce9426;
  background-image: -webkit gradient(
  linear,
  left top, left bottom,
  from(#b37725), to (#e4ac27)
  );
  padding: 20px;
  float: right;
  width: 260px;
  height: 300px;
}

form#quote h2 {
  font: normal; "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #fff;
  }

form#quote label {
  color: #ffffff;
  font-size: 12px;
  font-family: arial, verdana, georgia;
  float: left;
  width: 100%;
  padding:5px;
  
  
}

form#quote input, form#quote textarea  {
  background-color: #303030;
  color: white;
  font: 12px Arial, Helvetica, sans-serif;
  margin: 5px 7px 8px;
  padding: 10px;
  width: 240px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: 0px 4px 0 -6px  #c4c4c4;
  -moz-box-shadow:inset 0 0 6px #7a7a7a;
   -webkit-box-shadow:inset 0 0 6px #7a7a7a;
   box-shadow:inset 0 0 6px #7a7a7a;
   resize:  none;
  
}
  
  
  

form#quote textarea {
  height: 50px;
  
  
}

form#quote input.btn {
  width: auto;
  border: none;
  padding: 1px;
  margin-top: 0px;
}

#content {
 
  
  font-size: 12px;
  list-style: none;
  
}
#content .col {
  float: right;
  width: 258px;
  background: url(./images/col-bg.jpg) repeat-x;
  height: 193px;
  border: 1px solid #CCC;
  padding: 10px;
  margin-right: 830px;
  margin-top: -225px;
  
  
}
#content .col h2 {
  font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #b47825;
  text-decoration: none;
  
}
#content .col h2 span {
  color: #2f2f2f;

}


#content .col img {
  border:1px opacity: 0.5; dashed;  #d8d8d8;
  padding: 2px;
  float: right;

}

  
  

#content .col p {
  
  line-height: 17px;
}

#content .col.noMargin {
  
  margin-right: 510px;
  
  
}

#content .col.fr {
 
  
  margin-right: 190px;
  margin-top: -225px;
  
}
  
#twitter  {

float:right;
position: absolute;
margin: -508 60 50 1025;
}

#facebook {

float:right;
position: relative;
margin-right: 184px;
margin-top: -597px;
}
  


textarea {
width:  200px;
max-width:  240px;
min-width:  240px;
height:  200px;
min-height:  45px;
max-height:  45px;


#footer {
  clear: both;
  background: url (/images/footer.jpg) 
  height: 100px;
  width: 100%;
  margin-top: 140px;
  
}

#footerContainer {
  margin: 0 auto 0;
  width: 960px;
  font-size: 12px;
  color: #ddd;
  padding-top: 20px;
  position: relative;
}


#footerContainer p {
  margin: 8px 0 8px;
}
#footerContainer a {
  color: #ddd;
  text-decoration: none;
}
#footerContainer a:hover {
  text-decoration: underline;
}

form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #fff;
border:1px solid #ddd;
color: #666;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;

}

wolfcry911

jesb, one of the first things to do when troubleshooting is to run your code (both html and css) through a validator. This will point out any errors that you have.

Your posted html has 8 errors, all easy to correct, and one directly relating to the problem. You have an extra closing div tag (in the header area) which closes the container too soon.

You have also been trying to correct positioning with margins (negative and normal) which, once the html is cleaned up, is having an effect on numerous elements. So, you may need to back-track a bit, changing or eliminating those margins.

You have an extraneous clearing div (which I think was recommended above) - not only is this not needed, but you don't even have a class addressing it in the css.

The css has a missing closing brace after the textarea selector rendering the #footer ruleset useless.

jesb

O.k, so I managed to finally see the footer take place. Still having a problem with getting the image to appear though. I've tested it by using color instead and that comes up fine and I can clearly see a footer now, so that's good. But still no image will appear that I saved.

I'm guessing this has something to do with this error.

Parse Error (images/footer.jpg);

I don't know what the issue is with this. The error is kind of vague for a noob like me.

I'm going through the validator and cleaning it up like you suggest. But there some things I'm a little confused about that brings up errors.

I'm told that ul does not belong possibly because I have inline elements with block elements. But if a UL is a block element, and anchor tag is a inline element, than how do we make lists into links? I guess I'm confused on why I cant have lists with an a tag, putting a tags with lists seem to be a common thing on the web, so what exactly do they mean by the error.

Error: element ul not allowed here; possible cause is an inline element containing a block-level element

Also I get a lot of errors for webkit radius, shadow box, ect. Are these newer properties that come out as errors and should they be ignored?

You mentioned eliminating margins, but it's those margins I used that allowed me to put my layout together where I want certain things. I tried many different properties and this seemed to of what worked. Taking out all these will surely mess it all up. But if there is an easier way of doing it perhaps I should.

Thanks to those who have helped.

virtual

Close the space between url and the bracket on this line and your footer image will show:
url (/images/footer.jpg)

Lines like these are wrong

<div id="twitter">
  <li><a href="#"><span><img src="images/twitter.png" alt="twitter" /></span></a></li>
  </div>

You are missing the ul tags - like this

<div id="twitter">
<ul>
<li><a href="#"><span><img src="images/twitter.png" alt="twitter" /></span></a></li>
</ul>
</div>

jesb

Thanks so much for all your help. :) Everything is working great, and fully validated other than 8 errors coming from css due to some stuff like webkit radius and box shadow that I assume is just not being recognized?

virtual

If you are using webkit and moz CSS3, they are browser specific and do not validate, but don't worry about it. You do realize however that this code will not display in IE?

jesb

Yeah that's fine, as long as it doesn't break up the look of my page in IE I don't mind.

jesb

Well so much from being free and clear. It seems my navigation and 3 columns move as you minimize the page via the ctrl and -. It's doesn't stay within my container. What do you think would cause that to happen with the code that I provided?

virtual

Please post your corrected code, there are too many errors in the previously posted code.

jesb

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>

<head>
<title>
website
</title>



<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div  id="container">




<div id="header">



	<h1><a href="#"><img src="images/logo.png"  alt="logo" /></a></h1>
	  </div>
</div>
<!-- end of header -->



<div id="nav">
  <ul>
	<li class="active"><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>services</span></a></li>
	<li><a href="#"><span>gallery</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Blog</span></a></li>
	<li><a href="#"><span>Contact Me</span></a></li>

  </ul>
</div>



<!-- end of nav -->





<div id="featured">
  <ul>
	<li class="ss1"><img src="images/featured.jpg" alt="featured" /><a href=""></a></li>
  </ul>

  <form id="quote" action="#" method="post">
	<h2></h2>

	  <label>Your Name:</label>
	  <input type="text" name="Full Name" />
	  <label>Your Email:</label>
	  <input type="text" name="Email" />
	  <label>Comments:</label>
	  <textarea cols="1" rows="1"></textarea>
	  <input class="btn" type="image" src="images/submit.png"/>

  </form>
</div>





<div id="content">

<div id="twitter">
<ul>
  <li><a href="#"><span><img src="images/twitter-bird.png" alt="twitter" /></span></a></li>
  </ul>
  </div>
  
  

<img src="images/sign.png" alt="sign" />

</div>

  
 
 <div id="facebook">
  <ul>
  <li><a href="#"><span><img src="images/facebook-icon.png" alt="facebook" /></span></a></li>
  </ul>
  </div>



  <div class="col">
	<h2>About <span>Me</span></h2>
	<img src="images/portrait.jpg" alt="about me" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  </p>

  </div>
  <div class="col noMargin">
	<h2>My <span>Services</span></h2>
	<img src="images/services.png"  alt="services i offer" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

  </div>
  <div class="col noMargin fr">
	<h2>My <span> Tools</span></h2>
	<img src="images/tools.png" alt="tools" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

  </div>
</div>
<div class="clear"></div>

<a href="#"><span></span></a>



	
	
	<div id="footer">
  <div id="footerContainer">
	<p>Copyright &copy; 2011 Productive Web Soutions | <a href="#">Privacy Policy</a></p>
	<p>
	  <a href="#">Home</a> /
	  <a href="#">About Jesmond Borg</a> /
	  <a href="#"> Services</a> /
	  <a href="#">Portfolio</a> /
	  <a href="#">Blog</a> /
	  <a href="#">Contact Me</a>
	</p>
	<form id="newsletter" action="#" method="post">
	  <label>Enter your email to subscribe for  RSS Updates</label>
	  <input type="text" class="textBox" />
	  <input class="btn" type="image" src="images/subscripe-button.png"/>
	</form>
  </div>
</div>
	
	
	
	
	






  
  
<!-- end of content -->


 
 

</body>
</html>

css

/* CSS Reset */
* { margin: 0 auto; padding: 0;  
   outline: 0;
   border:none;
   list-style-type: none;
   
   
   
  }

body {
  background:url(images/bg.jpg) repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  
  
  
}

#container {
  width: 960px;
  margin: 0 auto;
}

#header {
  position:relative;
  width: 100%;
  bottom: 6px;
  
}

#header h1 {
  
  float:left;
  width:365px;
  height:115px;
  margin-top: 35px;
}

#header h1 a {
 
  height: 100%;
  width: 100%;
}
 #header ul li h6 {
  font-size: 11px;
}

#nav {
  clear: both;
  height: 30px;
  width: 100%;
}
#nav ul {
  
  position: absolute;
  right: 180px;
  top: 20px;
  
}

#nav ul li {
  display: inline;
  float: left;
}


#nav ul li a {
  color: white;
  display: inline;
  text-decoration: none;
  font-size: 16px;
  font-weight: normal;
  font-family: calibri, georgia, garamond, arial;
  text-transform: uppercase;
  text-align: right;
  float: left;
  padding: 10px;
  
  
}

#nav li a span {
  
  
  line-height: 28px;
  height: 100%;
  
}

#nav li a:hover, #nav li {
  
  color: #ffc000;
  cursor: pointer;
  text-decoration: none;
}
 
 #featured  {
  
  padding: 10px;
  height: 340px;
  width: 940px;
  border:1px dashed;
  color: #ffe5c4; 
  background-color: #562e00;
  
  
}
#featured ul {
  
}

#featured ul li {
  float: left;
  display:block;
  width: 630px;
}

#featured ul li a {
  display: block;
  height: 350px;
}


#featured ul li.ss1 img a {
 background: url(/images/featured.jpg) 
 
 }
 
 
 
 
 
form#quote {
  background: #ce9426;
  
  padding: 20px;
  float: right;
  width: 260px;
  height: 300px;
}

form#quote h2 {
  font-family:  Trebuchet, Arial, Helvetica, sans-serif;
  color: black;
  font-size: 12px;
  
 }



form#quote input, form#quote textarea  {
  background: url(images/noise.jpg);
  color: white;
  font: 12px Arial, Helvetica, sans-serif;
  margin: 1px 10px 8px 2px;
  padding: 10px;
  width: 240px;
  line-height:3px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: 0px 4px 0 -6px  #c4c4c4;
  -moz-box-shadow:inset 0 0 6px #7a7a7a;
   -webkit-box-shadow:inset 0 0 6px #7a7a7a;
   box-shadow:inset 0 0 6px #7a7a7a;
   resize:  none;
  
}
  
  
  

form#quote textarea {
  
  
  
}

form#quote input.btn {
  width: auto;
  border: none;
  padding: 1px;
  margin-top: 0px;
}

#content {
 
  
  font-size: 12px;

  list-style: none;
  
}
#content .col {
  float: right;
  width: 258px;
  background: url(./images/col-bg.jpg) repeat-x;
  height: 193px;
  border: 1px solid #CCC;
  padding: 10px;
  margin-right: 830px;
  margin-top: -225px;
  
  
}
#content .col h2 {
  font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #b47825;
  text-decoration: none;
  
}
#content .col h2 span {
  color: #2f2f2f;

}


#content .col img {
  border: none;  
  padding: 2px;
  float: right;

}

  
  

#content .col p {
  
  line-height: 17px;
}

#content .col.noMargin {
  
  margin-right: 510px;
  
  
}

#content .col.fr {
 
  
  margin-right: 190px;
  margin-top: -225px;
  
}
  
#twitter  {

float:right;
position: absolute;

}




#facebook {

float:right;
position: relative;
margin-right: 184px;
margin-top: -597px;
}
  


textarea {
width:  200px;
max-width:  240px;
min-width:  240px;
height:  200px;
min-height:  45px;
max-height:  45px;
}


#footer {
  clear: both;
  background: url(images/footer.jpg);
  height: 100px;
  width: 100%;
  margin-top: 40px;
}

#footerContainer {
  margin: 0px auto 0;
  width: 960px;
  font-size: 12px;
  color: #ddd;
  padding-top: 20px;
  position: relative;
}

#footerContainer p {
  margin: 8px 0 8px;
}
#footerContainer a {
  color: #ddd;
  text-decoration: none;
}
#footerContainer a:hover {
  text-decoration: underline;
}
 
  
 
form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #ffebd5;
border:1px solid #ddd;
color: black;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

form#newsletter input.btn {
  width: auto;
  border: none;
  padding: 0;
  margin-left: 3px;
  }

jesb

Anybody have any idea?

yashar

Hello,
footer is the last div and box on the bottom of the website, also the div id footer should be outside and container should be inside the div id footer and everything should be inside the container,as well as take out clear both from div footer, and check your html page and css page for any issues or mistakes.

jesb

Taking out clear both; from footer eliminates my footer all together creating more problems pushing my footer content into the main background. And everything is in my main container div which is the main container of the css. Shouldn't all my other divs stay within my container and not move when you zoom or zoom out the window?

chrisburton

The last I checked, I think I saw the container div closed after the header. Could be wrong.

jesb

Well I managed to fix my nav and my columns from moving when you zoom in and out by changing my footer container to relative instead of absolute. But now my footer is keeping the same pixels of the container. I want my footer to extend across the screen just as my main background does. I tried the repeat-x like my background image but that's not working.

Any ideas?

jesb

Nevermind, figured it all out. I just have to get my head around some of the basic principles of html and css and I'll avoid these issues.

Basically other div elements were not closed within my container which was being ignored and not staying in my container.

Consider this solved.

Thanks again guys. :)

chrisburton

Remember whenever you have issues that you can't figure out, validating is a great resource for troubleshooting itself.

treehouse : what would you like to learn today?

Forums

What would all the possible reasons be why your footer wont show up?