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 M. Ramirez
M. Ramirez
1,421 Points

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
Glenn Foltz
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
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.

M. Ramirez
M. Ramirez
1,421 Points

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
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!

Joshua Plicque
Joshua Plicque
3,408 Points
Joshua Plicque
Joshua Plicque
3,408 Points

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>