CSS Menu Positioining

[sathish16]

Hello Experts in CSS,

I downloaded a Horizontal menu which is built using CSS and Javascript and I customized it according to my desire.

The menu is not positioning properly in different screen resolutions and the reason I found is because, the menus top and left values are for screen resolution and not for the layout which is 780px width. I want the menu position exactly on the same spot in every resolution.


Could some one help me figure this out this would be really greateful to them.

You can find the menu here http://www.150dpi.com/cssmenu/

And the CSS file at http://www.150dpi.com/cssmenu/macsafari.css

Thank You,

Sathish

[Ryan Fait]

I'm confused...

[sathish16]

Can you please read it now. I made some edit with my text.

Thanks

Originally Posted by ryanfait

I'm confused...

[ukgeoff]

Oh dear! Here we go again.

There is a link to a tutorial in the sticky at the top of this forum. Follow it and learn how to create your own horizontal and vertical menus using css to produce dropdown menus.

BTW. I think your menu has more that resolution problems. I looked at it using Firefox and its behaviour is awful.

[Ryan Fait]

Is it supposed to do anything? If so, it doesn't work at all in Safari 2.

[sathish16]

Hello All,

Thanks for your suggestions on using a full CSS based menu. The menu which is displaying at incorrect position in Firefox or whatever browser is not because of problem with the menu. I made the positinoinig like that. I was testing it and as I was not able to get what I wanted, I just left it as it is.

And my question was very simple, is there a way that I can position the menu's TOP and LEFT values in reference with the layout and not the screen size.

If I manage to do it then screen resolutions wont be a problem as my menus left and top values will refer to the layout design each time in any screen resolution.

I am attaching an image of what I mean layout LEFT and TOP.

Thanks

Sathish

[Ryan Fait]

Oh, yes. You'd have to apply a position: absolute; to the container that the navigation is in. It'll cause more problems that you'll have to work out, but that'll fix what you're asking.

[sathish16]

Thanks for the idea. I even did that. Below my CSS code.

#menuRealEstate {
DISPLAY: block; Z-INDEX: 300; LEFT: 0px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 10px
}


The above is the code that refers to the first drop down menu. I made the position to absolute. Still have the problem.

Can you please look at my code and see what could be wrong.

Thanks



body
{
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
}
#outer
{
width: 780px;
background-color:#FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
margin: 0 auto
}
.nav2 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
}
#menuRealEstate {
DISPLAY: block; Z-INDEX: 300; LEFT: 0px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 10px
}
#header {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu {
padding: 0px;
margin: 0px;
text-align: center;
background-color:#84575A;
}
#banner {
padding: 0px;
margin: 0px;
text-align: center;
}

#menuHome {
DISPLAY: block; Z-INDEX: 300; LEFT: 125px; VISIBILITY: hidden; WIDTH: 140px; POSITION: absolute; TOP: 76px
}
#menuRentals {
DISPLAY: block; Z-INDEX: 300; LEFT: 59px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 0px
}
#menuRoommates {
DISPLAY: block;
Z-INDEX: 300;
LEFT: 125px;
VISIBILITY: hidden;
WIDTH: 138px;
POSITION: absolute;
TOP: 76px;
text-decoration : none;
}
#menuMerchandise {
DISPLAY: block; Z-INDEX: 300; LEFT: 125px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 76px
}
#menuAutos {
DISPLAY: block; Z-INDEX: 300; LEFT: 125px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 50px
}
#menuEmployment {
DISPLAY: block; Z-INDEX: 300; LEFT: 125px; VISIBILITY: hidden; WIDTH: 138px; POSITION: absolute; TOP: 76px
}

[sathish16]

Hello People,

I figured out and made teh menu work like I wanted. Anways.. thanks for all those who really tried to help me.

Sathish