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 Phillip Elkins
.a{fill-rule:evenodd;}techdegree
Phillip Elkins
Front End Web Development Techdegree Student 14,875 Points

Help understanding how to build a specific menu in HTML and CSS

I need to build a menu:

  • Top Left logo
  • Top Right links
  • Main Menu underneath all

How would I code this in HTML and arrange it using CSS?

Example of menu: http://www.asu.edu/

This task is for school and have been working on it all week but have been struggling. I have to add jQuery elements to my site as well and it's all due Friday! :( if anyone can help with this I would be greatly appreciative.

I thought I had most of the HTML done but when adding the CSS I am lost. I don't know if my organization in the HTML is wrong or I am just not using the proper CSS element with my HTML

I have to nav tags:

  1. Top links
  2. Menu

I can't get the links in the top right corner of the page or my menu to move from the center. Should I make different header tags for each??

2 Answers

Jon Benson
Jon Benson
12,168 Points

You could still use the nav tag, in my example above, add the nav before the first div, and close it after the last.

Jon Benson
Jon Benson
12,168 Points
Jon Benson
Jon Benson
12,168 Points

Phillip,

If you use a div tag and give it a class or id, then you can individually or group style that div that you made.

All the best,

Jon

Jon Benson
Jon Benson
12,168 Points

As I got thinking about it, you could actually do something like:

<div class="first">
     <a href="#" id="first"></a>
     <a href="#" id="second"></a> 
</div>
<div class="second"> 
    <a href="#" id="third"></a>
    <a href="#" id="fourth"></a>
</div>

Depends on how much control you want!

Phillip Elkins
.a{fill-rule:evenodd;}techdegree
Phillip Elkins
Front End Web Development Techdegree Student 14,875 Points

So I wouldn't use the nav tag?