My client wants the background to have white spaces on sides(weird?), but I couldn't find the solution.
Basically I want to have a background and white on sides for wide screens.
NOTE AND IMPORTANT: I need this on body.
How can I do this?
Try something like this CSS on your body
body { width: 974px; margin: 0 auto; }
The margin statement means that you give your body a top- and bottom-margin of 0. The auto-value means that however much horizontal space remains after you've used up 974px, will be evenly split to add the whitespace on each side of the body.
If you don't have a wrapping container like <header>, <section> that you can apply this width to, you might find yourself a little restricted when it comes to placing content like background-images and such that should display on the sides of the body. You will be left with only the html-element as a parent to the body so that doesn't offer a lot of layers or hooks where you can add advanced styling for decoration and such... just a word of caution :)
You give your container a width (say, 1000px), and then use margin: auto on it.
Demo
HTML
<body class="outerwrapper">
<div id="innerwrapeer" class="innerwrapeer">
</div>
</body>
CSS
body {
width:1024px;
height:auto;
background-color:white;
}
.innerwrapeer {
width:800px;
height:auto;
background-color:red;
}
Related
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
I'm trying to remove the white spaces. I've research and finaly remove the white spaces on .side and .main but i cant remove the white space on top and below(when zoomed out).
Here's my FIDDLE. I appreciate any help.
What i want is (see image below). I'm tyring to create it like that, even when zoomed out there's no white space.
The another solution is to add this to .top and doesn't affect the other elements (That means, other elements' padding and margin will keep the same):
margin:0px;
display:inline-block;
Please notice that only add it to .top. Do not do this:
* {
margin:0px;
padding:0px;
}
Because it will also affect other elements.
Ok, take a look at this: http://jsfiddle.net/EH83H/
I've added a few things like
* {
margin: 0;
padding: 0;
}
to remove paddings and margins by default, i've added a position fixed to the container, and height: 100% to the main and left divs. Also main and left divs have a container div named bottom
I have a variable width header that must have a background color that is as wide as the text (no wider). The only way I can think of doing this (with no extra markup) is to set the display to inline-block or float it to the left. The problem then though is that I cannot center the header (another requirement).
The closest I have got so far is by setting position: relative; on a floated header, pushing it across 50% from the left and then pulling it back 25% with negative margin, however this does not consistently center the header. It must remain in the flow of the document so position: absolute; is another no-go.
If you are aware of a way to do this using CSS only with no extra markup please let me know (pseudo-elements are fine, I'm not hassled about IE7 support)!
Solved using display: table; on the heading (with margin: 0 auto;).
you can give text-align:center; to the body as a global arrtibute & give display:inline-block to your header div. So,it's center your dynamic width in center like this :
CSS:
body{margin:0; padding:0;text-align:center}
p{text-align:left;}
.header{background:red;display:inline-block;}
Check this example http://jsfiddle.net/vpcXS/
replace the p tag with center as my markup is
<div id="header">
<center>hello</center>
</div>
and it's CSS is
body{
width:100%;
}
#header{
text-align:center;
}
#header center{
display:inline-block;
background:red;
}
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.
So I have an element that is placed directly inside body:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
body has default margins on all browsers, so all you need to do is shave them off:
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
Add these to the style tag in body, like the following one:
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
I found this problem continued even when setting the BODY MARGIN to zero.
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.