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 CSS Basics (2014) Getting Started with CSS CSS Basics Overview

Chenglu Li
Chenglu Li
1,380 Points
Posted by Chenglu Li
Chenglu Li
1,380 Points

How could I align this <nav> part with the picture horizontally? And the text in the nav is aligned to the right.

I am both learning html, css and axure, and I tried to make a webpage as designed in the axure, but was stuck for the layout. I hope to make the <nav> part align with the logo picture (id "himage") horizontally while the texts in the navigation are aligned to the right. But the problem is 1. the <nav> is always a little lower than the picture, and I do not know how to higher nav with the picture staying the same. 2. I do not know how to control properly the right and left margin of the navigation to make it stay at the right side. I wish I could show you the picture, but it seems I cannot upload pictures here?

Any help would be really appreciated! Thank you

Here is my code in HTML:

<header>
  <img src="image/SAMOCA_logo_header.png" id="himage">
  <nav>
    <h1>home</h1>
    <h1>collection</h1>
    <h1>about</h1>
    <h1>ask us</h1>
</nav>
</header>

And this is my CSS code:

header{ border: solid red; margin-bottom: 20px; }

nav{ display: inline-block; border: solid red; text-align: right; padding: 0 30px 0 30px; margin-left: 202px; }

himage{

border: solid red; }

h1{ display: inline; border: solid red; margin:20px; padding:10px 10px 10px 10px; }

2 Answers

Barry Mulrooney
Barry Mulrooney
13,011 Points
Barry Mulrooney
Barry Mulrooney
13,011 Points

You shouldn't us h1 tags for menu items it isn't correct semantically.

generally they are structured with unordered lists these days.

h1 tags are for headline text only. Here is a basic example of the structure of a menu using floats.

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

I'd suggest you go through the basic html courses again on treehouse as you've some of the fundamental concepts wrong.

best of luck

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

I think this will work but I haven't tested:

#himage,
nav {
    vertical-align:middle;
    display:inline-block;
}