Jump to content


Photo

Stop Menu From Moving With Browser CSS Problem!


  • Please log in to reply
3 replies to this topic

#1 weeman09

weeman09

    Newbie

  • New Members
  • Pip
  • 9 posts

Posted 14 August 2013 - 11:58 PM

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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Your Account</span></a></li>
 
<li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Register<span class="bubble-alt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>
 
<li><a href="#"><img src="images/nav.png" width="25" height="21" align="texttop">Browse&nbsp;&nbsp;<span class="bubble-alt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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;}

Edited by weeman09, 15 August 2013 - 12:01 AM.


#2 Irate

Irate

    Advanced Member

  • Members
  • PipPipPip
  • 358 posts
  • LocationHamburg, Germany
  • Age:17

Posted 15 August 2013 - 01:42 AM

If you want the position to stay fixed... did you try adding the CSS { position: fixed; }?


Quod placet mihi non placeat tibi. - What I think to be good must not always equal your perception of it.

I am not perfect. I try a lot with the code I provide and I don't guarantee for it to work as I have mostly no option to test it on my mobile phone. I do apologize for any inconvenience I caused, but if I do happen to have helped, liking my posts or marking them as to have solved or answered your question would be nice.

#3 weeman09

weeman09

    Newbie

  • New Members
  • Pip
  • 9 posts

Posted 15 August 2013 - 01:49 AM

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 ? 



#4 PeterMichael

PeterMichael

    Member

  • Members
  • PipPip
  • 18 posts

Posted 12 September 2013 - 02:55 PM

But aren’t there more mistakes in this coding?? Please check one more time..


Edited by PeterMichael, 12 September 2013 - 02:55 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com