weeman09 Posted August 15, 2013 Share Posted August 15, 2013 Hello I have a problem that I havent been able to fix. My menu Moves when the browser is resized. I want the menu to stay fixed no matter when size the browser window is. If someone could please help me in solving this issue that would be much appreciated! thank you HTML code -------------------------------------------------------------- <body> <div id="wrap"> <ul class="menu lblue slide" id="menu"> <li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Login<span class="bubble-alt"> Your Account</span></a></li> <li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Register<span class="bubble-alt"> </span></a></li> <li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Browse <span class="bubble-alt"> </span></a> </li> </ul> </div> </body> CSS code -------------------------------------------------------------- body { margin: 0; padding: 0; width: 100%px; } .lblue { height:46px; font-family:Arial, Helvetica, sans-serif; background-image:url(images/nav1.png) } .lblue a {text-decoration:none; } .lblue > li > a { color:#fff; font-weight:bold; font-size:14px; line-height:8px; padding:13px 20px 6px; height:27px; } .lblue > li:hover > a { background-color:#8ab66b; border-left:none; padding-left:21px; } .lblue > li {border-right:1px solid #0d3f72;border-right:1px solid rgba(0, 0, 0, .33);} .lblue > li > a {border-left:1px solid #4c8bcb;border-left:1px solid rgba(255, 255, 255, .20);} .lblue > li > a img, .lblue li > ul > li > a img { border:0; margin-right:7px; } .menu, .menu ul { margin:0; padding:0; list-style:none; } /* --------------------------------------- */ .menu li, .menu ul a {position:relative; display:block;} .menu > li {float:right;} .menu > li.floatr {float:left; padding-left:120px; font-size: 60px; color: #ffffff; letter-spacing:1px; font-family: 'Jockey One', cursive; line-height: 28px; } .menu li > a {display:block;} /* --------------------------------------- */ .menu ul { position:absolute; display:block; width:125px; float:right; z-index:999; } .menu ul ul { top:0; left:-125px; } .menu > li.floatr > ul {right:0;} .menu > li.floatr > ul ul {left:-125px;} .menu li:hover > ul {display:block;} Link to comment https://forums.phpfreaks.com/topic/281185-stop-menu-from-moving-with-browser-css-problem/ Share on other sites More sharing options...
Irate Posted August 15, 2013 Share Posted August 15, 2013 If you want the position to stay fixed... did you try adding the CSS { position: fixed; }? Link to comment https://forums.phpfreaks.com/topic/281185-stop-menu-from-moving-with-browser-css-problem/#findComment-1445097 Share on other sites More sharing options...
weeman09 Posted August 15, 2013 Author Share Posted August 15, 2013 If you want the position to stay fixed... did you try adding the CSS { position: fixed; }? thank you for your response! yes i have added that and it doesnt work. all my buttons get pushed to the left and piled on top of each other ? Link to comment https://forums.phpfreaks.com/topic/281185-stop-menu-from-moving-with-browser-css-problem/#findComment-1445098 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.