Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS drop down menu - how to centre it?

Reply
Thread Tools

CSS drop down menu - how to centre it?

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-24-2006
John wrote:
> 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, 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:

<p>This is a paragraph</p>

> Actually with
> few problems. It shows how robust HTML is.


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


> The <table> strangely does work
> here.


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.


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>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
John
Guest
Posts: n/a
 
      10-24-2006
Hi

And thanks again.

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


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.


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



 
Reply With Quote
 
 
 
 
John
Guest
Posts: n/a
 
      10-24-2006
Hi

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


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>


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.


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>
>

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.


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-24-2006
> John wrote:
[snip]
>> The <table> strangely does work
>> here.

>
> 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.


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:


>
><!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>

[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.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-24-2006
John wrote:

> 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.

>
> 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.


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
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-24-2006
Ben C wrote:
>> John wrote:


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


<snip>
>> 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>

> [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.


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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-24-2006
On 2006-10-24, Jonathan N. Little <(E-Mail Removed)> wrote:
> Ben C wrote:
>>> John wrote:

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


Sorry.

><snip>
>>> 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>

>> [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.

>
> That's why I did float the LI's.


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...


> You could set the UL to "display: table" but that leaves IE out of the
> picture.


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...


Sound advice.
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-24-2006
On 2006-10-24, Jonathan N. Little <(E-Mail Removed)> wrote:
> John wrote:
>
>> 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.

>>
>> 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.

>
> Not with respect to your menu alignment via invalid TABLE element


There's no TABLE element. Just display: table. How is it invalid?
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-24-2006
Ben C wrote:
> On 2006-10-24, Jonathan N. Little <(E-Mail Removed)> wrote:
>> John wrote:
>>
>>> 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.
>>> 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.

>> Not with respect to your menu alignment via invalid TABLE element

>
> There's no TABLE element. Just display: table. How is it invalid?


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....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-24-2006
Ben C wrote:
> On 2006-10-24, Jonathan N. Little <(E-Mail Removed)> wrote:


>>> 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.

>> That's why I did float the LI's.

>
> You mean "didn't".
>

Yes, that's what I meant. Gotta proof read!

>> 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.

>
> I thought the OP said it worked in IE?
>


No he actually wrapped the UL in a TABLE element

--
Take care,

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

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
retrive preselected value in second drop down list from the first drop down list weiwei ASP .Net 0 01-05-2007 07:29 PM
Auto Drop down a Drop Down List xxbmichae1@supergambler.com Javascript 5 11-23-2005 01:35 AM
New to .NET, can I have one drop down box control the data of another drop down box using a database? SirPoonga ASP .Net 2 01-07-2005 10:44 PM



Advertisments