Grow your CSS skills. Land your dream job.

Padding above top nav bar

  • # November 27, 2012 at 7:03 am

    Hey guys, I’m taking up HTML/CSS for the first time in years and I’ve followed some good tutorials and I believe I have the basics down. I’ve plucked up the courage to begin my own project and so far I’ve ran into a snag with the top nav bar. I’ve created a div id of topbar, and I’ve set the colour and what not, however the bar does not reach the very top of the page. I’ve set padding and margin to 0 in both body and in my topbar but I’m having problems getting it to reach the top.

    body {
    background-color: #121211;
    position: fixed;
    top: 0;
    width: 100%;
    height: 35px;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    #topbar {
    background-color: #FFFFFF;
    border-bottom: 4px solid #444442;
    height: 48px;
    max-width: 100%;
    min-width: 1000px;
    padding: 0;
    margin: 0;
    }

    # November 27, 2012 at 7:09 am

    I am unsure why you have put a 35px height on the body element and used a fixed position.

    Try this in your CSS instead;

    * { /* This is just a basic reset to strip all margin and padding */
    padding: 0;
    margin: 0
    }

    body {
    background: #121211; /* Shorthand for background properties */
    text-align: center; /* Aligns all text centrally */
    }

    #topbar {
    height: 48px;
    background: white; /* Possible to use names for colours (to an extent) */
    border-bottom: 4px solid #444442;
    }

    # November 27, 2012 at 7:11 am

    To start with…don’t do this:

    body {
    position: fixed;
    top: 0;
    width: 100%;
    height: 35px;
    }

    It’s unnecessary.

    You might want to look into a reset.css or normalize.css

    # November 27, 2012 at 7:14 am

    Thank you guys! I don’t know why either! Still learning I suppose. :)

    # November 27, 2012 at 7:14 am

    a child element of #topbar has top margin protruding out the top. you can do a number of things to fix the problem. 1) add overflow: hidden; to #topbar – this changes its block formatting context; 2) add a top padding or border to #topbar; 3) eliminate the top margin on the child element.

    Watson90, using the universal selector to zero padding and margin is not a good idea.

    # November 27, 2012 at 7:15 am

    @wolfcry911 – why is that? – I did state it was a basic reset, especially when the guy is just getting back into code.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".