Centering Layout

[csa]

Could someone please help me with the positioning of my page layout? I want my site to appear centered, but if viewed in 800x600 it will still show all of the site. I realise I must need to remove the left and right margin in container, but I'm just not sure what with. Sorry there's a lot of code, I just thought it might be better to post everything, as I have a feeling that it might not worked based on the way I've produced the site.

Code: Select all

/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFFFF;
text-align:left;
}
#container{
width: 760px;
border: solid black 1px; 
margin-left: 10px;
margin-right:30px;
border: solid black 1px; 
height: 595px;
}
#main{
margin-left: 30px;
margin-right:30px;
}
#topheader{
height: 110px;
background-image:url(images/signpostheader.jpg);
background-repeat:no-repeat;
}
#left{
width: 155px;
float:left;
height: 350px;
background-color:#1177AA;
}
#center{
width: 388px;
height: 340px;
float:right;
text-align:right;
padding-right: 15px;
padding-top: 10px;
background-position: top right;
background-color:#FDF7E1;
}
#right{
width: 180px;
height: 350px;
float:right;
margin-left: -5px;
background-image:url(images/greyleft.gif);
background-color:#cccccc;
}
#topbandhome{
width: 171px;
height: 25px;
margin-top:85px;
float:right;
margin-left: -5px;
background-color:#cccccc;
}
#topbandstrip{
width: 580px;
height: 25px;
margin-top:85px;
float:left;
background-color:#1177AA;
}
#homeimage{
width: 800px;
height:95px;
background-image:url(images/exampleimage.gif);
background-color:#66CC66;
}
/* menu */
#navlist
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 5px;
width: 12em;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#navlist li
{
list-style: none;
margin: 0;
font-size: 1em;
}
#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 3px;
padding-left: 10px;
}
#navlist a#current { border-color: #5bd #035 #068 #f30; 
}
#navlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}
#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 10.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}
#navlist a:hover, #navlist a#current:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 3px;
padding-left: 10px;
}
#navlist a:active, #navlist a#current:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 3px;
padding-left: 10px;
}
/* bodytext */
.welcometxt{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:left;
margin-left:5px;
}
h1 {
 margin:0px 0px 5px 15px;
 font-size:12px;
 font-weight:bold;
 color:#000000;
 text-align:left;
 }
p {
 font:11px/20px verdana, arial, helvetica, sans-serif;
 margin:0px 0px 16px 15px;
 padding:0px;
 text-align:left;
 }
 .righttext{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
margin:30px 3px 0px 15px;
}
/* rightlist */
#rightlist{
color: black;
margin:0px 0px 0px -30px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
text-align:left;
float:left;
padding-left: 8px;
}
#rightlist ul li
{
list-style: none;
}
/* bottomlist */
#bottomlist{
width: 500px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#999999;
text-align:center;
padding-left: 140px;
}
a.bottomlist{
text-decoration:none;
color:#999999;
}
a.bottomlist:hover{
color:#999999;
text-decoration:underline;
}
/* toptelephone */
.telephone{
padding-top: 4px;
padding-left: 8px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#3399CC;
letter-spacing: 1px;
}
/* w3c */
#w3c{
width: 150px;
float:left;
padding-left: 12px;
margin:0px;
padding-top:0px;
margin-top: 0px;
}

html

Code: Select all

<div id="container">
<div id="topheader">
<div id="topbandstrip"></div>
<div id="topbandhome">
<div class="telephone">Tel: 08992 667 613</div>
</div><!--topbandhome end div-->
</div>
<div id="homeimage"></div>
<div id="right">
<div class="righttext">Some text here.</div><br>
<h1>Services</h1>
<div id="rightlist">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!--left end div-->
<div id="center">
<h1>Welcome </h1>
<p>Some text to go here.</p>
 
</div><!--left end div-->
<div id="left">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Welcome</a></li>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<div id="w3c"><img src="http://www.webforumz.com/images/w3c.gif" alt="W3C Accessibility" width="59" height="21"></div>
</ul>
</div>
</div><!--left end div-->
<div id="bottomlist">
Copyright 2006 <a href="http://www.handsfree.co.uk/terms.pdf" class="bottomlist">Terms</a> | <a href="http://www.handsfree.co.uk/privacy.pdf" class="bottomlist">Privacy</a><br>
Wenwroth Way, Tembridge, West Hants Tel: 666 612813<br> 
Email: <a href="mailto:enquiries@handfrees.co.uk" class="bottomlist">enquiries@handsfree.co.uk</a></div>
<!--bottomlist end div-->
<!--end div-->
</div>

[Rob]

Hey CSA.... it should not be that hard as you are using relative positioning over absolute..... so can you post up the URL so i can see more clearly how it sits?

[herkalees]

Change the #container CSS to this:
#container {
width: 760px;
border: solid black 1px;
position: relative;
left: 50%;
margin-left: -380px;
border: solid black 1px;
height: 595px;
}

[Rob]

Hey herkulees..... I've seen that used before, but I'm sure that breaks in a few browsers..... have you got any test cases for this?

[bmsterling]

rob, i use that method on just about every site I do and the only browser that has problems, you guessed, mac ie.

example site: not done yet: http://www.schafertmd.com/tmd2005

[bmsterling]

this is the css file http://www.schafertmd.com/tmd2005/co.../layout_v2.css

[Rob]

hmmm.... nice one.

Mac IE is the least of most people's worries, so OK, I guess!

[csa]

Thank you everyone. This works, and I now know for next time.