Forums

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

Home Forums CSS Fixing navigation to top on vertical, but keeping centred on horizontal

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40642
    tracybags
    Participant

    Sorry people, I have committed the cardinal sin and used some ‘tables’ (old habits die hard and css still scares me!). I have also used CSS and divs within (probably not very well though). I have a top navigation bar (very small website) and I didn’t use templates this time. The navigation bar needs to stay fixed to the top of the screen but it needs to be centred so on different browser sizes it will always appear centred. When I use fixed it seems to want to be fixed left. Second problem is when I do see it ‘fixed’ then go to a scrollable page, the scrolling content runs on top of the navigation bar instead of behind it. I saw a tutorial that spoke of z-index and he gave it 10 and I tried that, no joy.

    While I’m at it, there is also another section on the page which is currently sitting in a table cell, carefully positioned (sorry!). I would prefer to do this the proper way and have it in a div and positioned the same on all pages. This one needs to be a little way down the page below the navigation bar, and stay right of centre, again so it is in the same position across browsers.

    I know this is noobie stuff but there always seem too many options between css styling on the “box” or the “positioning” tabs and I get myself confused.

    So – any help (please don’t laugh at my code!, well, okay then you can) – greatly appreciated. The website is at http://www.maxcoghlan.com

    My stylesheet is here:
    THANK YOU!!!

    #navbar {
    margin-top: 0px;
    margin-right: auto;

    }

    .table-nav {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #CCC;
    font-weight: normal;
    }
    .table-nav a:link {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #CCC;
    text-decoration: none;
    }
    .table-nav a:visited {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #CCC;
    text-decoration: none;
    }
    .table-nav a:hover {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #9a1212;
    text-decoration: none;
    }
    .table-nav a:active {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #9a1212;
    text-decoration: none;
    }
    #biobox {
    font-family: “Century Gothic”, Verdana;
    color: #ccc;
    padding: 10px;
    font-size: medium;
    }
    .main a:link {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #ccc;
    text-decoration: none;
    }
    .main a:visited {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #ccc;
    text-decoration: none;
    }
    .main a:hover {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #9A1413;
    text-decoration: none;
    }
    .main a:active {
    font-family: “Century Gothic”, Verdana;
    font-size: medium;
    color: #9A1413;
    text-decoration: none;
    }
    #biobox #flowgal {
    width: 600px;
    left: auto;
    right: auto;
    clear: both;
    overflow: auto;
    margin: 0 auto;

    }
    #mediaicons {
    background-color: #FF0;
    width: 300px;
    position: relative;
    top: 100px;
    right: auto;
    height: 100px;
    clear: both;
    margin-top: 150px;
    margin-right: auto;
    }
    html {
    overflow-y: scroll;
    }

    #113472
    Paulie_D
    Member

    I would suggest that you put as much HTML & CSS into a Codepen example so that we can test and play.

    #113475
    damongolding
    Member

    This is a fix for your nav bar:

    #navbar{
    width:1000px;
    position: fixed;
    left: 50%;
    margin-left: -500px;
    top: 0px;
    background-color: black;
    z-index:100;
    }

    This works because I am telling the browser to move the div to the center of the page (this will align the left side of the div to the center) then I use margin to pull half of the div (500px) to the left. So as long as the nav always remains 1000px wide it will always be centered.

    I understand habits die hard but I really would suggest not using tables for this, CSS is fun and easy. Once you have learnt the basics the payoff is amazing.

    #113479
    damongolding
    Member

    @ToxicFire true, but as the site stands at the moment its fixed width and not responsive. If tracybags wants it to be responsive, well, thats a different kettle of fish.

    #113480
    Paulie_D
    Member

    I would second what @damongolding said…this would be a very good site to practice your HTML & CSS skills on **without using tables**.

    It’s nice and basic without a lot of fiddly content and the structure would be easy peasy.

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