Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Header Help!

So I'm using the Smells Like Bakin' template to make sample websites to practice with. However, I'm stuck trying to figure out how to get a header or logo above the navigation. http://oi39.tinypic.com/2q3notz.jpg The image above has been marked with the position where I would like the logo to go. How would I go above adding this?

2 Answers

Glenn Foltz
PLUS
Glenn Foltz
Courses Plus Student 8,178 Points

Right or wrong... here's an idea :) This is copied from my Smells Like Bakin HTML... Where is says "img src="#"" is where you need to put the image you want

<body>
    <div class="container clearfix">
        <div>
            <div class="grid_4">
                <img src="img/logo.gif" alt="Smells Like Bakin">
            </div>
            <div class="grid_8 omega">
                <img src="#" alt="PutLogoHere">
            </div><br>
            <div class="grid_8 omega">
                <ul class="nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Cupcakes &amp; Prices</a></li>
                    <li><a href="#">Locations</a></li>
                    <li class="last"><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
Glenn Foltz
Glenn Foltz
Courses Plus Student 8,178 Points

If you wanted to use text instead of an image use a heading tag, you could also add an id to it and style it in your css file.

I tried our the image and it works just fine, except it moves the nav down onto the image below. I'm assuming I fix the margins to bring them up?

Glenn Foltz
Glenn Foltz
Courses Plus Student 8,178 Points

im new to this too, but maybe put a br tag after the div that contains the three elements you are working with. lemme know if that works!

Try making a div that spans across the entire page and throw the image in there, centering it. This should push down the navigation under the logo.

Replace

<div class="grid_4">
    <img src="img/logo.gif" alt="Smells Like Bakin">
</div>

with

<div class="grid_12" align="center">
    <img src="img/logo.gif" alt="Smells Like Bakin">
</div>