UL navigation menu, right aligned

[Marek Mand]

How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>

(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:

------------------------------------------------------+
body: ul: MENUITEM_A MENUITEM_B MENUITEM_C
body text
-------------------------------------------------------

whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
3) the menu item order is visually exactly the same as in the
HTML code physically.
4) the maximum width of the menu is limited to the
UL element surrounding element

[Barbara de Zoete]

Marek Mand wrote:

How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>

(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:

Are you really asking us to write your code for you? Tell / show us what
you have accomplished so far by giving us an example of what your code
looks like at the moment. What is the URL to your (test) page?

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Lauri Raittila]

In article Marek Mand wrote:

How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div> whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
3) the menu item order is visually exactly the same as in the
HTML code physically.
4) the maximum width of the menu is limited to the
UL element surrounding element

You don't want list to be possible to be positioned absolutely anymore?
Then it is piece of cake:

ul {text-align:right;}
li {display:inline;}

<ul><li>Item1<li>Item2</ul>
<div class="content">Body text</div>

If you still want to position it absolutely, see my sig and add
..valikko {right:0;text-align:right;}

Or provide test url with your actual HTML.

To prevent wrapping of list items, you can use white-space:nowrap;

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Karl Smith]

Marek Mand <ca********@mail.ee> wrote:

How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>

(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:

------------------------------------------------------+
body: ul: MENUITEM_A MENUITEM_B MENUITEM_C
body text
-------------------------------------------------------

whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.

Oh for ****'s sake, this is getting right out of hand! There must have
been a hundred examples of lists being restyled into anything except
lists given in this group by now.

[1] Are you sure this "list" contains listular data?
[2] Have you searched the archive?
[3] Have you read the spec, specifically the "display" property?

No, no and no, right?

[Marek Mand]

Karl Smith wrote:

Oh for ****'s sake, this is getting right out of hand! There must have
been a hundred examples of lists being restyled into anything except
lists given in this group by now.
[1] Are you sure this "list" contains listular data?
This is navigation list. Contains the hyperlinks for sub-navigating the
related pages of the current content on the loaded page.
That classifies listural enough for me.
[2] Have you searched the archive?
Yes.
Search "right aligned navigation list" in google groups
http://groups.google.com/groups?as_q...&num=100&hl=en
brings only my thread.

Aswell as
"right aligned UL list"
http://groups.google.com/groups?num=...=Google+Search
bring me in two sights nothing that is about to solve it.

[3] Have you read the spec, specifically the "display" property?
No, no and no, right?

Yes. I have. But I dont see how it will help me to create crossbrowser
working navigation list that matches the above set requierments.

Moral of the story is:
<quote Karml Smith>
There must have been a hundred examples of lists being restyled into
anything except lists given in this group by now.
</quote>

if its true, then a single pointer to the subject handled would have
been very easy to be given by you to me and extremely helpful compared
to writing this posting with formal questions.

[Marek Mand]

Lauri Raittila wrote:

In article Marek Mand wrote:

whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
3) the menu item order is visually exactly the same as in the
HTML code physically.
4) the maximum width of the menu is limited to the
UL element surrounding element You don't want list to be possible to be positioned absolutely anymore?

With my expression of language I dont think I wanted to position them
absoloutely. What I meant with point 1. was that they should probably float.
Then it is piece of cake:
ul {text-align:right;}
li {display:inline;}
<ul><li>Item1<li>Item2</ul>
<div class="content">Body text</div>
If you still want to position it absolutely, see my sig and add
.valikko {right:0;text-align:right;}
No and again No.
It is not so simple.
Please see requirement 2.

I know from w3 specs and by practice that specified widths on an inline
level element have no impact.
Or provide test url with your actual HTML.
To prevent wrapping of list items, you can use white-space:nowrap;

Here it is it with Your code added that overdefines my list
alignments

http://www.hot.ee/idaliiga/testcases/listtest3.htm

The other version that are simpler is asn how it is meant to be work:
http://www.hot.ee/idaliiga/testcases..._eachother.htm

And works from others:
http://csce.uark.edu/~bss03/test2.html
whereby the last one renders as
http://www.hot.ee/idaliiga/testcases...iononmoz16.gif
in Mozilla 1.6.

So as I have asked in general newsgroup. the terms for asking
crosbrowser howto has now met Your criterias into which group to post.
Hope to hear about the crossbrowser solution soon.

--
Marek Mand // marekmand

[Marek Mand]

Barbara de Zoete wrote:

Marek Mand wrote:

How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:

Are you really asking us to write your code for you?
Tell / show us what
you have accomplished so far by giving us an example of what your code
looks like at the moment. What is the URL to your (test) page?

Thank You for Your interest,

Sort of yes,
but a exact pointer to the issue been solved would have been good enough
too.

as seen by my many days test and achivements below at URL

http://www.hot.ee/idaliiga/testcases..._eachother.htm

the problem lies in Opera7.x generation browsers which render the page
differently than Opera.6 and IE and Mozilla. Opera7 doesnt put the list
items next to eachother horizontally whereby Opera6 does.

I think it is a bug in Opera7's (incl Opera7.50PR1)

Regardless of its bug status I need to get it working on a non-personal
web site. I have searched google groups on this and visited lots of
"css-advocatoing" pages, but in their simpleness there is little hope to
be found smth useful on this subject.

--
Marek Mand // marekmand

[Barbara de Zoete]

Marek Mand wrote:

as seen by my many days test and achivements below at URL

http://www.hot.ee/idaliiga/testcases..._eachother.htm

the problem lies in Opera7.x generation browsers which render the page
differently than Opera.6 and IE and Mozilla. Opera7 doesnt put the list
items next to eachother horizontally whereby Opera6 does.

Get rid of the floats; try absolute positioning instead. I have one
horizontal menu that works in IE6, NS7, OP7. Only expect to meat
trouble, if too many menu items mean the menu gets to be to wide for the
viewport.

See (page is in Quirks mode btw, for a reason):
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_tabellen-stijlblad.html>
with
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_tabellen.css>
for the styling. Focus on all and anything inside and for 'div#menu'.

Play around with it a bit.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Marek Mand]

Barbara de Zoete wrote:

Get rid of the floats; try absolute positioning instead. I have one
horizontal menu that works in IE6, NS7, OP7. Only expect to meat
trouble, if too many menu items mean the menu gets to be to wide for the
viewport.
See (page is in Quirks mode btw, for a reason):
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_tabellen-stijlblad.html>
with
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_tabellen.css>
for the styling. Focus on all and anything inside and for 'div#menu'.
Play around with it a bit.

Thanks for providing Your own examples.

I looked at it and saw it uses display:inline for the list elements and
for the hyperlink elements.

I dont think one can apply widths to the elements that are inline.
That is Your examples arent as flexible as I would like to see them.
And absolutely positioning means that I could end up with situation,
where I have some text below absolutely positioned element.
This really cannot be so on a non-personal homepage.

[Barbara de Zoete]

Marek Mand wrote:

Barbara de Zoete wrote:

Get rid of the floats; try absolute positioning instead. I have one
horizontal menu that works in IE6, NS7, OP7. Only expect to meat
trouble, if too many menu items mean the menu gets to be to wide for
the viewport.
See (page is in Quirks mode btw, for a reason):
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_tabellen-stijlblad.html>
with
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_tabellen.css>
for the styling. Focus on all and anything inside and for 'div#menu'.
Play around with it a bit.

Thanks for providing Your own examples.

I looked at it and saw it uses display:inline for the list elements and
for the hyperlink elements.

I dont think one can apply widths to the elements that are inline.
That is Your examples arent as flexible as I would like to see them.
And absolutely positioning means that I could end up with situation,
where I have some text below absolutely positioned element.
This really cannot be so on a non-personal homepage.

If you position like

body {
padding-top:15%; }

div#menu {
position:absolute;
bottom:87%; }

div#content {
position:absolute;
top:15%; }

the content can not get underneath the menu. Beside that: inline
elements, you cannot set width on them, but you can on the children
inside them (I know, it's not nice, but it works). So

li {
display:inline; }

li a, li p {
display:block;
widht:7em /*or whatever suites your needs*/ }

If not, wel good luck with your quest than.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Els]

Marek Mand wrote:

How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>

(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:

------------------------------------------------------+
body: ul: MENUITEM_A MENUITEM_B MENUITEM_C
body text
-------------------------------------------------------

whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
As in when the window gets smaller there will be two or more
lines of items?
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
As in float right?
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
As in narrow: no padding left and right,
wider: padding left and right?
3) the menu item order is visually exactly the same as in the
HTML code physically.
Not backwards you mean?
4) the maximum width of the menu is limited to the
UL element surrounding element

As in a max width?

You mean like this then:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Marek's menu to the right...</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
*{margin:0;padding:0;}
html,body{width:99%;height:99%;}
.righthorizontal {
float:right;
width:70%;
text-align:right;
}
li{
display:inline;
margin-left:1em;
}
.one, .two, .three, .four {
padding-left:.2em;
padding-right:.2em;
background-color:yellow;
}
.five, .six {
padding-left:2em;
padding-right:2em;
background-color: pink;
}
</style>
</head>
<body>
<div class="righthorizontal">
<ul>
<li class="one"><a href="#">Home</a>
<li class="two"><a href="#">Information</a>
<li class="three"><a href="#">Contact</a>
<li class="four"><a href="#">Item&nbsp;4</a>
<li class="five"><a href="#">Item&nbsp;5</a>
<li class="six"><a href="#">Item&nbsp;6</a>
</ul>
</div>
<p>
Do you mean like this??
The div width is in percentage, because with a fixed width,
the menu will go off the left side of the screen when the
window is narrowed in Gecko browsers.
</p>
</body>
</html>

I think this does all 4 things you said, if not, please say
so :-)
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Marek Mand]

Barbara de Zoete wrote:

If you position like
body {padding-top:15%; }
div#menu {position:absolute;bottom:87%; }
div#content {position:absolute; top:15%; }
the content can not get underneath the menu.
Well that might be true although I dont understand 15+87 >100
but the menu really should be able to appear anywhere.
I would stay far away from anything that says "absolute".
Beside that: inline elements, you cannot set width on them,
but you can on the children
inside them (I know, it's not nice, but it works). So
li {display:inline; }
li a, li p {
display:block;
widht:7em /*or whatever suites your needs*/ }
If not, wel good luck with your quest than.

http://www.hot.ee/idaliiga/testcases/listtest3.htm

Well as of the hover effect is needed and by IE the only element that
can change its qualities on hover is A element, then the styling itsself
is indeed to be done on A elements.

But following Your logic I dont really understand how those now block
level A elements (to which the explicit with can be set if needed)
should be on the same line since they are block...
I dont think the A elements are horizontally next to eachother there ;D

[Barbara de Zoete]

Marek Mand wrote:

Barbara de Zoete wrote:

If you position like
body {padding-top:15%; }
div#menu {position:absolute;bottom:87%; }
div#content {position:absolute; top:15%; }
the content can not get underneath the menu.

Well that might be true although I dont understand 15+87 >100

Yeah, right. Now where does that 3% go? O boy! It is what keeps the menu
and the content separated!
but the menu really should be able to appear anywhere.
I would stay far away from anything that says "absolute".

Maybe you should just do some more reading on boxes
<http://www.w3.org/TR/2002/WD-CSS21-20020802/box.html> and positioning:
<http://www.w3.org/TR/2002/WD-CSS21-20020802/visuren.html> and
<http://www.w3.org/TR/2002/WD-CSS21-20020802/visudet.html>

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Marek Mand]

Els wrote:

Marek Mand wrote:

How to create a functional *flexible* UL-menu list
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:
whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible. As in when the window gets smaller there will be two or more lines of
items?

Yes, exactly that I meant.

1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL. As in float right?
Yes, exactly that I meant, that the UL is "floated" to the right.
If there will be more elements in UL than 1, then the UL would grow in
width from the right to the left.
3) the menu item order is visually exactly the same as in the
HTML code physically.

Not backwards you mean?

Yes, exactly.
That was set here due to that floating shouldnt affect the presentation
order of the items so that they end up beeing presented in inverse order
when compared to the order they have in HTML.

4) the maximum width of the menu is limited to the
UL element surrounding element

As in a max width?

I meant, that the menu items really shouldnt bleed over left side or
right side of the container element, they shoulnt partially overlap with
something. If a menu item fully doesnt fit on a horizontal "menu item
row" then it should be on the next horizontal "menu item row" below the
previous horizontal "menu item row":

-UL--------------------------------------------------
menuitemA menuitemB
verylongdoesntfintonpreviousMenuItemRow_menuItemC
menuitemD
-----------------------------------------------------

2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.

As in narrow: no padding left and right,
wider: padding left and right?

NO,
explicit individual widths should be also possible to set apart from
paddings. Please note the next answer:

I think this does all 4 things you said, if not, please say so :-)

Well, the most important part is missing:
functionality of setting widths to the menu "item" elements.

Very important here is to understand from practical side is that for
later possible mouseover-hover effects we must stylize A hyperlink
elements instead of the LI element itsself as the only tag which on
hovering is supported in the major browser - MSIE - is the A hyperlink tag.
That is - the widths of "menu elements" should be given to the
block-displayed A elements, so that the whole region the width is set to
would act as a hyperlink.
Initially I started out with the floats which wonderfully work
(but not in Opera7, whereby they do in Opera6)

http://www.hot.ee/idaliiga/testcases..._eachother.htm
This "This Page Is Valid XHTML 1.0 Strict"
http://www.hot.ee/idaliiga/testcases...st3_forels.htm

is advanced try of the above.
Sadly it doesnt work for Opera7.x (incl Opera7.50PR2)as it places the
"menu elements" vertcially next to eachother and not horizontally as
needed. It puts horizontally "menu items" in Mozilla 1.5 and 1.6 and IE6
and Opera6.05 though.

I havent yet seen an article on right aligned navigation menus that WORK
NOW and can be used on commercial webpages. Instead on those
css-advocating sites there is lot of DUPLICATED bullshit copied by other
same kind of css advocating pages declaring how good navigation lists are.
But nobody has gone through the work of explaining howto make them
flexible and right aligned working in majority browsers.
--
Marek Mand // marekmand

[Els]

Marek Mand wrote:

Els wrote:

Marek Mand wrote:

>> 4) the maximum width of the menu is limited to the
>> UL element surrounding element > As in a max width?

I meant, that the menu items really shouldnt bleed over left side or
right side of the container element, they shoulnt partially overlap with
something. If a menu item fully doesnt fit on a horizontal "menu item
row" then it should be on the next horizontal "menu item row" below the
previous horizontal "menu item row":

-UL--------------------------------------------------
menuitemA menuitemB
verylongdoesntfintonpreviousMenuItemRow_menuItemC
menuitemD
-----------------------------------------------------

That is done by using &nbsp; between words.

>> 2) menu item widths should be possible to be specified individually.
>> But in general the menu items should be as narrow as possible.

> As in narrow: no padding left and right,
> wider: padding left and right?

NO,
explicit individual widths should be also possible to set apart from
paddings. Please note the next answer:

Well, the most important part is missing:
functionality of setting widths to the menu "item" elements.

Very important here is to understand from practical side is that for
later possible mouseover-hover effects we must stylize A hyperlink
elements instead of the LI element itsself as the only tag which on
hovering is supported in the major browser - MSIE - is the A hyperlink tag.
That is - the widths of "menu elements" should be given to the
block-displayed A elements, so that the whole region the width is set to
would act as a hyperlink.

I understand you now.
A workaround can be simply made by adding enough &nbsp; to
the item to fill the 'box' of the item.

As in this example:
http://home.tiscali.nl/~elizabeth/Marek.html
http://www.hot.ee/idaliiga/testcases...st3_forels.htm

But after seeing this one, I think you want more than just
&nbsp; to fill up the box...

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Marek Mand]

Els wrote:

I understand you now.
=D
A workaround can be simply made by adding enough &nbsp; to the item to
fill the 'box' of the item.
As in this example:
http://home.tiscali.nl/~elizabeth/Marek.html
Thanks for Your time and caring,

but geeses, an &nbsp; is far far away from content and presentation
separation. If I change the font size.... etc.

And aligning with spacing is the first idicator of diletantism.
This shouldnt really be so.

I really dont understand whats the hype about CSS if a single menu even
cannot be done with it...

http://www.hot.ee/idaliiga/testcases...st3_forels.htm

But after seeing this one, I think you want more than just &nbsp; to
fill up the box...

Of course ;D
After going so much trouble I think CSS is bullshit.

[Els]

Marek Mand wrote:

After going so much trouble I think CSS is bullshit.

So you're saying you can do it without CSS then?
I find CSS quite useful, and I think it will get better in
future. So, you can't do exactly what you want (you could
use images of course) the way you want it.
But can you without CSS?

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Karl Smith]

Barbara de Zoete wrote:

Marek Mand wrote:

Barbara de Zoete wrote:

div#menu {position:absolute;bottom:87%; }
div#content {position:absolute; top:15%; }
the content can not get underneath the menu.

Well that might be true although I dont understand 15+87 >100

Yeah, right. Now where does that 3% go? O boy!

2%

[Marek Mand]

Els wrote:

Marek Mand wrote:

After going so much trouble I think CSS is bullshit. So you're saying you can do it without CSS then?

.... But can you without CSS?
no, probably not.
Using table inside a table cell whereby the items are in the table cells
of that table that is inside the table would do only if I assume I will
have "single row" menu items, and it will have nasty habit to make the
content area wider if there are too many "menu items"
I find CSS quite useful, and I think it will get better in future.
The most horrible thing about CSS is that look what version it is still
after the CSS1 got final in 1996 which means the initial work started
much earlier. The CSS2.1 still hasnt been approved in year 2004.
And if one thinks about CSS3... then wait ten years if it gets
implemented in major browsers.

If the CSS specs would have been prioritized and manned with more people
on them, rather than the piles of questionable XHTML specs, which do not
bring significant value to normal webpages, then...

And the most hortible thing is that people describe CSS as a powerful
tool that separates the content from presentation. Well *it really isnt
so*, as a CSS formatted document will still very very much depend on the
order of elements that the document contains of.
you can't do exactly what you want (you could use images of course) the
way you want it.

Yes, but the trouble with images is apart from textual readers, that
they cannot be modified easily without special programs.
What I want to know actually is whether Opera7.x behaviour is erroneous
and buygy here (as others do render it OK) and what would be the exact
CSS hack, that would apply only to Opera 7 generation. My searches till
now are beeing futile on that "opera7 hack only". So where can I find
OPera7 CSS hack?

[Els]

Marek Mand wrote:

What I want to know actually is whether Opera7.x behaviour is erroneous
and buygy here (as others do render it OK) and what would be the exact
CSS hack, that would apply only to Opera 7 generation. My searches till
now are beeing futile on that "opera7 hack only". So where can I find
OPera7 CSS hack?

http://centricle.com/ref/css/filters/
As far as i can see there's only one hack, but that will
also 'hack' IE5, 4, NN4 and Opera 6 and 5 :-(

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Lauri Raittila]

In article Marek Mand wrote:

Lauri Raittila wrote:

In article Marek Mand wrote:

whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
3) the menu item order is visually exactly the same as in the
HTML code physically.
4) the maximum width of the menu is limited to the
UL element surrounding element You don't want list to be possible to be positioned absolutely anymore?

With my expression of language I dont think I wanted to position them
absoloutely. What I meant with point 1. was that they should probably float.

Section 3 means you need to float them to left. That is not very

Then it is piece of cake:
better try:

<!-- For IE quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<title></title>
<style>
ul {text-align:right;}
li {width:10em;border:thin solid;margin-left:1ex;}
li {display:inline;}
li {display:inline-block;}
li {display:inline-table;}
</style>
<ul><li>Item1<li>Item2</ul>
<div class="content">Body text</div>
If you still want to position it absolutely, see my sig and add
.valikko {right:0;text-align:right;}

No and again No.
It is not so simple.
Please see requirement 2.

I know from w3 specs and by practice that specified widths on an inline
level element have no impact.

Oh. You *needed* to have width on them. You wanted them to be as narrow
as possible, so I assumed it would be OK them to be exactly as ong as
text in them. Why do you want them to have some width? Just because you
say so? In your orginal example (the one with extra long url), you didn't
use any width.

Or provide test url with your actual HTML.
To prevent wrapping of list items, you can use white-space:nowrap;

Here it is it with Your code added that overdefines my list
alignments

http://www.hot.ee/idaliiga/testcases/listtest3.htm

That is irrelevant, as you do stuff that I didn't think you would. Like
having stupid width on those links.
The other version that are simpler is asn how it is meant to be work:
http://www.hot.ee/idaliiga/testcases..._eachother.htm

And works from others:
http://csce.uark.edu/~bss03/test2.html
whereby the last one renders as
http://www.hot.ee/idaliiga/testcases...iononmoz16.gif
in Mozilla 1.6.

So as I have asked in general newsgroup. the terms for asking
crosbrowser howto has now met Your criterias into which group to post.
Yes, you are in right group now. That you should have done in first
place.
Hope to hear about the crossbrowser solution soon.

If there is one, you might hear it. Anyway, I can't think way that would
work on Mozilla untill it supports either inline-block or inline-table.
You can trick IE using dispaly:inline and quirks mode.

Would it be so bad, if it worked, exept that in mozilla you wouldn't get
fixed width?

I don't have time ATM for real testing. (need to sleep every second
night)

AFAIK there is no way to do what you want crossbrowser, exept maybe usin
undefined way for Mozilla and correct on others. I could have said this
long ago, if you had actually told what you want before. It's unfortunate
that browsers are so stupid, but blaming the browser that supports most
CSS is not usually good idea, especially when it's problem is that it
does things by spec, but not as other browsers.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Lauri Raittila]

In article Els wrote:

Marek Mand wrote:

What I want to know actually is whether Opera7.x behaviour is erroneous
and buygy here (as others do render it OK) and what would be the exact
CSS hack, that would apply only to Opera 7 generation. My searches till
now are beeing futile on that "opera7 hack only". So where can I find
OPera7 CSS hack?

http://centricle.com/ref/css/filters/
As far as i can see there's only one hack, but that will
also 'hack' IE5, 4, NN4 and Opera 6 and 5 :-(

It is easier to use "correct" method for them, that will propably work on
all those (not sure about IE5 though), and treat mozilla as special case.
Use meta element for mozilla stylesheet to hide it from about everything
else.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Lauri Raittila]

In article Marek Mand wrote:

Els wrote:

Marek Mand wrote:

How to create a functional *flexible* UL-menu list
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:
whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible. As in when the window gets smaller there will be two or more lines of
items?

Yes, exactly that I meant.

1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.

As in float right?

Yes, exactly that I meant, that the UL is "floated" to the right.
If there will be more elements in UL than 1, then the UL would grow in
width from the right to the left.
3) the menu item order is visually exactly the same as in the
HTML code physically.

Not backwards you mean?

Yes, exactly.
That was set here due to that floating shouldnt affect the presentation
order of the items so that they end up beeing presented in inverse order
when compared to the order they have in HTML.

>> 4) the maximum width of the menu is limited to the
>> UL element surrounding element

> As in a max width?

I meant, that the menu items really shouldnt bleed over left side or
right side of the container element, they shoulnt partially overlap with
something. If a menu item fully doesnt fit on a horizontal "menu item
row" then it should be on the next horizontal "menu item row" below the
previous horizontal "menu item row":

-UL--------------------------------------------------
menuitemA menuitemB
verylongdoesntfintonpreviousMenuItemRow_menuItemC
menuitemD
-----------------------------------------------------

>> 2) menu item widths should be possible to be specified individually.
>> But in general the menu items should be as narrow as possible.

> As in narrow: no padding left and right,
> wider: padding left and right?

NO,
explicit individual widths should be also possible to set apart from
paddings. Please note the next answer:

I think this does all 4 things you said, if not, please say so :-)

Well, the most important part is missing:
functionality of setting widths to the menu "item" elements.

Very important here is to understand from practical side is that for
later possible mouseover-hover effects we must stylize A hyperlink
elements instead of the LI element itsself as the only tag which on
hovering is supported in the major browser - MSIE - is the A hyperlink tag.

Why don't you but padding to A element? That would work IIRC.
That is - the widths of "menu elements" should be given to the
block-displayed A elements, so that the whole region the width is set to
would act as a hyperlink.
Still don't understand why to do it that way, instead of making A bigger
using padding for it.
Initially I started out with the floats which wonderfully work
(but not in Opera7, whereby they do in Opera6)

http://www.hot.ee/idaliiga/testcases..._eachother.htm
That is becasue Opera 7 aims to support CSS2.1 instead of CSS2
I havent yet seen an article on right aligned navigation menus that WORK
NOW and can be used on commercial webpages. Instead on those
css-advocating sites there is lot of DUPLICATED bullshit copied by other
same kind of css advocating pages declaring how good navigation lists are.
But nobody has gone through the work of explaining howto make them
flexible and right aligned working in majority browsers.

Well, you can't do everything with HTML and CSS. They are not programming
languages, so all you can do is what implementions allow.

And, it is still possible to do it by spec, using CSS hiding technics.

And, of course you could try JS.

The problem is that you just don't want/are unable to do that. Instead
you want us to find some magic piece of code that would solve all your
problems, or alter browsers so that they would do things the way you
want.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.