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 */
}
Related
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.
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
The problem: (http://i.imgur.com/mU5HBoa.png)
As you can see in the image above the mainContent floats just below the actual top op the browser view port, i cant make it stick to the top and stay centered at the same time.
Also a quick side question, how do i get the #mainContent, .rightContentBorder and .leftContentBorder to get their height from the #contentBox ID
body {
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/BG_pattern.png);
background-repeat:repeat;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
text-align:left;
}
li {
text-align:left;
}
#contentBox {
margin: 1px auto 1px auto;
width:786px;
height:auto;
min-height:700px;
max-height:none;
}
.leftContentBorder {
width:27px;
height:700px;
float:left;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Leftside_orangebar1px.png);
background-repeat:repeat-y;
}
.rightContentBorder {
width:27px;
height:700px;
float:right;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Rightside_orangebar1px.png);
background-repeat:repeat-y;
}
#mainContent {
margin: 0 auto 0 auto;
width:732px;
height:700px;
background-color:#CCC;
}
The HTML
<body>
<div id="contentBox">
<div class="leftContentBorder"></div>
<div class="rightContentBorder"></div>
<div id="mainContent">
test
</div>
</div>
</body>
do a basic css reset like this:
* {
margin:0;
padding:0;
}
This removes default paddings margins on all elements.
Have you tried setting the body and html margin/padding in css?
html, body {
padding:0;
margin:0; }
As for getting the divs to take the height of their parent div. You can set divs to have height:100%; but that means nothing if the parent div doesn't have a set height. Your parent div has height:auto so it won't work.
body {
margin:0;
padding:0;
}
I wouldn't really touch the parent html. If the body rule fails, best guess are different values set along the way. If all else fails you could use positioning and make it absolute. Prepare for headaches though.
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.