UL inline "tabbed" navigation aligned to the right?

[dms42]

Hello all!

I'm using a UL for navigation, but I want it to be aligned to the right side of the page. The rest of the code works great, I just can't figure out the alignment. Here's the basic HTML:

<div id="secondnav">
 <ul id="navlinks">
<li><a href="#.html">blandit</a></li>
<li><a href="#.html">aliquam</a></li>
<li><a href="#.html">lectus</a></li>
 </ul>
</div>

And here's the CSS:

.secondnav {
clear: left;
padding: 5px;
margin: 20px 0 0 0;
background: #fff;
}
#navlinks {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #606;
}
#navlinks li {
margin: 0; 
padding: 0;
display: inline;
list-style-type: none;
}
#navlinks a:link, #navlinks a:visited {
float: left;
font-size: 11px;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #96c;
}
#navlinks a:hover {
border-bottom: 4px solid #606;
padding-bottom: 2px;
background: #fff;
color: #606;
font-weight: bold;
}

Even though the LI is inline, I should be able to align the entire div to the right, shouldn't I? I've tried using TEXT-ALIGN: RIGHT in both the secondnav DIV and in the UL, but nothing seems to work.

Am I just asking for the impossible?

[vkaryl]

Well, I have this on a site right now. Seems to do what you want....

html -

<div class="smallBar">
<ul>
<li><a href="sample.html">Sample</a></li><li><a href="sample1.html">Sample One</a></li><li><a href="sample2.html">Sample Two</a></li><li><a href="sample3.html">Sample Three</a>
</li></ul>
</div>

this is the css for this section -

div.smallBar {background-color: #345836; color: #FFFFFF; padding-top:8px; padding-bottom:8px; padding-right:20px; text-align:right;}
div.smallBar a {border: none; color: #FFFFFF; text-decoration:none;}
div.smallBar a:hover {color: #7FFF00; border: none; text-decoration:none;}
div.smallBar ul {display:inline; padding:0; margin:0;}
div.smallBar li {display:inline; padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:0px; margin:0;}

the css file also includes the following, which may be necessary depending on your application -

html, body {font-size: 100%;}
body {background-color:#FFFFFF; color:#204631; font-family:"Times New Roman", Times, serif; text-decoration:none; text-align:center; margin:0; padding:0;}

[and I'm pretty sure I can tighten this up, but I haven't had the time. One of those things that gets handled when I retire....]

Anyway, works fine on the site in question, and validates....

[bgirl]

You've got "secondnav" as a class instead of an id...

<div id="secondnav">

.secondnav {}

It should be

#secondnav {}

Also try
#navlinks a:link, #navlinks a:visited {
float: right;
etc...

That seemed to shove things to the right.

[dms42]

Thanks y'all!

I fixed the ID vs CLASS issue and changed the display:inline to flaot:right and everything works as desired.

Thanks again,
Diane