Forums

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

Home Forums CSS Padding above top nav bar

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #41016
    Spock
    Member

    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;
    }

    #115588
    Watson90
    Member

    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;
    }

    #115590
    Paulie_D
    Member

    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

    #115591
    Spock
    Member

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

    #115592
    wolfcry911
    Participant

    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.

    #115593
    Watson90
    Member

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.