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 Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

Footer and paragraph are displayed at the top.I want it to be displayed in the bottom

<!DOCTYPE html>
<html>
<head>

    <title>Aruns's Blog</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>">
    <link href='https://fonts.googleapis.com/css?family=Josefin+Sans|Jim+Nightshade' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/css/main1.css">
</head>
<body id="wrapper">
<header>
    <h1>Welcome To My Blog</h1>
    <nav>
        <ul>
            <li><a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/index3.html">HOME</a></li>
            <li><a href="#about">ABOUT ME</a></li>
            <li><a href="videos.html">VIDEOS</a></li>
            <li><a href="ImportantLink.html">IMPORTANT LINKS</a></li>
            <li><a href="mailto:arunbaskaran03@gmail.com?subject=Your%20Queries-&body=Hello,">Contact</a></li>
        </ul>
    </nav>
    <h2 id="about">ABOUT ME</h2>
    <p>This is Arun </p>
</header>
<footer>
    <a href="https://facebook.com/arun.karthik.7315"><img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/fb.png" alt="facebooklogo"></a>
</footer>
</body> 
</html>

#wrapper {
    background-color: #cbb9bb;
}

h1 {
    text-align: center;
    font-family: font-family: 'Josefin Sans', sans-serif;
    padding: 40px 30px 30px 20px;
    border: solid;
    border-top: 20px;
    border-color: #888;

}
h2 {
    font-family:'Jim Nightshade', cursive;

}
/* Creating style for unordered list*/

nav ul li {
    float: left;
    padding: 40px;
    font-family:'Jim Nightshade', cursive;
    color: #0000ff;
}

/* Applying Style for <a> indent */

nav ul li a {
    text-decoration: none;
    color: #0000ff;
    font-size: 30px;
}

nav ul li a , nav ul li a:hover{
    color: #ccc;
} 

footer {

    text-align: center;
    clear: both;
    padding-top: 50px;
    height: 0.75px;
    width: 0.75px;
}

1 Answer

Mary-Ann Burton
Mary-Ann Burton
15,834 Points
Mary-Ann Burton
Mary-Ann Burton
15,834 Points

One problem I see is that your <H2> and <P> tags are inside your header, so you should move them outside, like this...

</header>
      <h2 id="about">ABOUT ME</h2>
      <p>This is Arun </p>
<footer>

As well, in your CSS code, your nav ul li are floated left, forcing your paragraph to the right. You could change that using inline-block like this:

nav ul ul {
    float: center;
}

and you no longer need to <clear> the footer.

Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

Hi Mary-Ann,

I tried your inputs but still the same..