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 Mike Me
Mike Me
5,148 Points

How to put Logo on the header ?

I just want to nest logo which is an image file on left corner of the header but have no idea how to accomplish this task. Please help.

Lewis Gilbert
Lewis Gilbert
2,082 Points

if you send your code someone will be able to help you further. There are many ways to put the logo at the top left corner of a header

2 Answers

Lewis Gilbert
Lewis Gilbert
2,082 Points
Lewis Gilbert
Lewis Gilbert
2,082 Points

//HTML <div id="Header"> <div id ="Logo"><img src="http://vignette1.wikia.nocookie.net/logopedia/images/3/38/Nvidia_logo.png/revision/latest?cb=20120829072950" alt="Smiley face" height="80" width="80"></div> <a href="#" class="item"><div>Home</div></a> <a href="#" class="item"><div>Archive</div></a> <a href="#" class="item"><div>Design</div></a> <a href="#" class="item"><div>Contact</div></a> </div>

==============================================================================

//CSS

Header{

display:flex;
height:100px;
padding:20px 50px 10px 75px;
align-items:flex-end;
font-family:Arial;

} .item-1{ margin-right:auto; align-self:center; }

Logo{

margin-right:auto;
align-self:center;

}

Lewis Gilbert
Lewis Gilbert
2,082 Points

This is a flexbox layout also you need to finish off the html segment with a closing div

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,802 Points

Like Lewis said there are several way to put a graphic in your header div and seeing your code we would be able to figure out the best way to do it for you.

Lewis Gilbert give you one example using flex box but regardless of what layout style you are using the two simplest methods are either setting you logo as the background of the div or placing you logo into the html. The basic difference between the two is this.

If you place it directly into your html it is part of your content flow, meaning you can move around with floats, you are able to apply transitions and other effects, etc....

If you use it as your background image you can only background properties on it.