Go to unboundsonics.com to see it.
At the top of the header and bottom of the footer, you can see the diagonal pinstripes don't line up. Everything is contained in a <div> (<div id="wrap"> to be exact) tag whose margins are automatic horizontally and 15px vertically.
If I change the vertical margins to auto, this problem doesn't occur. Any tips or observations i'm overlooking?
Any help appreciated!
PS: I know my script & styles are a mess but it's a work in progress. I just need to have a rough version for a project due tomorrow.
You problem is that you set BG picture for BOTH html and Body, and the body is little smaller, thats why they don't line up.
As a quick fix you can set bg to apply only to HTML,
But a better would be to set margin for html and body to 0px, padding for html 0px, and set you padding for body, and apply a bg to body.
EDIT
Quickfix:
body,html {
margin:0;
padding:0;
color:#B8C2C9;
background-image:url('bgstripes.png');
background-repeat:repeat;
}
change to:
body,html {
margin:0;
padding:0;
color:#B8C2C9;
}
html {
background-image:url('bgstripes.png');
}
Also note, its not necessary to use background:repeat, as that's the default behaviour
EDIT2
Well I would personally do something like this:
body,html {
margin:0;
padding:0;
}
body{
background:url(bgstripes.png) #B8C2C9;
padding:15px 0 15px 0;
}
#wrap {
width:900px;
margin:0 auto;
background:#0D1325;
border:1px outset white;
}
Normally we would put a bg to the body, but instead of margins on the container we would better do padding to the parent. Because margins will not necessary pull the height of the container, especially if the parent doesn't have a padding or border. This you can notice in IE7, it would probably collapse the bottom margin.
Related
I'm trying to get the green background color of this h1 text to go to the right side of the document, and be padded by the 50px that the body is padded in. Instead, it keeps sizing its width to the browser window upon loading. I'd also like to avoid setting a specific pixel width, as I want to use the CSS for a number of pages that all have different widths. I'm sorry if this has been answered already, I really have been looking for two hours.
Here is one of the website's pages
and here is the css (note: the text is in an h1 tag in a #neon div)
#neon h1 {
font-size:16px;
font-style:normal;
font-weight:normal;
padding:0;
margin:0;
background:#baebae;
padding:0;
margin:0;
}
body {
position:relative;
background-color:#eaeaea;
margin:50px;
padding:0px;
white-space: nowrap;
}
EDIT: https://jsfiddle.net/r4mhc8v9/
Try making the body margin and padding to 0. Then put everything BUT your neon h1 into a wrapper DIV (a div that holds the whole site) and put the previous body padding and margin setting inplace for this div.
You should be able to then make the green stripe go all the way...
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;
}
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'm trying to create a div header that extends the entire length of the page, but I keep getting a small white outer border on all divs so that the entire page has a thin white border around the outside. I'd like for the divs to extend to the very edge.
I've tried a few different css options but none seemed to have worked. E.G (Not all at once)
div
{
padding:0;
margin:0;
border:0;
margin: 0px auto 0px auto;
}
That sounds like the default margin/padding on the body. Some browsers uses margin, some (Opera) uses padding, so set both:
body { margin: 0; padding: 0; }
In general, you should be using some form of css reset or normalization. I'd check out this one, because it's by the master genius of css resets himself, Paul Irish.
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.