Question

I’m a newbie to html and trying to figure it out through online tutorials. I have a menubar that goes horizontally across the top of the page. Right now I have the menubar in a div tag, and within the contents, I have

<nav>
 <li>
 <a id="l1" href="whatever.com/about/">About</a>
 <a id="l2" href="whatever.com/content/">Content</a>
 <a id="l3" href="whatever.com/history/">History</a>
 <a id="l4" href="whatever.com/Team/">Team</a> 
 </li>
</nav>  

I want to position the links and change the font, and I was under the impression that I would do so using a format along the lines of:

<style>
.l1
{
position:relative;
top:5px;
right:30px;
}
</style>

However, that does not seem to be working, and I can’t find any helpful tutorials. Can anyone give me advice on how to appropriately format & style my links?

Answer 1

The dot notation you’ve used in CSS is for classes, not IDs, this should work:

<nav>
 <ul>
  <li><a class="l1" href="whatever.com/about/">About</a></li>
  <li><a class="l2" href="whatever.com/content/">Content</a></li>
  <li><a class="l3" href="whatever.com/history/">History</a></li>
  <li><a class="l4" href="yabidu.com/Team/">Team</a></li>
 </ul>
</nav>  

ID’s id="foo" on an element are accessed in CSS with #foo, also they supposed to be completely unique, therefore no element IDs on a page should be the same. Classes on the other hand class="bar" are allowed to be used multiple times and are access in CSS using .bar.

You’ve also used invalid syntax, <li> (list items) are always supposed to be directly inside either <ul> (unordered list) or <ol> (ordered list), I have fixed your markup for you as well.