Welcome to WebmasterWorld Guest from 54.226.25.74

Forum Moderators: not2easy

Message Too Old, No Replies

css drop down menu

how to centre and spiderability

     
11:56 am on Dec 21, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


Hi Guys
Below is the code to a css drop down menu i want to use. The problem i have is that i want it to centre on the page but it seems to display 1/3rd over to the left. I also want the menu width to be 90% of the page width, whatever the user has. But if they use a smal window i want the cells not to wrap. So really i want the menu minimum of 775px. Also i dont understand the code. Youll see it says:
<!--[if IE 7]><!--></a><!--<![endif]-->

So it seems to be saying only show closing </a> is ie7. Does this look right to you?

Also is this menu spider friendly?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
.menu {width:775px; height:32px; font-size:0.85em; position:relative; z-index:100; }
* html .menu {width:775px; w\idth:775px; }
.menu ul {padding:0;margin:0;list-style-type:none; margin-left:auto; margin-right:auto}
.menu ul ul {}
.menu li {float:left;position:relative; text-align:center;}
.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; height:20px; border:1px solid #000; border-width:1px 0 1px 1px; background:#758279; padding-left:10px; line-height:29px;}
* html .menu a, * html .menu a:visited { w\idth:138px;}
.menu ul ul {visibility:hidden;position:absolute;height:0;top:22px;left:0; width:93px;border-top:1px solid #000;}
* html .menu ul ul {top:30px;t\op:31px;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
* html .menu ul ul a, * html .menu ul ul a:visited {width:94px;w\idth:128px;}
.menu a:hover, .menu ul ul a:hover{color:#fff; background:#949e7c;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#949e7c;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{ visibility:visible;}
</style>

</head>

<body>
<div class="menu" style="margin-left: auto; margin-right: auto;">

<ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul>
<ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul></div>

</body>

7:18 am on Dec 27, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi santapaws (nice festive name ;)) - Welcome!

The problem i have is that i want it to centre on the page

To do this you would simply need to add

margin: 0 auto;
to the .menu class, however this will not work in IE5.5 and below, if you require support in those browsers you could add another div to wrap the menu div in - set it to text-align: center, don't give it a width, and then reset the text alignment to left on the menu div itself:

e.g.

.menuwrap {text-align:center;}
.menu {margin: 0 auto; text-align: left;}

you still need your existing .menu rules and will need to add the other wrapper div in the HTML

I also want the menu width to be 90% of the page width, whatever the user has. But if they use a smal window i want the cells not to wrap. So really i want the menu minimum of 775px.

You can use
min-width
to ensure a 775px width without wrapping but again this is not fully supported though there are hacks out there for IE6 and below. In order to always be 90% wide over and above the minimum this would require a rewrite of the menu to adjust the individual list items to fit, I haven't looked at it all but would imagine this to be complex considering the complexity of the code to start with. perhaps a plain background div to give the illusion that it stretches would be an option?

Also i dont understand the code. Youll see it says:
<!--[if IE 7]><!--></a><!--<![endif]-->

So it seems to be saying only show closing </a> is ie7. Does this look right to you?

It didn't look right to me a year or so ago.. but it is apparently a Validating Version of downlevel-revealed conditional comment - it shows the code to IE7 and all other non-IE browsers (downlevel browsers) - there is more about this whole thing in this thread [webmasterworld.com] and in the last post I've added the link (which I only recently found) to the official Microsoft explanation (if you dare ;))

hth
-Suzy

7:50 am on Dec 27, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


>>spider friendly = yes

Oh my bad :o, I see you have the centering code inline - I was not using your code, but was using an original example of this code which I had open (by accident).. now that I've pasted your code I see what you mean about being a 'third over'.

If you put a temporary background color on your .menu div you will see that it is 775px wide and that it is indeed centering, however because you have no widths on your ul's it is them which aren't stretching to fill the 755px.. then you have differing widths on the <li> and/or <a> elements, so some maths is in order here, doing that maths might help show why it would be difficult to get this to work with percentages.

I will try to see if I can come up with something more concrete, if I get some more time :)

10:52 am on Jan 7, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


this is where im at right now...getting closer to what i want but..now ive lost the drop down...when you hover over the top navigation the drop down no longer drops..its all arranged cramped up..im not sure what bit is controlling that..any help appreciated..cheers!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
.menu {width:90%; height:32px; font-size:0.85em; position:relative; z-index:100; background-color:blue;}
* html .menu {width:90%; width:90%; }
.menu ul { padding:0;margin:0;list-style-type:none; }
.menu ul ul {}
.menu li {float:left;position:relative; text-align:center; width:12%;}
.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; height:20px; border:1px solid #000; border-width:1px 0 1px 1px; background:#758279; padding-left:0px; line-height:29px;}
* html .menu a, * html .menu a:visited { w\idth:11%;}
.menu ul ul {visibility:hidden;position:absolute;height:0;top:22px;left:0; width:20%;border-top:1px solid #000;}
* html .menu ul ul {top:30px;t\op:31px;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
* html .menu ul ul a, * html .menu ul ul a:visited {width:11%;w\idth:11%;}
.menu a:hover, .menu ul ul a:hover{color:#fff; background:#949e7c;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#949e7c;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{ visibility:visible;}
</style>

</head>

<body>
<div class="menu" style="margin-left: auto; margin-right: auto;">

<ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul>
<ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul><ul>
<li><a href="../directory/page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor<!--[if IE 7]><!--></a>
<!--<![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul></div>

</body>

11:18 am on Jan 7, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi santapaws..

I had a long reply typed out to this a week or so ago, and browser crash nicely lost it for me, then I forgot :o

can't remember it all, BUT! there is a nesting error in this code, the IE bit. This particular method of coding relies on showing IE6 and below tables nested inside the first level link, but closing that link for everyone else - your code is not closing the final link in the drop list for IE6 and is then not closing the link holding the table for IE6 - yukkk that's not explained very well.. maybe this will help


<ul>
<li><a href="../directory/page.htm">Anchor
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor
<!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table><![endif]-->
</li>
</ul>

should be:


<ul>
<li><a href="../directory/page.htm">Anchor
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
<li><a href="../page.htm">Anchor</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<!--[if IE 7]><!--></a><!--<![endif]-->

that code shows itself to the good browsers including IE7

<!--[if lte IE 6]></td></tr></table>[blue]</a>[/blue]<![endif]-->

that code shows itself to IE6 and below

the last </a> inside the comment above is to close the very first one

<li><a href="../directory/page.htm">Anchor
<!--[if IE 7]><!--></a><!--<![endif]-->.....

the last </a> in the nested/drop list needs closed for every browser as per proper ul nesting because there are no further nested lists requiring the table workaround, if there were you would need to repeat the comments/tables for each drop.

will take another look later as there may have been something else!

-Suzy

[edited by: SuzyUK at 11:22 am (utc) on Jan. 7, 2008]

11:48 am on Jan 7, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


wow..thanks so much for taking the time to look into that...will look at your code now!