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

CSS

Posted by Peter Hearne
Peter Hearne
6,803 Points

Gap at top of contact page *how to build a website *

heyy, at the top of my contact page on the how to build a website tutorials there is a gap just above the header, but its fine on the other pages? does anyone know what might be wrong or experienced the same thing?

Carsten Pleiser
Carsten Pleiser
8,386 Points

Hi Peter, can you please post the code here. This would be helpful.

Cheers, Carsten

7 Answers

Peter Hearne
Peter Hearne
6,803 Points
Peter Hearne
Peter Hearne
6,803 Points

'''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pete Hearne | CodePunk</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,700,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Pete Hearne</h1> <h2>This is my website. There are many like it, but this one is mine.</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">-Contact-</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p class="gen-info">Email is the best way to contact me way to contact me.</p> </section>

        <section>
            <h3>Contact Details</h3>
            <ul class="contact-info">
                <li class="phone"><a href="tel:555-6425">555-6425</a></li>
                <li class="mail"><a href="mailto:pete@example.com">pete@example.com</a></li>
                <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=peterhearne">@peterhearne</a></li>
            </ul>
        </section>

        <footer>
            <a href=""><img src="img/twitter-wrap.png" alt="Twitter" class="social-icon"></a>
            <a href=""><img src="img/facebook-wrap.png" alt="Facebook" class="social-icon"></a>
            <p>&copy; Pete Hearne | CodePunk 2014.</p>
        </footer>
</div>
</body>

</html> '''

Peter Hearne
Peter Hearne
6,803 Points
Peter Hearne
Peter Hearne
6,803 Points

thats the html, it kinda messed up when i posted it and now it looks strange, is it that you wanted to see?

Peter Hearne
Peter Hearne
6,803 Points
Peter Hearne
Peter Hearne
6,803 Points

''' <html> <head> <meta charset="utf-8"> <title>Pete Hearne | CodePunk</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,700,400italic|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Pete Hearne</h1> <h2>This is my website. There are many like it, but this one is mine.</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">-Contact-</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p class="gen-info">Email is the best way to contact me way to contact me.</p> </section>

        <section>
            <h3>Contact Details</h3>
            <ul class="contact-info">
                <li class="phone"><a href="tel:555-6425">555-6425</a></li>
                <li class="mail"><a href="mailto:pete@example.com">pete@example.com</a></li>
                <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=peterhearne">@peterhearne</a></li>
            </ul>
        </section>

        <footer>
            <a href=""><img src="img/twitter-wrap.png" alt="Twitter" class="social-icon"></a>
            <a href=""><img src="img/facebook-wrap.png" alt="Facebook" class="social-icon"></a>
            <p>&copy; Pete Hearne | CodePunk 2014.</p>
        </footer>
</div>
</body>

</html> '''

Carsten Pleiser
Carsten Pleiser
8,386 Points
Carsten Pleiser
Carsten Pleiser
8,386 Points

Have you applied any CSS? What's with the extra div at the end?

Peter Hearne
Peter Hearne
6,803 Points
Peter Hearne
Peter Hearne
6,803 Points

the div at the end closes the div with the ID wrapper, here is my css..

Peter Hearne
Peter Hearne
6,803 Points
Peter Hearne
Peter Hearne
6,803 Points

sorry about the multiple answers they are the same code just couldnt figure out how to make it all into one of them little box's so its compact

Peter Hearne
Peter Hearne
6,803 Points
Peter Hearne
Peter Hearne
6,803 Points

i have found that i did not declare the h3 tag in css so i done that and it seems to fix the problem.. BUT when i add a margin it makes the gap come back at the top of the header.. is there anything in the css you need to see?