This question already has answers here:
How can I remove space (margin) above HTML header?
(8 answers)
Closed last year.
I have a very simple header:
<header>
<h1>Hello Everybody</h1>
</header>
And I have this CSS:
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
header {
background:lightgray;
margin:0;
padding:0;
height:100px;
position:relative;
}
But, I can not position my header on the top of the page. There is some blank space left.
I don't know why is that. Please help.
The h1 tag you have in your header has a default .67em margin. You need to set your h1 tag to margin-top: 0px; in order to get rid of the extra white space.
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
header {
background:lightgray;
margin:0;
padding:0;
height:100px;
position:relative;
}
h1{
margin-top: 0px;
}
That should do the trick.
It's because your <h1> still has margins on it.
h1 {
margin: 0;
}
EDIT:
Just as a quick note, if you only want to remove the top margin, do what #amol posted below, margin-top.
margin: 0 is shorthand for margin: 0 0 0 0, which combines all margin directions as such: margin: top right bottom left.
The <h1> tag within the header has a top margin which is pushing your <header> tag down.
Heading tags have default margin, you can use following code
h1{
margin-top: 0;
}
This is why it is a good practice to use a reset css file to eliminate default formatting applied by the browser: http://www.cssreset.com/.
Use bottom margin only, remove top margin
h1{
margin: 0 0 15px;
}
By default the h1 tag comes with a margin, all you have to do is to remove that margin, also some browsers like Google chrome add a default margin so you will also have to remove that margin from the body tag.
html, body {
margin:0px;
padding:0px;
}
h4 {
margin:0px;
padding:0px;
}
I hope this helped
This is due to the nature of your h1 tag. It automatically applies some sort of margin, based on what browser you're using.
To remove the gap use the following within your CSS:
h1 {
margin: 0px;
}
For the future you want to use Google Chrome or Firefox+Firebug and use the built-in tools to look through all elements within a webpage. It'll save you a lot of time and increases your efficiency.
Related
I am stuck trying to figure it out how exactly inline element and floated element behave when are next to each other. I have following code in which inline element comes before the floated one and the second situation when inline element comes after the floated one and in both situation.
html code is the same in both examples so I am gonna put it just here:
<body>
<p class="first">first paragraph</p>
<p class="second">second pargraph</p>
<p class="clearBoth"></p>
</body>
So here is first example in which is the inline element before the floated one, along with following css:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
display:inline;
background:yellow;
color:black;
}
p.second{
float:left;
background:black;
color:white;
}
and here is the link what this code does
Here is second example where the floated element is first element, along with the following css code:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
float:left;
background:yellow;
color:black;
}
p.second{
display:inline;
background:black;
color:white;
}
And here is link what it does
In both cases I've noticed that the float element will be first to the left no matter which one is first in html document, but I find this align very strangeto happen since I would normally expect both to be in same line.
That's because web browsers apply a margin property to the top and bottom of the <p> element.
For instance, Google chrome applies the following:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You need to reset the default user agent style sheet by using CSS Reset
As a tiny fix, just for the demo:
* { margin: 0; padding: 0; }
/* Or just:
p { margin: 0; }
*/
UPDATED DEMO #1
UPDATED DEMO #2
How does this CSS code center a webpage?
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
}
margin: auto;
centers any block.
But that's not the body that is centered, just a div whose id is "body" (which I find a little misleading).
Be careful when naming classes or IDs the same as body/head/footer/etc. The code you posted will work fine, because the margin:auto will center the block but that naming scheme could cause some accidental changes pretty easily. Try using #wrapper, #container, or something of the like.
There is nothing wrong.
body { ... } refers to the entire page, the body of your document.
#body { ... } is for sure a div in your body with ID = "body". The CSS is correct because it gives a fixed width and automatic margin on the left and on the right.
This will work in modern browsers, but you need to add some more attributes in order to work this in older versions of IE
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
text-align:center; /* align contents to center which will align #body center */
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
text-align:left; /* re-arranges contents of #body to default left */
}
I have a really dumb question to ask.
I am trying to make a div span 100% of the width of a webpage, but it doesn't reach. I want it to be dynamic (not specify the width in px) and I definitely don't want it to make a horizontal scroll bar appear.
I'm trying to make something similar to Stack Overflow's 100% page width 'alerts' which tell you when you've earned a new badge.
Screenshot of my site:
Code for the pink banner div
<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
</div>
your html body tag might have padding or margin css. you should set those to zero(0). I hope it will help.
Looks like you have padding on your body, which is preventing the div from expanding all the way.
In your css file, ensure that you don't have any padding on the body. If you don't have anything you can try adding this:
body {
padding: 0;
margin: 0;
}
Just add a css for the body to remove the padding and margin:
body {
padding: 0px;
margin: 0px;
}
Also you can apply just to left, right top and bottom margins:
body {
padding-top:0px;
padding-right:0px;
padding-bottom: 10px;
padding-left: 0px;
}
Type
body {
min-height:100%;
height:auto;
margin:0;
padding:0;
}
at the beginning of your CSS file.
I was having the same issue, I had a great big white line on the right hand side of my page. I found the following which was a life saver:
html, body {
width: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Actually it's quite easy. Make sure the parent container for pink banner div has 0 padding and 0 margin. In this case I'm assuming the container for your pink banner is just the body tag. Now copy the following snippet inside your head section of the page.
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
</style>
The html for your pink banner is also not correct. Replace
<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
</div>
with
<div style="padding:0px; margin:0px; width=100%; height:25px; background-color:#FF0099; background-image:url('pics/pink_bg.png');" >
</div>
A the beginning of each CSS document I always type:
html, body {
padding: 0;
margin: 0;
}
I never have any problems with unwanted outer margins or padding with that code.
I have a Footer that spans the width of the page. Within the footer there is an which is essentially acting as a footer background image that fills the entire width of the footer / page. However, in IE, there is some white space under the footer, when it should just be flush with the bottom of the page. Seems fine in Firefox, Safari, etc. Here's what I have, any recommendations on something to try?
<body>
<div id='container'>
<div id='content'></div
</div>
<div id='footer'></div>
</body>
CSS Is:
html {
font:62.5% 'Helvetica Neue';
color:#777676;
margin:0;
padding:0;
}
body {
font-size:1.8em; /* 18 px */
line-height:1.2em;
margin:0;
padding:0;
width:100%;
}
#container {
width:906px;
margin:0 auto;
height:100%;
position:relative;
z-index:10;
}
#content {
padding-top:20px;
}
div#footer {
position:relative;
bottom:0;
clear:both;
width:100%;
z-index:1;
}
div#footer img {
width:100%;
border:0 none;
}
Add display:block; on the image, that should fix it...
(and use code highlighting in your question if you want <tags> to be visible in your text...)
That could be a very involved answer. I have ran into this before and I forget now how I solved it. First, I should ask which version of IE your testing in, it could be old. I don't think this is as much of an issue in IE 8 and above. Next, is your DOCTYPE set. Then try setting the height and/or line-height on the footer. Make sure all sibling and parent elements have their "position", "top", and "left" set.
Have you tried positioning it "absolute" and if that doesn't work remove all other elements in the body, adding them back in one at a time till it breaks and then figure out what is wrong with the element you added.
I dont get it. I wrote the code to have the footer always at the bottom. lets say sticky-footer. Here is my code.
body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
#container {min-height:100%; position:relative;}
#body {
padding-bottom:20px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;/* Height of the footer */
background: #FC0;}
</style>
<div id="footer"> contact | the athens store | Mitropoleos 37 </div>
With these code it didnt work well, actually the footer was not at the bottom but a bit higher. And then I added in the very beginning an html tag like this and it worked! Why was it wrong before?
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
browsers have a default page margin and padding, thats why you got a little space under you bar, and that is why developers use a css reset to ower write these.
Or by useing a simple code
if you replace this
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
to this
* {
margin:0;
padding:0;
}
body {
background-color: #edecd8;
height:100%;
}
it will work and owewrite all the default browser paddings and margins
Browsers have a standard (and often differing) css for elements. The html element may have had a margin or padding applied, keeping your footer off the bottom a little bit.
Or the html element needed to be given the 100% height to get it to expand the full height of the window.
This is why CSS resets are used, to get to a baseline standard between the browsers.