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]

Re: Horizontal navigation list

On 2008-03-15, François de Dardel <dardelf14@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?=]

Re: Horizontal navigation list

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

On 2008-03-15, François de Dardel <dardelf14@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]

Re: Horizontal navigation list

François de Dardel wrote:

On 2008-03-15 17:34:21 +0100, Ben C <spamspam@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]

Re: Horizontal navigation list

In article <slrnftnul1.6u6 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

On 2008-03-15, François de Dardel <dardelf14@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