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

Posted by chris atkins
chris atkins
471 Points

why is my footer in the center of the page? why are my buttons not buttons any more?

i want my footer to actually be a footer. i think i have combined a whole heap of concepts i don't understand incorrectly and too soon. i also messed up my buttons somehow they are no longer buttons HTML:

<!DOCTYPE html> <html> <head lang="en"> <title>Mess around</title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width, inital-sace=1.0"> <link rel="stylesheet" href="css.css"> </head> <header class="header"> <h1 class="h1">mess around web page</h1>

  </header>
  <body class="body">
      <img class="img1" src="https://placeimg.com/400/400/tech/grayscale" alt="Random generated greyscale image">
      <p class="p1">Here i will mess around with html tags and css rules, elements etc. hopefully produce something cool</p>

    <footer>
    <a href="#" class="button">Home</a>
    <a href="#" class="button">About me</a>
    <a href="#" class="button">Contact</a>
    </footer>
  </body>
  </html>

</html>

CSS: .header { text-align: center; background-color: black; padding: 20px;

}

.h1 { color: white; font-size: 3.5em; font-weight: bolder; text-transform: uppercase; } .body { background-color: grey; color: #ff8c1a; } .img1 { padding: 10px; float: left; display: block; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; width: %50; }

ul { list-style-type: none; margin: 0; padding: 0; width: 60px; background-color: white; }

li { float: left;

}

a { color: gray; display: block; padding: 8px; background-color: #dddddd; }

}

.button { background-color: white; border: none; color: grey; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

chris atkins
chris atkins
471 Points

looks messy i don't know if i can include snapshots of the code in the editor instead?

chris atkins
chris atkins
471 Points

thank you

2 Answers

Peter Jonsson
Peter Jonsson
1,857 Points
Peter Jonsson
Peter Jonsson
1,857 Points

HTML Links - Syntax The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

in other words, i think it might be a good idea to take the class=button out of the <a>

Manpreet Singh
Manpreet Singh
2,689 Points
Manpreet Singh
Manpreet Singh
2,689 Points

Chris, if you look at the css, here button { background-color: white; border: none; color: grey; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }............... You have set text-align property to center. You need to change it to left, if you want your footer in the left. Or you can assign a new class to footer and then write css for it. Also, you can set border to solid black 10px, just to see the difference. i hope it helps.

chris atkins
chris atkins
471 Points

thankyou