Results 1 to 6 of 6

Thread: fixed CSS navigation

  1. #1
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation fixed CSS navigation

    I'm trying to create my navigational div to where my content of my body will scroll behind it, and it will always be fixed at the top of the page; very similar to the footer application bar on facebook and myspace.
    Can anyone point me to a tutorial or provide me with the information i would need to build something along these lines?

    Thanks for all the help.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Code:
    #nav_bar {
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    height:you decide;
    }
    Code:
    <div id="nav_bar">
    nav bar
    </div>
    Check the spellings of the attributes there did this by hand quickly. The width 100% is extend the full width of the page as the facebook does remove that if you only want it as wide as your content.

  3. #3
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Sweet, appreciate the quick response Walrus; going to test it out and see how it works for my site.

  4. #4
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey walrus, got a quick question: the implementation actually fubar'd my site quite a bit.
    I'm using spry menus for my dropdowns, yet the DIV that contains them is now jumping all over the place, and for some reason, making the content 100%; also made the BG img that size, centering it in the header. Take a look at the implementation here and the original site here

    Any suggestions on how to fix that? as you can see the BG image in the static header is supposed to line up with the BG in the content area, which is also fixed. the main issue is the jumping nav bar content when the page is re-sized.

    ***walrus, i've done proper edits to make it so that the images and the header are not moving; only issue now is the Body content and the BG of that area, and the Footer itself as well. when i take my page-container div. and fix it, give it the padding it needs to sit in the middle of the BG image, the borders form the body-cont div go all the way to the top of the page, overlapping the fixed navigational header. then when i fix that content and give it it's left padding to center it as well, it all jumps to the top, and makes it as if i'm going to have to add proper placement padding to ALL my divs. any suggestions/help would be much appreciative.***
    Last edited by hkysk8r86; 11-23-2009 at 08:50 PM.

  5. #5
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    I don't see what your talking about. can you do a screen shot?

  6. #6
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    if you full screen the site; take a look at the BG; you'll notice that the blue circle BG continues onto the graphics used for the Header Navigation. once you un-maximize your browser, the background on the index2.html will jump around, as will the body content.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •