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.
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;
}
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.
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.
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;
To start with...don't do this:
It's unnecessary.
You might want to look into a reset.css or normalize.css
Thank you guys! I don't know why either! Still learning I suppose. :)
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.
@wolfcry911 - why is that? - I did state it was a basic reset, especially when the guy is just getting back into code.