This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
Related
I often look at code and see stuff like "-moz such and such CSS rules, -webkit such and such CSS rules" and think I need to do something like that in my case.
My page http://scope-stage.scholastic.com/ needs to appear as it does in firefox, but when I look at it in Chrome and Safari, it's completely backwards. In Firefox I could not get the margins how I wanted them to be with regular margins, that is - I had to use negative integers for the margins. What can I do to have the margins be the same in all browsers?
Here's my CSS on just one of the divs (I think I can apply any answer to the rest)
.colorScheme {background-color:#B9E9DA; width:500px; height: 340px; margin-top:-45px; padding:0;}
but you will clearly see the brokenness of it when you look at it in any browser other than FF.
Thanks for looking and helping.
I'm not 100% sure on this you will have to test but I believe you can solve your problem as follows.
* {
margin:0;
padding:0;
}
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin-top:-45px;
padding:0;
}
This will set all elements to have no padding or margin. Giving you control using CSS for all paddings and margins.
Alternatively you can just assign hardcoded to the single class but you will need to assign a value to EACH margin/Padding as follows
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin:-45px 0 0 0;
padding:0;
}
Try those and see if they work out for you.
I'm designing a website, I'm trying to get a simple coloured div across the top of the browser, I've tried simply using:
div{
width:100%;
}
but noticed there's white space on either side and on top of the screen.
I'm looking for something similar to the blue header on Facebook that fills the entire screen.
Any suggestions how to accomplish this?
There is always some margin and padding in all browsers for the body. So, try doing the following and recheck the results:-
*{margin: 0; padding: 0;}
The above code will remove all the extra margins and paddings from all the tags!
You should use normalize.css for a kick-start designing of your applications though.
did the body have margin?
Try adding:
body {
margin: 0;
padding: 0;
}
or use a reset for styles like: http://necolas.github.io/normalize.css/
It's because of default styles of your browser, use this to reset it:
* {
margin: 0;
padding: 0;
}
Demo
Besides that, I'd suggest you take a look at css reset which give you a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
On my website, the header is a div tag with a coloured background. The only problem is that it doesn't reach the "edges" of the window (Please see http://manpoints.uk.to/).
Any ideas of how to solve this?
Thanks, Josh.
This is a browser default css.
Add this to the head
<style>
body{
margin:0;
padding:0;
}
</style>
Or add it to a style sheet.
Try what #KP is suggesting, plus add #header{ width:100%; } to your stylesheet. What's happening is that your header does not have a defined width, and it's taking te maximum width of the content inside.
You may want to consider using a CSS reset technique to clear all browser-set styles. Your issue is that body by default has margin and padding.
In your stylesheet be sure to clear them by:
body
{
margin: 0;
padding: 0;
}
See this question for relevant CSS reset stylesheets: https://stackoverflow.com/questions/116754/best-css-reset
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here