how can I use the style tag to alter a link within a nav tag?

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?

Dunhamzzz · Accepted Answer · 2012-09-05T10:20:50.163

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.

edited Sep 05 '12 at 10:20

answered Sep 05 '12 at 10:06

Dunhamzzz

14,682
4
50
74

Or change your CSS to reference `#l1` instead of `.l1` – Robin Winslow Sep 05 '12 at 10:09
@RobinWinslow that would be invalid as there IDs are supposed to be unique. – Dunhamzzz Sep 05 '12 at 10:11
Thanks!! I'm not entirely sure what 'class' means in terms of what is going on under the code, in this case. Is it inefficient/badly organized to use classes this way? – abcooper Sep 05 '12 at 10:16
@abcooper class functions the same as ID really, it's just ID is supposed to be unique. This use of classes is fine as long as you don't use the same class name else where, personally I would change the class name to something more meaningful like `nav-item` – Dunhamzzz Sep 05 '12 at 10:19
yeah, they're more meaningful in my code, I just wanted them unrecognizable on stackoverflow, on the miniscule chance that my boss might come across it and wonder why his new employee does not already know how to do this. Thanks so much for the clarification - I was sort of leery of using class because I was associating it with its function in object oriented programming – abcooper Sep 05 '12 at 10:22
@Dunhamzzz in this snippet of HTML, `l1` *is* unique, so fine as an ID. Except that I do believe you shouldn't use IDs in CSS selectors (see http://csslint.net/about.html) - I only mentioned the ID solution because that was how the OP originally wrote the markup. – Robin Winslow Sep 05 '12 at 10:23

score 0 · Answer 2 · answered Sep 05 '12 at 10:08

0

Your HTML5 systax is wrong..

<nav>
<ul>
<li><a href="#">LINK<a></li>
.....
</ul>
</nav>

and to aceess the li element, use

nav ul li a {
font-size:20px;
font-weight:bold;
position:relative;
top:XX;
left:XX;
}

answered Sep 05 '12 at 10:08

Sudip Pal

2,041
1
13
16

`nav ul li a` is extremely inefficient, as the browser will traverse the DOM for every single `` tag looking for `
`

Dunhamzzz

Sep 05 '12 at 10:13

you should keep your CSS selectors as short as possible: http://csswizardry.com/2012/05/keep-your-css-selectors-short/. `nav ul li a` is definitely overkill. – Robin Winslow Sep 05 '12 at 10:19

@Dunhamzzz your point is discussed here: http://css-tricks.com/efficiently-rendering-css/ but it also says "computers were way slower 10 years ago" and "I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS". Really worrying about CSS efficiency in today's browser is not necessary. – Robin Winslow Sep 05 '12 at 10:22

@Dunhamzzz I've asked a question about this: http://stackoverflow.com/questions/12279544/is-css-rendering-efficiency-an-issue-to-what-extent-can-bad-css-really-slow-dow – Robin Winslow Sep 05 '12 at 10:46

Ahsan Khurshid · Answer 3 · 2012-09-05T10:13:56.817

Solution 1:

HTML:

<nav>
    <a href="whatever.com/about/">About</a> 
    <a href="whatever.com/content/">Content</a>
    <a href="whatever.com/history/">History</a>
    <a href="yabidu.com/Team/">Team</a> 
</nav>

CSS:

nav a {
    float: left;
    padding: 0 20px;
}

DEMO 1

Solution 2:

HTML:

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

CSS:

nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}     

nav ul li {
    float: left;
    padding: 0 20px;
    list-style: none;
}

DEMO 2

dyurkavets · Answer 4 · 2012-09-05T10:35:53.850

Element li not allowed as child of element nav in this context.

Contexts in which element li may be used:

inside ol elements.
inside ul elements.
inside menu elements

HTML:

<nav>
    <ul>
        <li><a href="whatever.com/about/">About</a></li>
        <li><a href="whatever.com/about/">Content</a></li>
        <li><a href="whatever.com/about/">History</a></li>
        <li><a href="whatever.com/about/">Team</a></li>
    </ul>
</nav>

Don't use id's for styling elements (Use only where it is necessary).

Use css selectors:

nav ul li a { ... }

or if you interested to style only childs a in li element:

nav li > a { ... }

For display li elements inline you must add next style

nav li {
    display: inline-block;
    *display: inline; // fix for ie7
}

or float:left instead display:inline-block;

how can I use the style tag to alter a link within a nav tag?

4 Answers4