DarkxPunk Posted October 18, 2012 Share Posted October 18, 2012 (edited) I want a menu to basically hover as I scroll. So obviously Position: Fixed. But within this menu I have one element floating right. Position: Fixed screws that up. How can I fix this? Edited October 30, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
Ingolme Posted October 18, 2012 Share Posted October 18, 2012 In what way?Is this floated element inside the positioned one or is it independent? Link to comment Share on other sites More sharing options...
DarkxPunk Posted October 23, 2012 Author Share Posted October 23, 2012 check beta.ormt.ca I want the menu to move. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2012 Share Posted October 23, 2012 You want menu to remain at top as you scroll down??? give #nav only position: fixed; you will need to give it width, as it will collapse and not follow the rules of shrinking to content anymore, elements below it will move up to take up the space it once occupied, so the top one will require a margin-top, to force it down to its original position. IF that is what you mean? Link to comment Share on other sites More sharing options...
DarkxPunk Posted October 23, 2012 Author Share Posted October 23, 2012 That is exactly what I want and I managed to do that, but then I ran into a big problem of my float right (used on the search field) not working. Thats my problem as the subject of this post says. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2012 Share Posted October 23, 2012 But within this menu I have one element floating right suggests float right element as you say IS WITHIN MENU, the menu is what is contained between #nav element and it closing tag, therefore right floated search element is not part of menu, and therefore not as described in subject. place outer container around header, give this position: fixed; top:0; left:0; right:0; give header a width: 980px; as this will be removed from confinement width of wrap completely. adjust element below it! as mention before, done! Link to comment Share on other sites More sharing options...
DarkxPunk Posted October 23, 2012 Author Share Posted October 23, 2012 I have attempted that but it screws up the floating, my search field flys to the left.Any ideas? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 23, 2012 Share Posted October 23, 2012 changed it using firebug in firefox, and inspect element in chrome, and it worked fine in both, try again! 1 Link to comment Share on other sites More sharing options...
DarkxPunk Posted October 23, 2012 Author Share Posted October 23, 2012 Okay solved it and did some playing. For my understanding can you tell me why zeroing that stuff out is so important?Thanks for all the help guys. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2012 Share Posted October 24, 2012 If you don't define at least top: left: in some cases it will act weird and place itself at the top edge of elements that use top margins that are below it, or below and left of margins, padding etc applied to body (by default about 10px margin). The left:0;, top:0; will force it to top, and left edge of browser window, and with the addition of right:0; force it to the right edge of browser filling the entire width of screen, but! why not use width:100%; if you use width: 100% on a 1024px width browser window, and then add 20px margin, it remains 1024px in width, and is forced to right by left margin, so you end up margin gap on left, and no margin gap on right as the right edge of this width:100% (1024px;) position: fixed; element and right margin is forced beyond right browser window screen edge, and because it is position: fixed; no scrollbars will show. Using position: fixed; top:0; left: right:0 margin:0 20px; you will get want you wanted, 20px margin either side, with remaining area taken up by the element that is available to it within applied margins. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now