Horizontal navigation list

Here is the page:
http://dardel.info/museum/Museum1.html

and here is the CSS (see navigation buttons at bottom of file):
http://dardel.info/museum/style3.css

Is there a way to make all nav buttons (at the bottom of the page) the
same width?

Thanks in advance for any hints

On 2008-03-15, François de Dardel <dardelf14 (AT) noos14 (DOT) fr> wrote:

Here is the page:
http://dardel.info/museum/Museum1.html

and here is the CSS (see navigation buttons at bottom of file):
http://dardel.info/museum/style3.css

Is there a way to make all nav buttons (at the bottom of the page) the
same width?

Yes, but not without some caveats.

At the moment the list-items are display: inline to make them sit next
to each other the line.

But that means you can't set widths on them (because width doesn't apply
to things that are display: inline).

There are three other ways to make things line up next to each other
like that:

1. Float them
2. Make them display: inline-block
3. Use a table.

You can set widths on floats, inline-blocks or table cells.

But you can't centre floats, and inline-block doesn't work in Firefox
until version 3.

So that leaves a table, which won't make you any friends, but then you
seem to have already used tables quite a bit anyway so probably don't
care.

Option 4 is do nothing-- I think the buttons look fine the way they are
with different widths.

On 2008-03-15 17:34:21 +0100, Ben C <spamspam (AT) spam (DOT) eggs> said:

On 2008-03-15, François de Dardel <dardelf14 (AT) noos14 (DOT) fr> wrote:
Here is the page:
http://dardel.info/museum/Museum1.html

and here is the CSS (see navigation buttons at bottom of file):
http://dardel.info/museum/style3.css

Is there a way to make all nav buttons (at the bottom of the page) the
same width?

Yes, but not without some caveats.

At the moment the list-items are display: inline to make them sit next
to each other the line.

But that means you can't set widths on them (because width doesn't apply
to things that are display: inline).

There are three other ways to make things line up next to each other
like that:

1. Float them
2. Make them display: inline-block
3. Use a table.

You can set widths on floats, inline-blocks or table cells.

But you can't centre floats, and inline-block doesn't work in Firefox
until version 3.

So that leaves a table, which won't make you any friends, but then you
seem to have already used tables quite a bit anyway so probably don't
care.

Option 4 is do nothing-- I think the buttons look fine the way they are
with different widths.

Thank you Ben for your precise and informative reply. I will take option 4.

--
http://dardel.info/
Remove both fourteens in your direct replies
Enlever les deux quatorze pour m'écrire

François de Dardel wrote:

On 2008-03-15 17:34:21 +0100, Ben C <spamspam (AT) spam (DOT) eggs> said:


Option 4 is do nothing-- I think the buttons look fine the way they are
with different widths.

Thank you Ben for your precise and informative reply. I will take option 4.

Also the easiest to implement!

--
Take care,

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

In article <slrnftnul1.6u6.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-03-15, François de Dardel <dardelf14 (AT) noos14 (DOT) fr> wrote:
Here is the page:
http://dardel.info/museum/Museum1.html

and here is the CSS (see navigation buttons at bottom of file):
http://dardel.info/museum/style3.css

Is there a way to make all nav buttons (at the bottom of the page) the
same width?

Yes, but not without some caveats.

At the moment the list-items are display: inline to make them sit next
to each other the line.

But that means you can't set widths on them (because width doesn't apply
to things that are display: inline).

There are three other ways to make things line up next to each other
like that:

1. Float them
2. Make them display: inline-block
3. Use a table.

You can set widths on floats, inline-blocks or table cells.

But you can't centre floats, and inline-block doesn't work in Firefox
until version 3.

True. Not that this is useful here (too many caveats), but you
can centre the ul:

<http://netweaver.com.au/alt/centred_floatList.html>

So that leaves a table, which won't make you any friends, but then you
seem to have already used tables quite a bit anyway so probably don't
care.

Option 4 is do nothing-- I think the buttons look fine the way they are
with different widths.

Indeed, and what is more, they look better this way and save
space.

--
dorayme