CSS menu question - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

seantoscano · 10-13-2007, 05:35 PM

Hi,
I have setup a CSS menu but whenever I resize the window, the menu gets all screwed up. I have tried all the overflow: attributes but don't get the desired output.
All I want it to do is remain fixed if the window is resized. (like the picture in my webpage).
Click here to see my webpage, and what I'm talking about.

Here is my css code

Code:

/*CSS MEnu*/

.preload2 {background: url(prodrop2/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px;background:transparent url(images/bgOFF.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; overflow -x:scroll;overflow-y:auto;}

.menu2 li.top {display:block; float:left; position:relative;}

.menu2 li a.top_link {display:block; float:left; height:40px; line-height:28px; color:#000; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}

.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(prodrop2/down.gif) no-repeat right top;}

.menu2 li a.top_link:hover {color:#fff; background: transparent url(images/bgON.gif) repeat-x;}

.menu2 li a.top_link:hover span {background:transparent url(images/bgON.gif) repeat-x right top;}

.menu2 li a.top_link:hover span.down {background:transparent url(images/bgON.gif) repeat-x right top;}

.menu2 li:hover > a.top_link {color:#fff; background: transparent url(images/bgON.gif) repeat-x;}

.menu2 li:hover > a.top_link span {background:transparent url(images/bgON.gif) repeat-x right top;}

.menu2 li:hover > a.top_link span.down {background:transparent url(images/bgON.gif) repeat-x right top;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; height:auto;}

.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}

.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#344152; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}

.menu2 :hover ul.sub li a:hover {background:#344152; color:#fff;}

.menu2 :hover ul.sub li a.fly:hover {background:#344152 url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul li:hover > a.fly {background:#344152 url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #344152; white-space:nowrap; width:93px; z-index:200; height:auto;}

seantoscano · 10-14-2007, 06:05 AM

No worries, I solved the problem.

I managed to get it to work by setting position: absolute and setting the image and menu to a fixed distance from the left and right edge.

Yay for me!!!

seantoscano · 10-14-2007, 04:27 PM

I noticed that if I set the menu and banner to a fixed width, and set it to a certain distance from both the left and right page edges, everything is fine. There is no overflow of the menu, and the banner does not resize.

But if the page is viewed on a bigger screen, everything goes to hell. Because of the fixed width, there is a lot of white space to the left of the menu and banner.

Does anyone know of a way around this?
Like maybe setting the menu and banner to be centre aligned? (How do I do that?)