Re: How to overcome IE negative margin bug?
- From: "Greg Chapman" <greg.eastwalton@xxxxxxxxxx>
- Date: Wed, 6 Jul 2005 23:59:20 +0100
"Stevie D" <stevie@xxxxxxxxxxxxxxxxxxxxxx> wrote in message
news:b95oc1hishbjcm2mf63bnrmv2udjoegv9m@xxxxxxxxxx
>> Now I want to do is make the last of the these align to the right, rather
>> than be just the next option along the bar. Once I would have used a
>> table
>> and placed the last item in a second cell and aligned that. However, I
>> understand that I should be able to use CSS to achieve the same end. If
>> that is the case... How?
>
> A first suggestion would be
>
> ul#menu {display: block; background: blue; position: absolute; top: 0;
> left: 0; width: 100%; margin:0;}
> ul#menu li {float: left; padding: 5px; border: white 1px solid;}
> ul#menu li a {color: yellow;}
> ul#menu li#right {float: right;}
>
> <ul id="menu">
> <li><a href=...>First</a>
> <li><a href=...>Second</a>
> <li id="right"><a href=...>Third</a>
> <li><a href=...>Fourth</a>
> </ul>
>
> By doing it this way, you can have any one of the list items
> right-aligned, without changing the order of the list.
Ah! Silly me! For some reason I have a blind spot on "float" and never
think of it when I need it! This, indeed, should give me the tool I need!
I wouldn't have thought of a list either! Though I see I'll have to do
something to stop Mozilla placing unwanted bullets all over the place! :-)
Although, initially, I called it a "menu bar", it would be more accurate to
call it a "navigation bar" as it is repeated at intervals down fairly long
pages and provides a "Top" link to return users to the menu at the top of
the page. So in my case I guess I'll have to remove position absolute code?
Only in a handful of special cases will this repeated bar have options other
than or in addition to "Top". In my update of the site I plan to add an
additional fixed option to this bar, and this is the one I plan to be right
aligned.
> This declaration will affect all list items in <ul id="menu">,
> but not in other <ul>s. That way you don't need to define
> li.menu {...} and then specify <li class="menu"> for every list
> item in the menu. It is much less typing, much less to go wrong,
> and much easier to fix and to change.
Although I take your point about use of #id rather than class, in my case I
guess it is class that I will need because of the repetition of the bar.
The site, in its soon to be reconstructed state, is at:
http://www.waterwaysguides.co.uk
Any of the pages in the "Updates" section show examples of the bar, and the
option to be added is "Submit Update" as the route to that page on the site
is currently fairly well hidden, in the "More!" section :-) (The site's
last major rebuild was about three years ago and has been completely
neglected this year. I've masses of updates to be added that have been
received by e-mail as well as the few submitted via the Virgin "guestbook" -
that's another thing to be rebuild with the cgi space that I now have
available!)
--
Greg Chapman
http://www.waterwaysguides.co.uk
for updates to Nicholson, Imray and Pearsons Guides - and lots more!
.
- Follow-Ups:
- References:
- How to overcome IE negative margin bug?
- From: Greg Chapman
- Re: How to overcome IE negative margin bug?
- From: Stevie D
- Re: How to overcome IE negative margin bug?
- From: Greg Chapman
- Re: How to overcome IE negative margin bug?
- From: Stevie D
- How to overcome IE negative margin bug?
- Prev by Date: Re: Expanding menus
- Next by Date: Right Aligned Items on Menu Bar (WAS Re: How to overcome IE negative margin bug?)
- Previous by thread: Re: How to overcome IE negative margin bug?
- Next by thread: Right Aligned Items on Menu Bar (WAS Re: How to overcome IE negative margin bug?)
- Index(es):
Relevant Pages
|
