CSS drop down menu - how to centre it?

J

John

Hi

I have a dropdown menu. Standard HTML with ul and li.

The following code works except that the boxes are all left justified and I
would like them to be centred.
I've tried auto with margins and various permutations but cannot get the
boxes to center.
Any ideas.

div#navbar {width:100%; margin-left:auto; margin-right:auto;}
div#navbar ul {list-style:none; padding:0; margin:0;}
div#navbar li {float:left; margin:0em;}
div#navbar li a{background: url(background.gif) #fff bottom left repeat-x;
height:20px; line-height:20px; float:left; width:7em; display:block;
border: 0.1em solid #DCDCE9;
color:white; font-size:x-small; text-decoration:none;
text-align:center;font-family: Verdana, sans-serif;}
div#navbar li a {float:none} /* IE5-MAC*/
div#navbar li a:hover {font-weight:bold; color:#5101BC; background:white;}

Excuse the sloppy coding.

Regards
John
 
N

Nico Schuyt

John said:
I have a dropdown menu. Standard HTML with ul and li.

The following code works except that the boxes are all left justified
and I would like them to be centred.
I've tried auto with margins and various permutations but cannot get
the boxes to center.
Any ideas.

[snip code]
Click to expand...

Post an URL instead of the code. There may be other problems.
 
B

Ben C

Hi

I have a dropdown menu. Standard HTML with ul and li.

The following code works except that the boxes are all left justified and I
would like them to be centred.
I've tried auto with margins and various permutations but cannot get the
boxes to center.
Any ideas.

div#navbar {width:100%; margin-left:auto; margin-right:auto;}
Click to expand...

100% means "100% of the container". So no room left for margins, so they
will be computed as zero.

width: auto on a normal block box results in something quite similar.

Is this the div you want centered?

Then the question is how wide do you want it. If you want it just wide
enough for the things in it, then you're another person who wants to
centre something that's shrink-to-fit.

And if you want that, since display: inline-block is not widely
supported, you will have to use a table.

Try

div#navbar ul
{
list-style: none;
display: table;
margin-left: auto;
margin-right: auto;
padding: 0px;
margin: 0px;
}

This should work because display: table is shrink-to-fit. So the browser
will make the ul wide enough for its content but no wider. Then its
auto left and right margins will take up any remaining space to the
edges of its containing block under the condition that they get equal
values which gets you centering.

Instead of display: table you can alternatively set a width, but that's
annoying, because you have to know how wide you want the ul to be. In
div#navbar ul {list-style:none; padding:0; margin:0;}
[...]

Excuse the sloppy coding.
Click to expand...

I won't mention that you should put units like "px" after the 0s then.
 
B

Ben C

Hi

That's quick.

The site which is under development - so may be working one moment but not
the next!

www.zampf.com
Click to expand...

That's actually crashing Firefox for me at the moment. Not entirely your
fault, Firefox isn't ever supposed to crash.
 
J

John Hosking

Ben said:
I won't mention that you should put units like "px" after the 0s then.
Click to expand...

If the value is zero, units are not required.

What *is* required is well-formed code. This site doesn't have it. John
needs to clean up the "sloppy code" and get it to validate before
wondering why somethings don't work.

http://validator.w3.org/check?verbose=1&uri=http://www.zampf.com/flights.pl

There are "only" 28 errors, but they include multiple <html> and <body>
elements, mystery tags like </br>, and a lack of doctype. In quirks
mode, nobody can hear you scream.

And lastly, once the basic HTML errors are cleaned up, the original
problem, if it still exists, should probably be discussed in
c.i.w.a.stylesheets (if at all), not here in alt.html.
 
J

John

Thank you gentlemen

Now working fine in IE. Not so in FF but I can live with that for the
moment.

Validator. Quite right. I'm prepared to knock the errors (sic) to a
singledigit. Sometimes it will find errors that are not there.

Many thanks
John
 
J

Jonathan N. Little

John said:
Hi

That's quick.

The site which is under development - so may be working one moment but not
the next!

www.zampf.com
Click to expand...

John, sorry but you got what appears to be a _cut'n paste_ mess here.
Multiple HTML and BODY tags. You need a refresher in basic HTML...

example

#CODE
<table align="center">
<div id="navbar">
<ul>
<li><a href="home.shtml">Home</a></li>

<li><a href="flights.pl">Flights</a></li>
<li><a href="hotels.shtml">Hotels</a></li>
<li><a href="cars.shtml">Car Rental</a></li>
<li><a href="cruises.shtml">Cruises</a></li>
<li><a href="holidays.shtml">Holidays</a></li>
<li><a href="bargains.shtml">Bargains</a></li>

<li><a href="MyZampf.pl">MyZampf</a></li>
<li><a href="contact.shtml">Contact Us</a></li>
</ul>
</div>
</table>

After the TABLE tag only CAPTION, COL, COLGROUP, THEAD, TFOOT, TBODY TR
can follow and certainly not DIV or UL...
 
J

John

Hi

Many thanks. Point taken. A lot of the code will be 'generated' from Perl
which does have a habit of putting <html> tags every where. Actually with
few problems. It shows how robust HTML is. The <table> strangely does work
here. I know I should not use <table align='center'> and rather use <div
align='center'> blah blah </div> but in the Validator even that causes a
hiccup.

Thanks for the input
John
 
B

Ben C

Thank you gentlemen

Now working fine in IE. Not so in FF but I can live with that for the
moment.
Click to expand...

Even if you can, I'm still curious...

div#navbar ul {list-style: none;display: table;margin-left:
auto;margin-right: auto;padding: 0px;margin: 0px;}

The problem is that final margin: 0px, which is replacing margin-left:
auto and margin-right: auto.

You can use instead just:

div#navbar ul {list-style: none;display: table;padding: 0px;margin: 0px auto;}

margin: 0px auto;

means use "0px" for top and bottom, and auto for left and right.

And as John Hosking pointed out, you don't need those "px" after 0 after
all.
 
J

Jonathan N. Little

John said:
Hi

Many thanks. Point taken. A lot of the code will be 'generated' from Perl
which does have a habit of putting <html> tags every where.
Click to expand...

Actually, no it doesn't. You are using the CGI.pm correct?

my $q = new CGI;

print $q->header, $q->p('This is a paragraph');

generates only:

Actually with
few problems. It shows how robust HTML is.
Click to expand...

No it shows how 'forgiving' your browser is. Old Netscape would have
The <table> strangely does work
here.
Click to expand...

Again no not really. What are you expecting that it does, center your
menu on the page? If so maybe you ought to see what a real web browser
does with your page and not depend of IE's interpretation.
I know I should not use <table align='center'> and rather use <div
align='center'> blah blah </div> but in the Validator even that causes a
hiccup.
Click to expand...

That's absurd it is like saying "My car won't start, I painted it red
didn't work and I hit it with a hammer and it didn't work either". Wrong
method entirely.

To prove it can be done with valid markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Valid Template</title>

<style type="text/css">
#navbar { text-align: center; font: 80% sans-serif; }
#navbar UL { list-style: none; margin: 0; padding: 0; }
#navbar LI { margin: 0 .05em; padding: 0; display: inline;
line-height: 2 }
#navbar A { text-decoration: none; padding: .2em 1em; border: 1px
solid #aaf; }
#navbar A:link, #navbar A:visited { color: #fff; background-color:
#50c; }
#navbar A:hover, #navbar A:active { color: #50c; background-color:
#fff; }
</style>
</head>
<body>

<div id="navbar">
<ul>
<li><a href="home.shtml">Home</a></li>
<li><a href="flights.pl">Flights</a></li>
<li><a href="hotels.shtml">Hotels</a></li>
<li><a href="cars.shtml">Car Rental</a></li>
<li><a href="cruises.shtml">Cruises</a></li>
<li><a href="holidays.shtml">Holidays</a></li>
<li><a href="bargains.shtml">Bargains</a></li>
<li><a href="MyZampf.pl">MyZampf</a></li>
<li><a href="contact.shtml">Contact Us</a></li>
</ul>
</div>

</body>
</html>
 
J

John

Hi

And thanks again.
div#navbar ul {list-style: none;display: table;padding: 0px;margin: 0px
auto;}
Click to expand...

Done that and it is now working in FF. If it works in IE and FF I'm happy,
I prefer FF because I am a Linux person but since IE dominates I need to
write for it primarily.
And as John Hosking pointed out, you don't need those "px" after 0 after
all.
Click to expand...

Sorry. It's just old habits hard to break. As another poster advised some
of my HTML needs a cleanup. So I'm sticking them through the Validator.

Appreciate your help.

Regards
John
 
J

John

Hi
Actually, no it doesn't. You are using the CGI.pm correct?
my $q = new CGI;
Click to expand...

That's OK. That's how I use it. I'm probably thinking of print
"Content-type: text/html\n\n";
Thou I prefer to use the $user=param('user') and just hard code the CGI.

No it shows how 'forgiving' your browser is. Old Netscape would have ended
the display of your document at the first </html>
Click to expand...

Fair point. Actually both IE and FF are both forgiving (to me, at least)If so maybe you ought to see what a real web browser
does with your page and not depend of IE's interpretation.
Click to expand...

Real web browser? Since IE and FF take the lion share I'm just coding for
them. It maybe that Opera etc may baulk at the code but I'll have to live
with that.

..

To prove it can be done with valid markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Valid Template</title>

<style type="text/css">
#navbar { text-align: center; font: 80% sans-serif; }
#navbar UL { list-style: none; margin: 0; padding: 0; }
#navbar LI { margin: 0 .05em; padding: 0; display: inline; line-height:
2 }
#navbar A { text-decoration: none; padding: .2em 1em; border: 1px solid
#aaf; }
#navbar A:link, #navbar A:visited { color: #fff; background-color:
#50c; }
#navbar A:hover, #navbar A:active { color: #50c; background-color:
#fff; }
</style>
</head>
<body>

<div id="navbar">
<ul>
<li><a href="home.shtml">Home</a></li>
<li><a href="flights.pl">Flights</a></li>
<li><a href="hotels.shtml">Hotels</a></li>
<li><a href="cars.shtml">Car Rental</a></li>
<li><a href="cruises.shtml">Cruises</a></li>
<li><a href="holidays.shtml">Holidays</a></li>
<li><a href="bargains.shtml">Bargains</a></li>
<li><a href="MyZampf.pl">MyZampf</a></li>
<li><a href="contact.shtml">Contact Us</a></li>
</ul>
</div>

</body>
</html>
Click to expand...
Appreciate that. I see you have added the hover, active and visited. I'm
now adding DOCTYPE where I had earlier ignored it.
Thanks for the above. Much appreciated.

Regards
John
PS I have a 1971 VW Kombi so I probably would hit it with a hammer.
 
B

Ben C

John wrote:
[snip]
Again no not really. What are you expecting that it does, center your
menu on the page? If so maybe you ought to see what a real web browser
does with your page and not depend of IE's interpretation.
Click to expand...

No this is specified behaviour, and explained in my earlier post in
which I suggested it.

It does centre the menu in conjunction with auto left and right margins.

All the real web browsers I've tried it on (FF, Opera and Konqueror) are
OK with it.

I'm pleasantly surprised to hear that it also works in IE.

It isn't/wasn't working in FF for the OP because of something else
(specifying margins twice in the same selector). Although I am quite
surprised why that wasn't a problem on Opera or Konqueror.

[snip]
To prove it can be done with valid markup:
Click to expand...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Valid Template</title>

<style type="text/css">
#navbar { text-align: center; font: 80% sans-serif; }
#navbar UL { list-style: none; margin: 0; padding: 0; }
#navbar LI { margin: 0 .05em; padding: 0; display: inline;
line-height: 2 }
#navbar A { text-decoration: none; padding: .2em 1em; border: 1px
solid #aaf; }
#navbar A:link, #navbar A:visited { color: #fff; background-color:
#50c; }
#navbar A:hover, #navbar A:active { color: #50c; background-color:
#fff; }
</style>
Click to expand...
[snip]

Yes, that works too, and is a more natural way of doing it. But the OP
had his <li>s floating, which means he has control over a few more
things-- he can set width on them for example, which you can't do on an
inline box.

text-align: center doesn't centre the floats (as of course it shouldn't)
hence the idea of making the <ul> a shrink-to-fit centered block box.
 
J

Jonathan N. Little

John said:
Fair point. Actually both IE and FF are both forgiving (to me, at least)
If so maybe you ought to see what a real web browser

Real web browser? Since IE and FF take the lion share I'm just coding for
them. It maybe that Opera etc may baulk at the code but I'll have to live
with that.
Click to expand...

Not with respect to your menu alignment via invalid TABLE element, it
"works" in IE but Firefox ignores it and the menu is left justified
 
J

Jonathan N. Little

Your snipping is incorrectly quoted the message, I wrote this level not
John.


To prove it can be done with valid markup:
Click to expand...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Valid Template</title>

<style type="text/css">
#navbar { text-align: center; font: 80% sans-serif; }
#navbar UL { list-style: none; margin: 0; padding: 0; }
#navbar LI { margin: 0 .05em; padding: 0; display: inline;
line-height: 2 }
#navbar A { text-decoration: none; padding: .2em 1em; border: 1px
solid #aaf; }
#navbar A:link, #navbar A:visited { color: #fff; background-color:
#50c; }
#navbar A:hover, #navbar A:active { color: #50c; background-color:
#fff; }
</style>
Click to expand...
[snip]

Yes, that works too, and is a more natural way of doing it. But the OP
had his <li>s floating, which means he has control over a few more
things-- he can set width on them for example, which you can't do on an
inline box.

text-align: center doesn't centre the floats (as of course it shouldn't)
hence the idea of making the <ul> a shrink-to-fit centered block box.
Click to expand...

That's why I did float the LI's. The problem is that the UL element
expands to 100% width so your cannot center by setting the left and
right margins to auto as with other blocks. To make it work you have to
set an absolute width on the UL. Best to use 'em' so it scale with the
font, but the design will break if you add another menus item...

You could set the UL to "display: table" but that leaves IE out of the
picture. My advice is to make a "design decision" and go with the
variable width menu items and maintain the flexibility of the menu items
or forgo the need for the "centered" menu...
 
B

Ben C

Your snipping is incorrectly quoted the message, I wrote this level not
John.
Sorry.
To prove it can be done with valid markup:
Click to expand...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Valid Template</title>

<style type="text/css">
#navbar { text-align: center; font: 80% sans-serif; }
#navbar UL { list-style: none; margin: 0; padding: 0; }
#navbar LI { margin: 0 .05em; padding: 0; display: inline;
line-height: 2 }
#navbar A { text-decoration: none; padding: .2em 1em; border: 1px
solid #aaf; }
#navbar A:link, #navbar A:visited { color: #fff; background-color:
#50c; }
#navbar A:hover, #navbar A:active { color: #50c; background-color:
#fff; }
</style>
Click to expand...
[snip]

Yes, that works too, and is a more natural way of doing it. But the OP
had his <li>s floating, which means he has control over a few more
things-- he can set width on them for example, which you can't do on an
inline box.

text-align: center doesn't centre the floats (as of course it shouldn't)
hence the idea of making the <ul> a shrink-to-fit centered block box.
Click to expand...

That's why I did float the LI's.
Click to expand...

You mean "didn't".
The problem is that the UL element
expands to 100% width so your cannot center by setting the left and
right margins to auto as with other blocks. To make it work you have to
set an absolute width on the UL. Best to use 'em' so it scale with the
font, but the design will break if you add another menus item...
Click to expand...
You could set the UL to "display: table" but that leaves IE out of the
picture.
Click to expand...

I thought the OP said it worked in IE?
My advice is to make a "design decision" and go with the variable
width menu items and maintain the flexibility of the menu items or
forgo the need for the "centered" menu...
Click to expand...

Sound advice.
 
J

Jonathan N. Little

Ben said:
There's no TABLE element. Just display: table. How is it invalid?
Click to expand...

Because the OP was not using "display: table: (which does not work in
IE) but *was* using a TABLE element and in a very invalid manner. His
markup was:

<table align="center">
<div id="navbar">
<ul>
<li><a href="home.shtml">Home</a></li>

<li><a href="flights.pl">Flights</a></li>
<li><a href="hotels.shtml">Hotels</a></li>
<li><a href="cars.shtml">Car Rental</a></li>
<li><a href="cruises.shtml">Cruises</a></li>
<li><a href="holidays.shtml">Holidays</a></li>
<li><a href="bargains.shtml">Bargains</a></li>

<li><a href="MyZampf.pl">MyZampf</a></li>
<li><a href="contact.shtml">Contact Us</a></li>
</ul>
</div>
</table>

And that was what I was addressing....
 

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

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Buttons lining up 1
Horizontal menu bar header 2
Help needed with code 5
Justify-content not working 1
CSS navigation bar - hover OK in Firefox but not in Internet Exploter 7 1
I need help fixing my website 2
How can I get my menu inside of a menu to function properly? 1

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 459

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top