Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Put navigation to the bottom

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #38510
    Jonny007MKD
    Member

    Hi,
    I’ve read the thread about moving the navigation markup to the end of the page and moving the navigation with “position: absolute” to the top. Here the first problem arises: I center my page with “margin: 0 auto” and this doesn’t work anymore with “position: absolute”.

    So I still have the navigation on top of the page (SEO doesn’t matter that much) and want to move it to the bottom, if the window gets too small. In FF, “position: absolute; top: 100%” works very fine, but in webkit the size of 100% is not the window height/width but anything else. Can you help me here?

    Size: http://new.ionas.eu

    greetz
    Jonny007

    #104415
    yinzdo
    Member

    I’m not sure I completely understand what you’re trying to do, but you could absolutely position a wrapper div with width: 100%. Your navigation could then be centered inside the wrapper.


    .wrapper {
    background: blue;
    height: 40px;
    position: aboslute;
    top: 0;
    width: 100%;
    }

    .wrapper .nav {
    background: red;
    height: 40px;
    margin: 0 auto;
    width: 960px;
    }

    Again, I’m not sure why you would want your nav at the end of your markup but the top of the page. But that’s how you would do it.

    #104497
    Jonny007MKD
    Member

    Well, this is actually what I do :) I’ve got a wrapper and the nav is centered with margin: 0 auto. But as soon as I try to move the wrapper with position:absolute, this doesn’t work anymore.

    I see two possible ways to solve my problem: Either I solve the first problem (which I think is some spec thing) or I move the nav 100% from top to the bottom. But here I’ve got the weird problem that top:100% is not the same in Gecko and Webkit

    greetz
    Jonny007

    P.S. see this post: https://css-tricks.com/navigation-markup-after-content/. Also I want the navigation after the content on small screens

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.