https://gyazo.com/1440b13007c6e011ec46218ceecabb6a
As you can see by the screenshot, there is a white border around the main content of the page. Ive tried making everything 100% width etc. but nothing seems to work. The nav bar is just a ul and the bottom part is a container div with other child divs heald inside.
The <body> element has a default margin. You need to set it to zero:
body {
margin: 0;
}
try adding css as below:
body, html {
margin: 0;
padding: 0;
}
Related
I'm having some trouble with an area of space between the top of the browser window and my 'head' element, and the 'head' element and my 'body'.
Thus far, adding the following class has not resulted in any improvement:
.header{ <=== I have also attempted .head with no effect
position: absolute;
top: o;
}
I have also experimented with padding and margins, but simply cannot get the head content to "kiss" both the top of the screen and body content.
You can see a rundown of my HTML and CSS here: https://jsfiddle.net/2w3vzstf/
How do I overcome this?
body {
margin: 0;
}
The lower spacing you dont like is the #menu having a margin-top of 10px
Should sort out the spacing above the page.
Try, commenting out the top margin in the menu CSS definition.
#menu {
/* margin-top: 10px; */
Is this what you wanted?
JsFiddle
Your fiddle shows some markup problems.
<head> is not the place for any page content, even the "header". That should all go in the <body> tag.
I have modified your fiddle to show how the css can be modified to get the effect you want:
https://jsfiddle.net/1kn4tnjz/
Basically you set
margin: 0;
for the <body> and <div id="menu"> elements
I'm having trouble figuring out how to make the menu and footer expand across the screen...as of now they only are body width 960px...
page link: www.kvf.fo/vix
I saw your page.
you have wrapped your footer and main content inside body and you have given body width:960px;.
so the footer taking 100% width of body i.e 960px.
To get the desired result don't wrap footer inside body.
use different div for footer and main content of the page.
And assign the div width:960px; which wrapped main content.
Don't give dody width:960px;
You can just simply set the width to 100% in css, nothing more.
#menu {
width: 100%;
}
#footer {
width: 100%;
}
Also to get rid of the spacing on the left: just do:
body {
margin: 0px;
}
Which gets rid of all the nasty margins.
body style has a
overflow: hidden
You may want to review how you have structured your page
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
I am working on a website, at the moment on a sign-up page. Its all perfect, right until i realize some very annoying. I have kinda 2 elements on this page. A sign up div, and an img, for the logo in the top. And it is not even close to fill the whole html page. But it still adds the SCROLL BARS, and i can scroll like 20 px up and down, and from side to side. Very annoying plz help
You want to add margin: 0; to your body.
It's already 100% wide, and the margin pushes the width beyond the space available on screen. This causes a vertical scrollbar, and that, in turn, causes a horizontal scrollbar.
This can be fixed in two ways
Either change the width and height of the body to auto as:
html, body {
width: auto;
height: auto;
background: #11BD83;
}
JsFiddle
Or as suggested by #Per Salbark add margin : 0 to the body
html, body {
width: 100%;
height: 100%;
margin : 0;
background: #11BD83;
}
JsFiddle
Just building a website and I want to do something I haven't come across yet. When the top of the site has no margin but the main content does have, same as the top of this site.
Can someone point me in the right direction?
currently I have given it:
<div id="header"><h1>Header</h1></div>
Just a bit stuck.
The body and/or html element will have margin and/or padding by default (the exact values depend on the browser).
If you remove them, then any div (if you don't apply CSS that restricts the width) that is a child of the body will then fill the width of the window.
html, body {
margin: 0;
padding: 0;
}
You can then set a margin on the main content.
#main_content {
margin: 5px 10%;
}
If I understand your question correctly this is what you need to do in css:
body {
margin:0px;
padding: 0px;
}
That's all.