Welcome to WebmasterWorld Guest from 54.166.152.121

Forum Moderators: not2easy

Message Too Old, No Replies

Page borders or margins

     
8:52 pm on Sep 19, 2011 (gmt 0)



please bare with me because i have absolutely no knowledge of website coding. anyways, I have a site im building out of css but when i view the site, there are two white borders or margins on the sides. i dont know how to manipulate the code to change this. here are you pieces of code which i think are the areas of trouble:

.mainTable {
background: transparent;
color:#ffffff;
width:946px;
margin-left:auto;
margin-right:auto;
text-align:left;
border: none
}
.mainContent {
background: transparent;
color:#ffffff;
width:946px;
float:center;
overflow:hidden;
margin:10px 0px 20px 0px;
}
.navbarBottom, .navbarTop {
width:946px;
}
.navigation {
background: url(http://www.example.com/soundclip.jpg;
color:#5DA1F6;
width:946px;
height:2273px;
float:left;
z-index:9;
overflow:hidden;
margin:-5px 0px -25px 0px;
}
.navigation , .navigationDivider, .navigation .headline, .navigation .div, .navigation img {
display:none;
}
.navigation .statsNumbers {
color:white;
margin-left:400px;
}
form .mailingList {
margin-left:305px;
position:absolute;
top:830px;
z-index:3;
}
.mlheadline {display:none;}

and:

body {
background-image: url(http://www.example.com/soundclip.jpg;
background-color: #ffffff;
background-position: top center;
background-repeat: no-repeat;
background-attachment:fixed;
}
img {border: none; }
body, div, tr, td, select, textarea, input, option {
font-family:Verdana;
font-size:10px;
}

any help? can someone re-write this for me?

[edited by: alt131 at 5:18 am (utc) on Sep 20, 2011]
[edit reason] Thread Tidy [/edit]

8:24 am on Sep 20, 2011 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



personally i always start my css file with
*{border:0;margin:0;}

this sets the border and margin of everything to zero and after that i specifically set the borders/margins for any elements and so on
7:50 pm on Sep 20, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Possibly also {padding: 0;} ;)

At the very beginning of your post you say "borders or margins". They are different things, so let's make sure you know the difference. Memorize this picture:
[w3.org...]

A border is a visible attribute. You meet it most often in tables, in the form of a line around a cell. Or row, or the whole table. You can set the border's size, shape and color to anything you like, either for all four sides at once, or for each one separately. A simple way of testing css is to give your questioned element a ridiculous border like {dotted red} so you can make sure it's sitting exactly where you want it to be. And then you remove the border.

A margin is the space between two elements, such as the extra space between paragraphs in a plain-text html document. You can set its size, but not its color, because it uses the background color of whatever element is between the two things. (Technically its color is "transparent".) In general, margins overlap: if your paragraphs say {margin-top: 1em; margin-bottom: .5em;} the total space between paragraphs will be 1 em.

Padding is the space around an element, for example blank space around a table cell so it doesn't crash into its neighbor. Unlike a margin, padding is part of the element itself, so it uses the element's own background color or image and there is no overlap.

If an element has a border, it will be drawn outside the padding but inside the margin. The thickness of the border is measured separately; it isn't subtracted from either the padding or the margin.

In general, you want text to have side margins so it doesn't slam right up against the edge of the page. Unreadable. But the margin is only white if you haven't set a background for the html or body (in most but not all cases these two are the same).
 

Featured Threads

Hot Threads This Week

Hot Threads This Month