Why am I getting alot of extra space?

@music_scriptingDec 29.2007

I was designing my site and after I tought hey this looks good I noticed a crap load of extra space on the right side, I’m fairly new to css and I use Frontpage. Also I was having trouble my button background is not stretching the full left nav bar length even tough I tell it to.
CSS

~~[QUOTE]~~

#main
{
background: silver;
margin: -20px 0;
width: 870px;
height: 685px;
border: 4px inset silver;
border-top: 0px ridge black;
}
#headertop
{
background: white;
width: 850px;
height: 60px;
margin: 20px 10px;
border: 2px outset gray;
}
#headerimg
{
margin: 0px 180px;
}
#menuhead
{
background: transparent url(images/jconbutton.gif) center center repeat-x;
text-align: center;
text-decoration: none;
width: 150px;
margin: 0px 0px;
color: white;
border: 2px outset gray;
}
.menu
{

float: left; background: white; list-style-type: none; margin: 0px 20px; border: 3px double black; width: 150px; height: 500px; font-weight: bold;

}
.menu li a
{
text-align: center;
text-decoration: none;
background: transparent url(images/jconbuttonhover.gif) center center repeat-x;
width: 150px;
margin: 0px 0px;
color: blue;
border: 2px outset gray;
}
.menu li a:visited, .menu li a:active
{
color: white;
}
.menu li a:hover
{
background: transparent url(images/jconbutton.gif) center center repeat-x ;
color: silver;
border: 2px inset gray;
}
#textarea
{
float: right;
background: white;
border: 0px double black;
margin: -500px 190px;
width: 500px;
height: 400px;
}
#rgtnav
{
background: white;
float: right;
width: 150px;
height: 500px;
margin: -500px 700px;
border: 3px double black;
}
body
{
background: white;
width: 880px;
}
#footer
{
font-style: italic;
font-size: x-small;
bottom: -15%;
position: absolute;
}

[/QUOTE]

HTML

~~[QUOTE]~~

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>J-Con Web Design</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″ />
<link rel=”stylesheet” href=”jcon.css” type=”text/css” />
</head>

<body>
<div id=”main”>
<div id=”headertop”>
<img src=”images/jconbanner.gif” alt=”” id=”headerimg” />
</div>
<ul class=”menu”>
<li id=”menuhead”>Menu</li>
<li><a href=””>Home</a></li>
<li><a href=””>About Me</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Links</a></li>
<li><a href=””>Contact Me</a></li>
</ul>
<div id=”textarea”>
Hello! Welcome to the test.
</div>
<div id=”rgtnav”>
This is a right navagation..
</div>
<p id=”footer”>© 2007 J-Con Web Design. Site designed by J-Con Web Design.</p>
</div>
<p>
<a href=”http://validator.w3.org/check?uri=referer”><img
src=”http://www.w3.org/Icons/valid-xhtml10-blue“
alt=”Valid XHTML 1.0 Transitional” height=”31″ width=”88″ /></a>
</p>
</body>

</html>

[/QUOTE]

Could someone help me out here its driving me freakin mad. Thanks a bunch

to post a comment

CSS

4 Comments(s) _↴

@CentauriDec 30.2007 — #There are a number of problems here....

When specifying margins and padding using the shorthand property, when 4 figures are given they are top, right, bottom, left. When only two figures are given, they are top/bottom, left/right. You have set a few large margins on both sides of some elements, forcing the page wide.

As you have a fixed width #main div, the whole site will look better centred, and this can be done using auto for the #main side margins, and leaving the body width alone. I also assume the negative top margin on #main is an attempt to overcome margin collapse - the top margin of #headertop will "punch through" the top of #main, pulling #main down. Instead of usng a top margin on #headertop to space it down, use a top padding on #main.

Some maths are also in order. Border widths (as well as padding) are added to the set width of elements, so if the side columns are 150px wide with 2px border either side and 20px margin either side, then the available width for #textarea is only 482px maximum. When the columns are listed in the html in the order they will appear across the screen, float [B]all[/B] of them left against each other, and the negative top margins are no longer required.

The menu links are not full width as you cannot set widths on inline elements (the <a>s), so they need to be set to block display. Remembering that borders are added to the width, the proper width setting for the <a>s is 146px. As IE will add spacing between the <li>s in this scenario, float the <li>s left. As the whole menu is floated left, and has a left margin which acts against a non-floated object (the edge of #main), it should have its display mode set to inline to avoid IE6's doubled float margin bug.

As the footer is positioned absolutely, it needs a reference to position to. At the moment this is the screen, which means the footer overlaps the content when the screen size is smaller - setting a relative position on #main will give the footer that reference to ensure it is always positioned below. I would also recommend setting the left co-ordinate so that the browser doesn't have to guess where it is to go horizontally, and a bottom positon set in units other that % is more reliable cross-browser.

I would also recommend stripping all browser default margins and padding from everything at the start of the css using the universal selector (*) to give an even start point cross-browser.

Try this css :

[CODE]* {
 margin: 0;
 padding: 0;
 }
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 }
 #main {
 background: silver;
 margin: 0 auto;
 width: 870px;
 height: 685px;
 border: 4px inset silver;
 border-top: 0;
 padding-top: 20px;
 position: relative;
 }
 #headertop {
 background: white;
 height: 60px;
 margin: 0 10px 20px;
 border: 2px outset gray;
 }
 #headerimg {
 margin: 0px 180px;
 }
 #menuhead {
 background: transparent url(images/jconbutton.gif) center center repeat-x;
 text-align: center;
 text-decoration: none;
 color: white;
 border: 2px outset gray;
 width: 146px;
 }
 .menu {
 float: left;
 background: white;
 margin: 0px 20px;
 border: 3px double black;
 width: 150px;
 height: 500px;
 font-weight: bold;
 display: inline;
 }
 .menu li {
 list-style: none;
 float: left;
 }
 .menu li a {
 text-align: center;
 text-decoration: none;
 background: transparent url(images/jconbuttonhover.gif) center center repeat-x;
 margin: 0px 0px;
 color: blue;
 border: 2px outset gray;
 display: block;
 width: 146px;
 }
 .menu li a:visited, .menu li a:active {
 color: white;
 }
 .menu li a:hover {
 background: transparent url(images/jconbutton.gif) center center repeat-x ;
 color: silver;
 border: 2px inset gray;
 }
 #textarea {
 float: left;
 background: white;
 border: 0px double black;
 margin: 0 20px 0 0;
 width: 482px;
 height: 400px;
 }
 #rgtnav {
 background: white;
 float: left;
 width: 150px;
 height: 500px;
 border: 3px double black;
 }
 #footer {
 font-style: italic;
 font-size: 75%;
 bottom: -2em;
 position: absolute;
 left: 0px;
 }[/CODE]

@WebJoelDec 30.2007 — #body

{

background: white;

[B]width: 880px;[/B]

}[/QUOTE] Because you set the BODY just 10-pixels wider than the #main. There is virtually no reason to reduce the width of "body".

Try this: (I made some changes)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<style>

#main{position:relative; background: silver; margin:0 auto; width:870px;

height:685px; border: 4px inset silver; border-top: 4px ridge black;}

#headertop{background:white; width:850px; height:60px; margin:20px 10px; border:2px outset gray;}

#headerimg{margin:0px 180px;}

#menuhead{background:transparent url(images/jconbutton.gif) center center repeat-x; text-align:center;

text-decoration:none; width:150px; margin:0px 0px; color:white; border:2px outset gray;}

.menu{position:absolute; left:0px; top:90px; background:white; list-style-type:none; margin:0 20px; border:3px double black;

width:150px; height: 500px; font-weight:bold;}

.menu li a{text-align:center; text-decoration:none; background:transparent url(images/jconbuttonhover.gif) center center repeat-x;

width:150px; margin:0px 0px; color:blue; border:2px outset gray;}

.menu li a:visited, .menu li a:active{color:white;}

.menu li a:hover{background:transparent url(images/jconbutton.gif) center center repeat-x ; color:silver;

border:2px inset gray;}

#textarea{margin-left:190px; background:white; border:0px double black;

width:490px; height:400px;}

#rgtnav{position:absolute; top:90px; right:20px; background: white;

width:150px; height:500px; border:3px double black;}

body{background:white;}

#footer{font-style:italic; font-size:x-small; bottom:-15%; position:absolute;}

</style>

</head>

<body>

<div id="main">

<div id="headertop">

<img src="images/jconbanner.gif" alt="" id="headerimg" />

</div>

<ul class="menu">

<li id="menuhead">Menu</li>

<li><a href="">Home</a></li>

<li><a href="">About Me</a></li>

<li><a href="">Portfolio</a></li>

<li><a href="">Links</a></li>

<li><a href="">Contact Me</a></li>

</ul>

<div id="textarea">

Hello! Welcome to the test.

</div>

<div id="rgtnav">

This is a right navagation..

</div>

<p id="footer">© 2007 J-Con Web Design. Site designed by J-Con Web Design.</p>

</div>

<p style="width:850px; margin:10px auto;">

<a href="http://validator.w3.org/check?uri=referer"><img

src="http://www.w3.org/Icons/valid-xhtml10-blue"

alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

</p>

</body>

</html>[/QUOTE] This should 'center' now in all browsers.

edit:

...this can be done using auto for the #main side margins, and leaving the body width alone...[/QUOTE] Centauri's back & posting faster than ever! ([I]you posted while I was testing my redux[/I]..) ?

@CentauriDec 30.2007 — # Centauri's back & posting faster than ever! ([I]you posted while I was testing my redux[/I]..) ?[/QUOTE]

? ? Christmas break ..?

@music_scriptingauthorDec 31.2007 — #Hey thank you guys a bunch! I never knew about the universal selector (*). Thanks A Bunch!

Also in #CSS _↴

General [RESOLVED] After styling, link dosn't work Need positioning help... please!

Success!

Help @music_scripting spread the word by sharing this article on Twitter...

Tweet This

Why am I getting alot of extra space?

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Why am I getting alot of extra space?

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴