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 Eric Lindsay on April 12, 2008, 4:20 pm
Please log in for more thread options
 In article

> 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?

Float right inline can be made to work if the rightmost item actually
comes first in the list. It is taken out of the flow. There were some
positioning issues with Firefox.

See experiment http://ericlindsay.com/palmtop/palmnote.htm

--
http://www.ericlindsay.com

Posted by dorayme on April 12, 2008, 5:55 pm
Please log in for more thread options
 In article

> Float right inline can be made to work if the rightmost item actually
> comes first in the list. It is taken out of the flow. There were some
> positioning issues with Firefox.
>
> See experiment http://ericlindsay.com/palmtop/palmnote.htm

Yes, there is a difference with FF. Mentioned in these ngs from time to
time. Perhaps also see:

<http://netweaver.com.au/floatHouse/page5.html>

There are links to some appendices on this and, there, find further
links to screenshots for different browsers.

BTW, floats are always "taken out of the flow".

--
dorayme

Posted by vulpes on April 13, 2008, 1:30 pm
Please log in for more thread options
Actually I now found an even better solution myself. The problem with
Jonathan's solution was that it then eventually prevented any submenus
from showing. The following solutions works around this and should
be quite usable across browsers:

#navlist {
        background: #eee;
        position: relative;
        border-top: #ffa500 1px solid;
        border-bottom: #ffa500 1px solid;
}

#navlist li {
        display: inline; /* Make list horizontal */
        list-style-type: none;
}

#navlist li > a {
        color: black;
        text-decoration: none;
        padding: 0 1em 0 1em; /* Make entries 'airy' */
}

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

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

#navlist li#rightAlign {
        position: absolute;
        right: 0; /* Fit the entry right next to the end. */
}



/* Don't show any submenus for pages that don't have submenus. */
#navlist ul {
        display: none;
}

/* The current submenu is shown. */
ul#currentSubnav {
        display: block;
        font-size: 90%;
        position: absolute; /* Fit the submenu to the left border */
        left: 0;
        right: 0; /* Make the submenu span the whole width */
        background: #ddd;
        border-top: #ffa500 1px solid;
        border-bottom: #ffa500 1px solid;
}

ul#currentSubnav li.current > a {
        background: #bbb;
}

ul#currentSubnav li > a:hover, ul#currentSubnav li > a:focus {
        background: #fde5d1;
}

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