Removing white margin from site

Johnatan56 · Aug 22, 2015

Hi,

I currently working on a HTML website where I have made a div which contains the background(a 200x200 texture/image on repeat) and another div which forces the content within to be 990px and centered (specifications as per project requirement).

The issue I am having is that there is a white border around the site that I cannot get rid of. I have tried setting the margin to 0 with no success.

HTML:

Code:

<div id="everything">
		<div id="centerContainer">
                </div>
</div>

CSS:

Code:

#everything{
	height:100%;
	width:100%;
	margin: 0px;
	background-image: url("textures/background.png");
}

#centercontainer{
	margin: auto;
	width: 60%;
	max-width:990px;
	background-color: grey;
	height: 100%;
}

EDIT:
The problem looks like this:

mercurial · Aug 22, 2015

What are those white numbers running along the side? Is that what you are referring to? I'm trying to reproduce.

Johnatan56 · Aug 22, 2015

mercurial said:
What are those white numbers running along the side? Is that what you are referring to? I'm trying to reproduce.

On the borders of the page. The background doesn't stretch to fill the screen. The white numbers are just for me, so I know how far down the site can stretch before it gets off the screen (was messing around with the footer).

mercurial · Aug 22, 2015

Johnatan56 said:
On the borders of the page. The background doesn't stretch to fill the screen. The white numbers are just for me, so I know how far down the site can stretch before it gets off the screen (was messing around with the footer).

Okay but in your first post you said you have set it to repeat. I don't see that you set that anywhere. What's the issue? Do you need the background to stretch the entire screen width?

Bryn · Aug 22, 2015

What happens if you add this to the top of your css file:

Code:

* {
 margin: 0;
 padding: 0;
}

Johnatan56 · Aug 22, 2015

mercurial said:
Okay but in your first post you said you have set it to repeat. I don't see that you set that anywhere. What's the issue? Do you need the background to stretch the entire screen width?

It auto-repeats without setting it so. It's 200x200px.

http://www45.zippyshare.com/v/PcEiBWZ6/file.html (82KB)

That's what it looks like currently.
EDIT2:
Yes, exactly. I want it to stretch the entire width.

EDIT:

Bryn said:
What happens if you add this to the top of your css file:

Code:

* { margin: 0; padding: 0; }

I've added it to the everything div, doesn't make a difference.

battletoad · Aug 22, 2015

Johnatan56 said:
EDIT:

I've added it to the everything div, doesn't make a difference.

well, if you had applied it, it would have worked. <body> inherently has a margin/padding, I think this is due to the browser's default css. So go with:

Code:

html, body {
   margin: 0;
   padding: 0;
}

Johnatan56 · Aug 22, 2015

battletoad said:
well, if you had applied it, it would have worked. <body> inherently has a margin/padding, I think this is due to the browser's default css. So go with:

Code:

html, body { margin: 0; padding: 0; }

thank you, I thought I added it. Really dumb on my part.

Thanks to all of you.

battletoad · Aug 22, 2015

Johnatan56 said:
thank you, I thought I added it. Really dumb on my part.

Thanks to all of you.

Not a problem, we all forgot tiny things now and then

Just had a look at your code, seems your <body> tag is empty. Although most browsers will automatically adjust, put your #everything div inside the body tag.

Also, you may like this one. Each of your links in your navigation has a divider "|". Try this:

Code:

#navigation li:after {
   display: inline-block;
   content: "|";
   font-size: 25px; //I prefer to use em, scales better over different device sizes
   line-height: 25px;
   color: blue; //or whatever colour your link is
   //plus whatever styling you think is necessary, such as margin etc.
}

#navigation li:last-child:after {
   content: "";
}

Now you simply need to populate your anchor tag with a name for the link, and the dividers will automatically add themselves. This is especially useful if you're generating the page server side and looping thru links

Johnatan56 · Aug 22, 2015

battletoad said:
Not a problem, we all forgot tiny things now and then

Just had a look at your code, seems your <body> tag is empty. Although most browsers will automatically adjust, put your #everything div inside the body tag.

Also, you may like this one. Each of your links in your navigation has a divider "|". Try this:

Code:

#navigation li:after { display: inline-block; content: "|"; font-size: 25px; //I prefer to use em, scales better over different device sizes line-height: 25px; color: blue; //or whatever colour your link is //plus whatever styling you think is necessary, such as margin etc. } #navigation li:last-child:after { content: ""; }

Now you simply need to populate your anchor tag with a name for the link, and the dividers will automatically add themselves. This is especially useful if you're generating the page server side and looping thru links

It's empty as I haven't added content. Just making the bones of the site to fill. This is for a class project.
Thanks for the navigation advice.

EDIT:
Is there a way to not have li:after happen on the last item in the list? It's a nice way of doing it as it doesn't make a:hover change its color.

Could you also help me with this:

I am trying to make the image be in the center (achieved that), but all the text will jump multiple lines if I type. It's as though the Image counts as one line. Would I have to put it in a div and center that in the box? How would I then make the text around it go nicely? Changing the background image won't work as it would have to stay consistent across pages (the image thing is only for the home page).

Thanks

Bryn · Aug 22, 2015

Johnatan56 said:
It's empty as I haven't added content. Just making the bones of the site to fill. This is for a class project.
Thanks for the navigation advice.

That's not what he meant. It's not good practice to have divs and stuff outside your body tags.

This should be the format of your html:

Code:

<!DOCTYPE html>
<html>
 <head>
  whatever
 </head>
 <body>
  whatever
 </body>
</html>

Johnatan56 · Aug 22, 2015

Bryn said:
That's not what he meant. It's not good practice to have divs and stuff outside your body tags.

This should be the format of your html:

Code:

<!DOCTYPE html> <html> <head> whatever </head> <body> whatever </body> </html>

The reason I have the outer two divs is that they are there to keep the rest of the page in the right place.
I know it is not good practice, but there is a reason behind it. I am not allowed to use the full screen space and the two outer div's constrict it so that the navigation/body/footer are in the right place.

EDIT:

Or should I make the everything div into the body and then make the inner body tag into a div with body as the ID? This way it would still be good practice.

EDIT2:
Okay, have done so.

Bryn · Aug 22, 2015

Johnatan56 said:
The reason I have the outer two divs is that they are there to keep the rest of the page in the right place.
I know it is not good practice, but there is a reason behind it. I am not allowed to use the full screen space and the two outer div's constrict it so that the navigation/body/footer are in the right place.

EDIT:

Or should I make the everything div into the body and then make the inner body tag into a div with body as the ID? This way it would still be good practice.

EDIT2:
Okay, have done so.

You can format a webpage however you like within the body tags, regardless of complexity. Every webpage you ever create should conform to the layout I provided above. Don't change anything that isn't 'whatever' unless you're using ASP.NET or something. Don't assign an ID or class to those tags, or substitute them with a div. Most websites use containers of some description to position themselves - just place them within the body.

battletoad · Aug 22, 2015

Johnatan56 said:
It's empty as I haven't added content. Just making the bones of the site to fill. This is for a class project.

Bryn put you on the right path wrt to this.

Johnatan56 said:
EDIT:
Is there a way to not have li:after happen on the last item in the list? It's a nice way of doing it as it doesn't make a:hover change its color.

The "#navigation li:last-child:after" I posted above should cover this for you. Specifically, "li:last-child:after" targets the :after pseudo-element of the last <li> element in #navigation; homework: attempt a few rules to make it display as you wish.

Johnatan56 said:
Could you also help me with this:
View attachment 286864
I am trying to make the image be in the center (achieved that), but all the text will jump multiple lines if I type. It's as though the Image counts as one line. Would I have to put it in a div and center that in the box? How would I then make the text around it go nicely?

Now you're going into advanced CSS territory. It is certainly possible using multiple divs with floats, transforms and css-shapes, but instead of making your head spin with a few lines of code I recommend you rather go with a different design.

Johnatan56 · Aug 23, 2015

battletoad said:
Bryn put you on the right path wrt to this.

The "#navigation li:last-child:after" I posted above should cover this for you. Specifically, "li:last-child:after" targets the :after pseudo-element of the last <li> element in #navigation; homework: attempt a few rules to make it display as you wish.

Now you're going into advanced CSS territory. It is certainly possible using multiple divs with floats, transforms and css-shapes, but instead of making your head spin with a few lines of code I recommend you rather go with a different design.

I eventually went with float: right, left and center for three different div's within the main div that contained the content. had to make sure the image was last or it would force the text on the right below it.

So it looks more like:

Text | IMAGE | Text
Text | " " | Text

Thanks for the help.

Join the MyBroadband community

Get started

Removing white margin from site

Johnatan56

Honorary Master

mercurial

MyBB Legend

Johnatan56

Honorary Master

mercurial

MyBB Legend

Bryn

Doubleplusgood

Johnatan56

Honorary Master

battletoad

Expert Member

Johnatan56

Honorary Master

battletoad

Expert Member

Johnatan56

Honorary Master

Bryn

Doubleplusgood

Johnatan56

Honorary Master

Bryn

Doubleplusgood

battletoad

Expert Member

Johnatan56

Honorary Master