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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Nicu Paiu
Nicu Paiu
425 Points
Posted by Nicu Paiu
Nicu Paiu
425 Points

i have some problem with my footer !!! i cant get it on the bottom of the page

and heres my css

/****** culoare background pagina *****/

body {
background-color: #999;
}

/****** faca posibila editare culori linkurilor de referinta *****/
a {
text-decoration: none;
}
#wrapper{
  max-width: 940px;
  margin: 0 auto;
}
#logo {
  text-align: center;
  margin: 0;
}

a {
color: #fff
}


header {
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
  background: #6495ED;
  border-color: #599a68;
  float: left;

}

/****** navigation *****/

nav  a , nav a:visited {
color: #DEB887

}


    nav {
  background-color: #000;  
  list-style: none;
  text-align: center;
  padding: 10px


}

nav a.selected, nav a:hover {
color: #fff
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
display: inline-block;
}

nav a {
  font-weight:800;
  padding: 15px 10px;
}
/****** editare header style si text *****/

h1 {

font-family: 'Pacifico', cursive;
 font-weight: normal
 font-height: 0.8em;
  color: #000
}

h2{
  font-size: 0.75 em;
  margin : -5px 0 0;
  font-weight: normal;
  font-family: 'Indie Flower', cursive;
  color: #000
}

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}


/*****  photo editing *****/

img {
max-width: 100%;
}

#OrgyOfPhotos {
  margin: 0;
  padding: 0;
  list-style: none;

}

#OrgyOfPhotos li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #fff555;
  color: #000;
}

#OrgyOfPhotos li a p  {
margin: 0;  
padding: 5%;
font-size: 0.75em;
color: #000;
}

/***** :P *****/


#semne li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/***** Footer editing *****/

.scocialicon {
  width: 20px;
  height: 20px;
  margin: 0 5px;

}

6 Answers

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Nicu,

I can see a few issues straight off with your code:

You seem to miss a lot of equal signs '=' from your tags, such as 

<img src="img/faceboook.png" alt"Facebook" class="socialicon">
which should be
<img src="img/faceboook.png" alt="Facebook" class="socialicon">

and

<img src="img/twitter-icon.png" alt"Twitter" class="socialicon">
which should be
<img src="img/twitter-icon.png" alt="Twitter" class="socialicon">

You also have 

<img src="img/BetterLife1.jpg" alt+""> 
which should be 
<img src="img/BetterLife1.jpg" alt="">

and 

<link rel:"stylesheet" href="css/normalize.css">
which should be
<link rel="stylesheet" href="css/normalize.css">

Fix these and see if the issue persists.

Nicu Paiu
Nicu Paiu
425 Points
Nicu Paiu
Nicu Paiu
425 Points

okay here my html as well

Nicu Paiu
Nicu Paiu
425 Points
Nicu Paiu
Nicu Paiu
425 Points

<!DOCTYPE html> <html> <head> <meta Charset="utf-8"> <title>Lumea Lui Paul | Soon to be Awesome |</title> <link rel:"stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Indie+Flower|Pacifico|Anton' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/main.css">

    </head>
<body>
    <header>
  <a href="index.html" id="logo">
         <h1> Lumea Lui Paul</h1>
         <h2> Welcome </h2>
  </a>
  <nav ID="semne">
  <ul >
    <li><a href="index.html" class="selected">Bla bla bla</a></li>
    <li><a href="Contactme.html">Contact me</a></li>
    <li><a href="Asian Culture.html">Asian Culture</a></li>
    </ul>
  </nav>
 </header>
<div id="wrapper">
  <section>
    <ul id="OrgyOfPhotos">
    <li>
          <a Href="img/BetterLife1.jpg">
          <img src="img/BetterLife1.jpg" alt+""> 
          <p> Awesome life loading :D</p>
          </a>
      </li>
            <li>
          <a Href="img/HakunaMatata.jpg">
          <img src="img/HakunaMatata.jpg" alt=""> 
          <p> HaKunaMatata - it means no worries :p</p>
          </a>
      </li>
            <li>
          <a Href="img/DCLOGO.jpg">
          <img src="img/DCLOGO.jpg" alt=""> 
          <p> Awesome life loading :D</p>
          </a>
      </li>
            <li>
          <a Href="img/gamer.jpg">
          <img src="img/gamer.jpg" alt=""> 
          <p> i dont have a LIFE. I have many :D</p>
          </a>
      </li>
            <li>
          <a Href="img/JapanCulture.jpg">
          <img src="img/JapanCulture.jpg" alt=""> 
          <p> Awesome life loading :D</p>
          </a>
      </li>

    </ul>
</section>
<footer>
<a href="https://www.facebook.com/nick88paul"> <img src="img/faceboook.png" alt"Facebook" class="socialicon"></a>
<a href="https://www.twitter.com"> <img src="img/twitter-icon.png" alt"Twitter" class="socialicon"></a>  
    <p>&copy; Hey !!  i`m Paul and welcome to my Utopia</p>
</footer>

</div> </body> </html>

Nicu Paiu
Nicu Paiu
425 Points
Nicu Paiu
Nicu Paiu
425 Points

anddd nop the footer is still next to my images still after i corected those codes in css :/

Nicu Paiu
Nicu Paiu
425 Points
Nicu Paiu
Nicu Paiu
425 Points

ssooo any idees :))) it works only if i delete 1 of the photos in the page :))