Horizontal navigation list

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

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

[Ben C]

On 2008-03-15, François de Dardel <da*******@noos 14.frwrote:

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.

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

On 2008-03-15 17:34:21 +0100, Ben C <sp******@spam. eggssaid:

On 2008-03-15, François de Dardel <da*******@noos 14.frwrote:

>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

[Jonathan N. Little]

François de Dardel wrote:

On 2008-03-15 17:34:21 +0100, Ben C <sp******@spam. eggssaid:

>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

[dorayme]

In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:

On 2008-03-15, François de Dardel <da*******@noos 14.frwrote:

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.a u/alt/centred_floatLi st.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