Variable width menu items + fixed total size + filling last element

A

Andreas Pardeike

Something for the css pros:

Can anybody give me a hint on how to convert the following (table)
based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so the whole menu
gets it's total size. I do NOT want to convert the boxes to fixed width but
keep them shrinkwrapping around the menu texts. Also, I do want a border
around the boxes so any faking with background colors will not work
either.

Any ideas?
Andreas Pardeike
 
E

Els

Andreas said:
Something for the css pros:

Can anybody give me a hint on how to convert the following
(table) based markup snippet to div-only markup?

http://www.twosailors.net/test.html

In all my tests I cannot get the rightmost cell expand so
the whole menu gets it's total size. I do NOT want to
convert the boxes to fixed width but keep them
shrinkwrapping around the menu texts. Also, I do want a
border around the boxes so any faking with background
colors will not work either.

I don't understand what you want.
Do you want the left three boxes to be fixed width and the right
one to take up the rest of the window's width?
Or do you want a menu line where every menu item takes up just
enough space, while the last one in the line must be much wider?
Also I don't know what you mean by faking with background
colors.

And I think I just saw this message in another group,
comp.infosystems.www.authoring.stylesheets, where it's more
appropriate, so follow-up set to that group.
 
A

Andreas Pardeike

Do you want the left three boxes to be fixed width and the right one to
take up the rest of the window's width?
Or do you want a menu line where every menu item takes up just enough
space, while the last one in the line must be much wider?
Also I don't know what you mean by faking with background colors.

And I think I just saw this message in another group,
comp.infosystems.www.authoring.stylesheets, where it's more
appropriate, so follow-up set to that group.

OK, I am guilty on crossposting (I wasn't sure which one to take). I am
happy to
continue this thread in comp.infosystems.www.authoring.stylesheets.

Your second guess is right. Each menu item should be as short as
possible so the word in it
fits. Then, the last (empty) item should extend so the whole menu bar
has always the same
width. The menu items are generated dynamically and so I don't know
which maximum size
they will have (I only know that all items fit into the total width).
Also, menu items can be of
quite a different size so it would look ugly to have a fixed size on
all of them.

Andreas Pardeike
 
E

Els

Andreas said:
OK, I am guilty on crossposting (I wasn't sure which one to
take).

Crossposting wouldn't have been too bad, but you multiposted
;-)
Your second guess is right. Each menu item should be as
short as possible so the word in it
fits. Then, the last (empty) item should extend so the
whole menu bar has always the same
width. The menu items are generated dynamically and so I
don't know which maximum size
they will have (I only know that all items fit into the
total width). Also, menu items can be of
quite a different size so it would look ugly to have a
fixed size on all of them.

Have a look at this one:
http://locusmeus.com/temp/horizontalmenu.html
Looks good in Opera and Moz, acceptable in IE, imo.
 
A

Andreas Pardeike

Andreas, you took the follow-up out :-(
Never mind, leave it here now, I left a 'warning' in
comp.infosystems.www.authoring.stylesheets.

Seems that http://locusmeus.com/temp/horizontalmenu.html is close to
what I want.
Meanwhile, I got a bit further and found my old site desing that I am
about to convert
to div-only:

http://test.fsys.se/fs/

There you can see the menu bar in its final form. Still, I have to find
a way to duplicate the
css in the suggested solution so it works with the small passage
between the first and the
second menu line.

Andreas
 
A

Andreas Pardeike

Seems that http://locusmeus.com/temp/horizontalmenu.html is close to
what I want.
Meanwhile, I got a bit further and found my old site desing that I am
about to convert
to div-only:

http://test.fsys.se/fs/

There you can see the menu bar in its final form. Still, I have to find
a way to duplicate the
css in the suggested solution so it works with the small passage
between the first and the
second menu line.

Wow. That was difficult. I'm not sure if it's worth it or not. Here's
my final solution.

Converted the menu in this: http://test.fsys.se/fs/

To this: http://www.twosailors.net/test3.html

Only one drawback: in order to maintain the dynamic widths between divs
in several rows I had to duplicate the menu texts two times. But since
the menu is going to be generated dynamically, this will be a piece of
cake.

It works in Mac Safari + IE, WinIE and Mozilla and in Mac Netscape.
Those are the browsers I had around for testing.

Any comments welcome,
Andreas Pardeike
 
E

Els

Andreas said:
Wow. That was difficult. I'm not sure if it's worth it or
not. Here's my final solution.

Converted the menu in this: http://test.fsys.se/fs/

To this: http://www.twosailors.net/test3.html

Only one drawback: in order to maintain the dynamic widths
between divs in several rows I had to duplicate the menu
texts two times. But since the menu is going to be
generated dynamically, this will be a piece of cake.

It works in Mac Safari + IE, WinIE and Mozilla and in Mac
Netscape. Those are the browsers I had around for testing.

Any comments welcome,

Okay:
First: very well done, looks good in IE too, which it didn't
in my test. Second: it doesn't validate, as you used the
id="hide" more than once. Make that a class and it should
validate as well.

I actually checked with the validator, cause I thought you
couldn't put divs inside li elements, but the validator
doesn't seem to mind. So that's good :)

Then: you used px for the font-size, which makes it impossible
to resize in IE. It does resize in Firebird however, messing
up things completely. Check my example, and see that I used
em's for the heights, which makes stuff resize with the font.
And if you use a percentage instead of px for the font itself,
the lot will be resizeable in IE as well.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top