right align one item in left aligned list

[gulliver]

I'm using a style list to generate a horizontal navbar.

It's aligned left. I want to have the last item in the list right aligned - so it breaks away from the others.

Here's the code...

<div class="nav"><ul><li id="home"><a href="#" class="active" title="link title text">utenim</a></li><li id="contact"><a href="#" title="link title text">veniam</a></li><li id="externals"><a href="#" title="link title text">nostrud</a></li><li id="tools"><a href="#" title="link title text">quis</a></li><li id="xmlfeed"><a href="#" title="link title text">adminim</a></li><li id="error"><a href="link title text" title="link title text">exerc</a></span></li></ul></div>

I think I can do this with an inline style tag. My brain is fading and hence I'm stuck.

Help appreciated. please and thanks.

[BlobFisk]

Hi gulliver,

How about using a float?

[gulliver]

Thanks.

I'd struggled to get the code right... your suggestion prompted me to try this...

<div class="nav"><ul><li id="about"><a href="#" class="active" title="link title text">utenim</a></li><li id="contact"><a href="#" title="link title text">veniam</a></li><li id="externals"><a href="#" title="link title text">nostrud</a></li><li id="tools"><a href="#" title="link title text">quis</a></li><li id="xmlfeed"><a href="#" title="link title text">adminim</a></li><li id="error"><span style="float: right;"><a href="link title text" title="link title text">exerc</a></li></span></ul></div>

If that's likely to be a problem - or there's a better way, I'm happy to change.

Thanks.

[SuzyUK]

Hi gulliver..

if you want to float one of the items it will have to appear first in the list, if you leave it last in the list it will drop down a line.

Here is one in the Listutorial Site [css.maxdesign.com.au] which sounds like it would do what you want it too..

You shouldn't need to give the <li> a seperate class name just use it's existing ID

Suzy

[gulliver]

Thanks, S. Appreciated.

That fixes it for me.

There's a line in the code that I don't understand - and will appeciate some enlightenment...

It's...

* html #navlist li a { padding: 0 8px; }

As this immediately follows a similar declaration of
#navlist li a

I'm assuming it's a browser-specific hack? Presumably a variant of the tan hack to sort the IE box model issue? I'm confused though as to why it needs to be applied as there's no width specified.

[edited by: gulliver at 8:29 am (utc) on May 18, 2004]

[SuzyUK]

Hi Gulliver

Yes it's a Browser specific hack.. haven't checked this particular list in IE to see difference without it. I presume it's a Box Model/Border compensation as it's only a 1px adjustment to the bottom border. This rule:

* html #navlist li a { padding: 0 8px; }

it's the "Star HTML hack", fwiw .. and it overrides the (bolded) rule below for IE (Win & Mac) only..

#navlist li a
{
text-decoration: none;
border: 3px solid #000;
padding: 0 8px 1px 8px;
margin: 0 2px;
background-color: #FFF;
color: #000;
}

It will be design specific I presume, depending on your use of borders.. you may not need it in your design..

Suzy

[gulliver]

Thanks, again S.

I'd edited the earlier post and added that [Presumably a variant of the tan hack to sort the IE box model issue? I'm confused though as to why it needs to be applied as there's no width specified.] line before getting your reply.

It all makes sense - sort of... though I can't see why it should just be necessary. Whatever

I'm guessing that in turning of the borders I can use much simple code and shall experiment accordingly.

;-)
g