Click here to get back home

Horizontal CSS list, last entry right-aligned?
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Horizontal CSS list, last entry right-aligned? vulpes 04-11-2008
Posted by vulpes on April 11, 2008, 3:01 pm
Please log in for more thread options
 Hi,

I have a horizontal css list and I'd like its last item to be aligned
to the right end
of the space given to the list. I can separate it from the rest with
margin-left: 10em, but that's very error-prone (different resolutions)
and
just doesn't look that good.

Using align: right doesn't work. Using float: right almost works.
The item is then right-aligned, but it's not in the list anymore but
one
line under it.

Anyone with an answer?

Posted by Jonathan N. Little on April 11, 2008, 3:06 pm
Please log in for more thread options
 vulpes wrote:
> Hi,
>
> I have a horizontal css list and I'd like its last item to be aligned
> to the right end
> of the space given to the list. I can separate it from the rest with
> margin-left: 10em, but that's very error-prone (different resolutions)
> and
> just doesn't look that good.
>
> Using align: right doesn't work. Using float: right almost works.
> The item is then right-aligned, but it's not in the list anymore but
> one
> line under it.
>
> Anyone with an answer?

URL to what you are trying....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Posted by vulpes on April 11, 2008, 3:18 pm
Please log in for more thread options
> URL to what you are trying....

... is (or better said a minimal example)

http://www.cis.hut.fi/ntvuok/tmp/index.html

Posted by Jonathan N. Little on April 11, 2008, 4:42 pm
Please log in for more thread options
vulpes wrote:
>> URL to what you are trying....
>
> ... is (or better said a minimal example)
>
> http://www.cis.hut.fi/ntvuok/tmp/index.html

Not perfect, works in gecko and Opera. IE7 needs a tweak for your
border. Fails in IE6 but so does your original. Your attempt at XHTML
isn't helping if you wan IE on board...reasons much discussed here...

#navlist {
        background: #eee;
        position: relative;
        border-top: #ffa500 1px solid;
        border-bottom: #ffa500 1px solid;
        overflow: hidden; /* <- Add to contain floats */
}

#navlist li {
        display: block;         /* <- make floats to left */
        float: left;
}

#navlist li > a {
        color: black;
        text-decoration: none;
        padding: 0 1em 0 1em;
}

#navlist li.current > a {
        background: #ddd;
}

#navlist li > a:hover, #navlist li > a:focus {
        background: #d1e5fd;
}

#navlist li#rightAlign {
        float: right; /* <- make last float to right */
}


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Posted by vulpes on April 11, 2008, 4:58 pm
Please log in for more thread options
Wow, many thanks to you!
I'll probably look at IE compatibility later on. The
site'll be non-commercial so as far as I care IE users
can burn, but others in the team might have other
opinions...

Similar ThreadsPosted
Form field entry directs to diff URLs based on entry? April 29, 2006, 2:27 pm
Is it possible to keep this on the same horizontal? February 15, 2008, 1:33 pm
Is horizontal scrolling okay? December 28, 2004, 2:52 pm
Horizontal row of images... June 20, 2005, 10:04 am
Horizontal scroll to nowhere---why? October 23, 2007, 11:38 pm
Can't get the menu horizontal July 1, 2008, 4:59 pm
prevent horizontal scrolling February 5, 2008, 10:47 pm
Vertical and Horizontal Frames that Scroll Together October 7, 2004, 5:35 pm
Always turning off horizontal scrolling in an iframe January 23, 2005, 9:36 pm
Only Vertical Scroll bar no horizontal bars August 26, 2005, 3:44 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap