Help Styling HTML5 Navigation

Hey guys!

I'm trying to style my navigation menu using HTML5 tags and references only. The hard part, however, is wrapping my head around how to translate the old way of navigation styling to the newer way of doing it. Example:

Old Styling Syntax:

<nav>
<ul>
<li></li>
...etc...
</ul>
</nav>


New Styling Syntax:

<nav>
<a href="#">TEXT</a>
</nav>


Although I know that it's perfectly acceptable to use a "ul" inside of the "nav" element, I don't want to. Needless to say that because of that I'm having a couple issues that I can't quite figure out.

How do I place my navigation text on 2 lines?
Where ("nav" or "nav a") do I place my line-height and other "li" info?
Is giving the menu links a set width and height as simple as just declaring them when used in this context?
How do I place my links at the bottom of the "nav" element container (margin did nothing for me)?


My code thus far:

<nav>
<a href="#">OUR COMPANY</a>
<a href="#">OUR WINES</a>
<a href="#">FOOD PAIRINGS</a>
<a href="#">SHOP ONLINE</a>
<a href="#">CONTACT US</a>
</nav>

nav {
width: 960px;
height: 90px;
text-align: center;
background: #552d97 url('images/bg-nav.png') no-repeat center top;
margin: 0;
padding: 0;
}

nav a {
color: #000000;
background: #ffffff;
text-decoration: none;
margin: 0px;
padding: 13px 13px;
}

So far I've gotten this far, but still need some help for centering the text vertically and also spacing. I wanted the boxes to be 90 pixels wide, but line-height seems to make the text break out of the boxes due to there being 2 lines of text.


<nav>
<a href="#">OUR COMPANY</a>
<a href="#">OUR WINES</a>
<a href="#">FOOD PAIRINGS</a>
<a href="#">SHOP ONLINE</a>
<a href="#">CONTACT US</a>
</nav>

nav {
width: 960px;
height: 90px;
text-align: center;
background: #552d97 url('images/bg-nav.png') no-repeat center top;
margin: 0;
padding: 0;
}

nav a {
float: left;
width: 108px;
height: 38px;
line-height: 40px;
color: #000000;
background: #ffffff;
text-decoration: none;
border: 1px solid #660033;
margin: 50px 0;
padding: 0;
}

Good morning Psionicsin,
Maybe this would be easier if contained in a ul?

Try this -
nav {
width: 960px;
text-align: center;
background: #552d97 url('images/bg-nav.png') no-repeat center top;
overflow: auto;
}

nav a {
height: 38px;
margin: 50px 0 0;
padding: 5px 10px;
display: inline-block;
color: #000000;
background: #ffffff;
text-decoration: none;
text-align: center;
border: 1px solid #660033;
}

Your margin did not work originally because of collasping margins (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html).

Good morning Psionicsin,
Maybe this would be easier if contained in a ul?

Good afternoon. I know that a "ul" would have been more than sufficient lol. But one thing that has always bugged me since the mass use of HTML5 started is that we have a cool new "Nav" element for navigation...but it SEEMED to not really be much use (in it's current form).

People are still using lists inside of them and, in my personal opinion, you might as well just be using a div if that's the case. So I went searching on W3S hoping to find some further clarification when I found this example: http://www.w3schools.com/html5/tag_nav.asp

After seeing this I decided to make a mock-site for a fictional wine company, and using JUST this navigation template to see how far and fancy I could get with styling it. Think of it sort of as a self-challenge? I dunno.

<nav>
<a href="#">Menu Element</a>
<a href="#">Menu Element</a>
<a href="#">Menu Element</a>
<a href="#">Menu Element</a>
<a href="#">Menu Element</a>
</nav>


As it turns out you can get pretty far. That and, in my opinion, I think it's nice to look at your CSS and not see 9-10 ugly ul, li, li a. I always hated that and always got lost in my coding after a while. Having just "nav" and "nav a" is far more prettier :)