navigation links

[amiw]

the code below is attempting to create navigation links down the left hand side. I've seen code that used span tags and span {display:block;} to force a link break between links. I've just used <br /> and put the links in a container div. I'd appreciate any feedback on where the code fails or succeeds?

<style type="text/css">

#sidebarnavigation {
position: absolute;
left: 2px;
top: 30px;
text-align: left;
padding-left: 2px;

#sidebarnavigation a {
color:#66C;
text-decoration:none;
}

</style>

<div id="sidebarnavigation">
<a href="/test1.asp"><br />
<a href="/test2.asp"><br />
<a href="/test3.asp"><br />
<a href="/test4.asp">
</div>

 

[ChrisHunt]

A nice way to style links is to use a <ul>. That way they still look reasonably good to people on text-only browsers without any CSS support (of whom there are a tiny, tiny number). Like this:

<ul id="sidebarnavigation">
<li><a href="/test1.asp>Test 1</a></li>
<li><a href="/test2.asp>Test 2</a></li>
<li><a href="/test3.asp>Test 3</a></li>
<li><a href="/test4.asp>Test 4</a></li>
</ul>

Your CSS changes slightly:

#sidebarnavigation {
  position: absolute;
  left: 2px;
  top: 30px;
  text-align: left;
  padding-left: 2px;
[b]  margin: 0;
  list-style: none;
}

#sidebarnavigation li {
  margin: 0;
  padding: 0;
  list-style: none;
}[/b]

#sidebarnavigation a {
  color:#66C;
  text-decoration:none;
}

I use this way of rendering menus on several of my sites, if you want to see an example.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Definitely!

For a list of links, use a list element!

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time