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 Alexia Cristinelli
Alexia Cristinelli
601 Points

logo beside h1 & h2 in the header

Hi guys, I can't find how to place my h1 and h2 text beside the logo in the header, float:left or float:right make the navigation move, and background-image doesn't seem to work :(

I have been following the instructions of "How to make a website" but I would like to change the design a little and add a logo. Take a look at my work : http://web-dtfviindww.treehouse-app.com/index.html (the logo is only in the index.html for the moment)

html :

<a href="index.html" id="intro">

    <a href="images/logoPCC.png"><img src="images/logoPCC.png" class="logo"></a>
    <h1 class="titre">Concept Party Coiff'</h1>
    <h2 class="bienvenue">Bienvenue sur le site de votre salon de coiffure</h2>
  </a>

Css :

.titre { font-family: 'Lobster', cursive; margin: 15px 0; font-size: 1.75em; font-weight:normal;
}

.bienvenue { font-family: 'Roboto', sans-serif; font-weight:100; margin: 15px 0; font-size: 1.50em; margin: -5px 0 0; font-weight: normal; }

.logo {

}

Please help !

7 Answers

Adam Moore
Adam Moore
21,956 Points

If you float your logo to the left, and then have your h1 and h2 set to display: block, it will put your logo beside both of the headings, with the headings on top of one another.

Floating an element places it left or right, in its area, and has the elements that come after it in the code essentially wrap around it. So, if your logo is at least the same or greater height as both of the h1 and h2 headings, then the headings will remain on the right side of the logo (instead of dropping down below it). I don't think that you will need to do anything with the nav to stay below it, as it'll probably already be down far enough to be below the logo. However, if your logo is really big, it might put the nav beside the logo, in which case you'll need to use clear: left for the nav.

Hope this helps!

Adam Moore
Adam Moore
21,956 Points

Also, if you were to set your h1 and h2 as display: inline-block, with the logo floated, that would make the h1 in the right place (because it's already going to be next to the logo), but it will put the h2 beside the h1 (placing it "inline" with the h1, assuming it has enough room to fit on the single line with the h1 and logo without having to wrap down to the next line).

Just clarifying why I suggested to use inline-block at first, and then am now suggesting to use "block".

Although, both h1 and h2 have a default setting of display: block, so you shouldn't have to set a display value for them in order to make it work.

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

You may have to set the display of your elements to something like "inline-block" to get them beside each other. Also, depending on the width of their container, they may push each other onto different lines if there isn't enough room for them to fit on a single line. If you are wanting part of the heading text to wrap, then you may have to set a specific width for each heading to fit into so that it doesn't stretch far enough to make it all jump down to the next line.

Alexia Cristinelli
Alexia Cristinelli
601 Points
Alexia Cristinelli
Alexia Cristinelli
601 Points

I just add the display and I have something like this now : http://web-dtfviindww.treehouse-app.com/ I have no idea which width I should set. And when I changed them the H1 didn't move.

header { float:left; margin:0 0 0px 0; padding: 5px 0 0 0; width:100%; }

intro {

text-align:center; margin: 0; }

.titre {

display:inline-block; font-family: 'Lobster', cursive; margin: 0px 0; font-size: 1.75em; font-weight:normal;
}

.bienvenue {

display:inline-block;

font-family: 'Roboto', sans-serif; font-weight:100; margin: 5px 0; font-size: 1.50em; margin: 0; font-weight: normal;

}

.logo { display:inline-block;

}

Thanks for the help anyways

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Are you wanting the h1 and h2 on the same line as the logo, and then the nav below it?

Alexia Cristinelli
Alexia Cristinelli
601 Points
Alexia Cristinelli
Alexia Cristinelli
601 Points

I would like to have the H1 beside the logo and the h2 under the h1 and beside the logo too, h1 and h2 in the middle of the header and at the middle level of the logo, but the logo stay at the left of the header (I don't know if my english is understandable, sorry) and the nav below yes,

thank you for your help and patience

Alexia Cristinelli
Alexia Cristinelli
601 Points
Alexia Cristinelli
Alexia Cristinelli
601 Points

Thanks a lot Adam, it works, even if I still have a few difficulties to center the text in the middle, the result is cool, and thank you for your explanation too ! If you want to see the result : http://web-dtfviindww.treehouse-app.com/index.html

I guess I have to play with the margin now ?

Salut !

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

It's looking great! :) I hope it works out well for you!

If you are looking to center the text in the middle, you may have to work with margins, padding, or even putting your headings into their own separate div(s). Just keep messing around with it and I'm sure you'll get it exactly how you like it. :)

Cheers!