Centering horizontal 'button' menu

I'm having trouble getting the menu below to centre horizonatally. I've
tried putting it into a container div and using text-align:center; I've
tried margin:auto and margin-left:auto & margin-right:auto; I've even
tried the deprecated <center> tag. None of it works.

I'm assuming it either has to do with the display:block (which I need to
keep the 'button look') or with the float:left.

Of course I could be wrong, too.

So what am I missing? Here's the link:

http://www.geocities.com/sentientfluid/test2.html

~Senti

Sentient Fluid <sentientfluid (AT) hotmail (DOT) com> wrote:

I'm having trouble getting the menu below to centre horizonatally. I've
tried putting it into a container div and using text-align:center; I've
tried margin:auto and margin-left:auto & margin-right:auto; I've even
tried the deprecated <center> tag. None of it works.

I'm assuming it either has to do with the display:block (which I need to
keep the 'button look') or with the float:left.

Set a width, remove the float property.

--
Spartanicus

"Richard" <Anonymous (AT) 127 (DOT) 001> wrote:

Sentient Fluid wrote:

I'm having trouble getting the menu below to centre horizonatally. I've
tried putting it into a container div and using text-align:center; I've
tried margin:auto and margin-left:auto & margin-right:auto; I've even
tried the deprecated <center> tag. None of it works.

I'm assuming it either has to do with the display:block (which I need to
keep the 'button look') or with the float:left.

It's with the float: left;
Floated elements will float to the specified side.

Of course I could be wrong, too.

So what am I missing? Here's the link:

http://www.geocities.com/sentientfluid/test2.html

You've given each link a fixed width. This is a bad idea in general
(increase the font size in your browser and watch things fall apart)
but this does mean that you can center the links:
..center {width: 744px; margin-left: auto; margin-right: auto; }

But as we don't want the width to be in pixels we can change
everything to use em instead. Say width: 7.5em (and height: 1.5em
for the links and width: 50em; for the division).

It's not a perfect solution but with the poor support for CSS tables
and the inline-block/table display values it may be one of the least
worst ones.

Meanwhile in fantasy land, Richard was blathering....

Padding and margin would hep center the link division setup.

Yes, but it's not that simple.

text-align is just that. For text, not the division.

The links are text. Even if the text-align:center; was removed from
the a.topmenu style the text-align: center; on the div would still
center the text in the links themselves. But the links are also
floated so the boxes will still be at the left.

Also, I'd avoid using "center" as a class name.

So would I. But for different reasons.

icenter would be better.

No it wouldn't.
Something like navbar would be a sensible class name for a navigation
bar.

just so that the script doesn't get confused as to which is which.

1. There is no script on that page.
2. A script that gets confused between a classname and something else
(the center element? The value center that the align attribute can
take? The value center that some CSS properties can take?) is a badly
written script. But I admit that you probably have a lot more
experience with writing scripts badly than I do.

Steve

Steve Pugh wrote:

"Richard" <Anonymous (AT) 127 (DOT) 001> wrote:


Sentient Fluid wrote:


I'm having trouble getting the menu below to centre horizonatally. I've
tried putting it into a container div and using text-align:center; I've
tried margin:auto and margin-left:auto & margin-right:auto; I've even
tried the deprecated <center> tag. None of it works.

I'm assuming it either has to do with the display:block (which I need to
keep the 'button look') or with the float:left.


It's with the float: left;
Floated elements will float to the specified side.


http://www.geocities.com/sentientfluid/test2.html


You've given each link a fixed width. This is a bad idea in general
(increase the font size in your browser and watch things fall apart)
but this does mean that you can center the links:
.center {width: 744px; margin-left: auto; margin-right: auto; }

But as we don't want the width to be in pixels we can change
everything to use em instead. Say width: 7.5em (and height: 1.5em
for the links and width: 50em; for the division).

It's not a perfect solution but with the poor support for CSS tables
and the inline-block/table display values it may be one of the least
worst ones.

Something like navbar would be a sensible class name for a navigation
bar.

Thanks for the help, Steve. I've changed the fixed widths to variable
widths. When I was trying to get things centered before I posted, I
totally forgot to set the width when using margin-left:auto and
margin-right:auto. Also, the .center was named just for the quick
example. Normally I would use something else.

Problem is it doesn't work in IE. At least not 6.0. It does, however,
work in Firefox. I still need to install some other browsers to test it
in, though...

One thing I noticed after making the changes, though. In Firefox, the
buttons no longer wrap to the next line if the viewport is smaller than
the width of the nav bar. Is there a way I can get that back and still
maintain the centering?

You mentioned above that it's not a perfect solution. How would you do
what I'm bumbling around at?

As for Richard, I tend to ignore his "help". I'm familiar enough with
Usenet to have seen how destructive following his advice can be.

~Senti

Sentient Fluid <sentientfluid (AT) hotmail (DOT) com> wrote:

Steve Pugh wrote:
Sentient Fluid wrote:

http://www.geocities.com/sentientfluid/test2.html

You've given each link a fixed width. This is a bad idea in general
(increase the font size in your browser and watch things fall apart)
but this does mean that you can center the links:
.center {width: 744px; margin-left: auto; margin-right: auto; }

But as we don't want the width to be in pixels we can change
everything to use em instead. Say width: 7.5em (and height: 1.5em
for the links and width: 50em; for the division).

It's not a perfect solution but with the poor support for CSS tables
and the inline-block/table display values it may be one of the least
worst ones.

Thanks for the help, Steve. I've changed the fixed widths to variable
widths. When I was trying to get things centered before I posted, I
totally forgot to set the width when using margin-left:auto and
margin-right:auto.

Problem is it doesn't work in IE. At least not 6.0. It does, however,
work in Firefox. I still need to install some other browsers to test it
in, though...

It also works in Opera 7.54u1 and can easily be made to work in IE6.

Your doctype triggers quirks mode in IE6 so it emulates the bugs of
IE5.x and doesn't support margin: auto; Changing the doctype to one
that triggers standards mode will fix it in IE6 but not IE5.x.

One thing I noticed after making the changes, though. In Firefox, the
buttons no longer wrap to the next line if the viewport is smaller than
the width of the nav bar. Is there a way I can get that back and still
maintain the centering?

Changing width to max-width in the style for the div does the trick in
Opera but (a) seems to be buggy in FF - the last link wraps but the
others don't; (b) isn't supported by IE.

You mentioned above that it's not a perfect solution. How would you do
what I'm bumbling around at?

For IE (5 and 6) and Opera 7 it's quite easy.

#navbar { text-align: center; }
no margin: auto and no width.

a.menubutton { display: inline-block; }
no float.

Centered, wraps, nice.

But that's not supported by Gecko.

If this was a personal site I'd use that and let Gecko have a slight
degradation (I'd add a few more styles to minimise the damage).

For a commercial site I'd look at how the nav bar integrates with the
rest of the design, and speak with the designer, and review what the
project's tech spec has to say about coding standards. Depending on
all that I might negotiate a change to the design, or go for one of
the above compromises, or cheat and use a table.

Steve

Sentient Fluid wrote:

I'm having trouble getting the menu below to centre horizonatally. I've
tried putting it into a container div and using text-align:center; I've
tried margin:auto and margin-left:auto & margin-right:auto; I've even
tried the deprecated <center> tag. None of it works.

I'm assuming it either has to do with the display:block (which I need to
keep the 'button look') or with the float:left.

Of course I could be wrong, too.

So what am I missing? Here's the link:

http://www.geocities.com/sentientfluid/test2.html

It looks like you got it centered now but still not wrapping. I did this
with an unordered list instead of a div though I don't see why your div
wouldn't work.