Jump to content

Archived

This topic is now archived and is closed to further replies.

Accurax

Please help ... I cant centre my content

Recommended Posts

The web page in question here is http://www.cbmgroup.co.uk

As you can see at the moment, all the content is alligned on the left hand side of the screen......... now, i would like the content to appear in the middle of the viewers screen.

I've tried various things, and some work on larger monitors, and some work on smaller monitors... i cant seem to find a method that just works.

Basically i have (for these purposes) 2 divs... divheader, which simply has the header bar set as a background immage, and divcontainer, which "contains" everything else.......... now, getting the header bar centred is easy.... i simply set the <body> to 100% width, the divheader to 100% width, and make the background immage centred.

The problem comes when i try to get div container centred under it......... div contaier "contains" divleft, divcentre and divright respectivly, now, basically, and it sounds like such a simple thing........ all i want tyo do is get #divcontainer to be centred relative to the 100% width body tag.......... but i cant acheive this......

Either the contents of divcontainer get moved to where i dont want them .......... or, when it looks like ive got it right on my 17" flatscreen at work, I get home and my little CRT has horrible horizontal scrollbars of doom............ please guys.... can anyone help me ??

Heres my css code ....

[code]body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.5em;
margin: 0px;
color: #000000;
background-color: #FFFFFF;
width: 975px;
background-position: top;
position: relative;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
#ulproductlist {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
color: #000066;
text-align: center;
padding-top: 10px;
margin: 0px;
}

#divHeader {
border-top-width: 20px;
border-bottom-width: 3px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFFFFF;
margin: 0px;
padding: 0px;
height: 205px;
width: 975px;
border-bottom-color: #000000;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/Art/headernew01.jpg);
clear: both;
float: none;
background-color: #FFFFFF;
border-right-width: 0px;
border-right-color: #FFFFFF;
}
#headerleft {
float: left;
margin: 0px;
padding: 0px;
width: 325px;
}
#headerright {
float: right;
margin: 0px;
padding: 0px;
border: 0px none;
width: 325px;
}
#headercenter {
clear: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #93ACD4;
margin: 0px;
float: none;
}
#divLeft {
margin: 0px;
float: left;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
width: 160px;
background-color: #FFFFFF;
border-top-width: 0px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: none;
background-repeat: no-repeat;
background-position: center top;
line-height: normal;
clear: right;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
}
#divRight {
float: right;
width: 160px;
padding-top: 10px;
padding-right: 7.5px;
padding-bottom: 0px;
padding-left: 7.5px;
background-color: #C4D0E7;
line-height: 1.7em;
text-align: center;
color: #000000;
border-top-width: 10px;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFFFFF;
border-right-color: #333333;
border-bottom-color: #000000;
border-left-color: #000000;
font-family: Arial, Helvetica, sans-serif;
clear: right;
}
#divsearch {
clear: both;
left: 235px;
padding-left: 235px;
}

#divCenter {
background-color: #C4D0E7;
text-align: justify;
padding-top: 1em;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 192px;
border-right-width: 3px;
border-left-width: 3px;
border-right-style: none;
border-left-style: none;
border-right-color: #000000;
border-left-color: #000000;
border-bottom-width: 2px;
border-bottom-style: groove;
border-bottom-color: #FFFFFF;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
font-family: Arial, Helvetica, sans-serif;
width: 555px;
color: #000000;
font-weight: 300;
position: relative;
top: auto;
line-height: 1.7em;
clear: none;
}
#divContainer {
width: 975px;
background-color: #FFFFFF;
border-right-width: 0%;
border-right-style: none;
border-top-width: 0%;
border-bottom-width: 0%;
border-left-width: 0%;
border-top-style: none;
border-bottom-style: none;
border-left-style: none;
}

.clearer {
font-size: 0px;
line-height: 0px;
clear: both;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
H1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.8em;
color: #000000;
border-bottom-width: 3px;
border-bottom-style: double;
border-bottom-color: #93ACD4;
font-variant: small-caps;
}
#ulmainnav {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#ulmainnav li {
background-repeat: no-repeat;
background-position: center center;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#ulmainnav a:link,#ulmainnav a:visited,#ulmainnav a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
display: block;
height: 65px;
width: 100px;
border: thin ridge #000000;
top: 30px;
margin-top: 0px;
padding: 0px 10px 0px 20px;
font-weight: bold;
color: #000000;
line-height: 60px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
float: none;
clear: both;
background-color: #95ABD4;
}
#ulmainnav a:hover, #ulmainnav a.current:link,#ulmainnav a.current:visited {
background-image: none;
color: #FFFFFF;
background-color: #999999;
}
#divFooter {
text-align: center;
margin: 0px;
padding: 0em;
border-top-width: 3px;
border-top-style: double;
border-top-color: #000000;
width: 975px;
background-color: #FFFFFF;
color: #000000;
}
h2 {
font-family: "Lucida Console", "Lucida Sans", "Lucida Sans Unicode";
font-size: 1.2em;
color: #333366;
text-align: center;
border-bottom-width: 3px;
border-bottom-style: double;
border-bottom-color: #FF3333;
padding-top: 10px;
}
.pcontact {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
text-align: center;
}
#divFooter a:link,#divFooter a:visited,#divFooter a:active {
color: #95ABD4;
text-decoration: none;
}
#divFooter a:hover {
color: #0033FF;
}
.buzserv {
padding: 0%;
border: 3px double #FF0000;
margin: 5px;
text-align: center;
}
.topright {
background-image: url(../images/Working/form/corner_tr.gif);
background-repeat: no-repeat;
background-position: right top;
}
.topleft {
background-image: url(../images/Working/form/cornermain.gif);
background-repeat: no-repeat;
background-position: left top;
}
.bottomright {
background-image: url(../images/Working/form/corner_br.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.bottomleft {
background-image: url(../images/Working/form/corner_bl.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #9966FF;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}
#divform {
background-color: #FFFFFF;
border-left-width: 160px;
border-left-style: solid;
border-left-color: #93ACD4;
margin: 0px;
padding: 0px;
width: 750px;
}
#ulpayrollnav {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
border: 0px none;
display: inline;
}
#ulpayrollnav li {
background-repeat: no-repeat;
background-position: center center;
padding: 0px;
margin: 0px;
border: 0px none;
display: inline;
}
#ulpayrollnav a:link,#ulpayrollnav a:visited,#ulpayrollnav a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
display: inline;
border: none;
padding: 0px 10px;
font-weight: bold;
color: #000000;
line-height: 10px;
margin: 0px;
}
#ulpayrollnav a:hover, #ulpayrollnav a.current:link,#ulpayrollnav a.current:visited {
background-image: none;
color: #93ACD4;
}
.embed_img_left {
float: left;
padding: 0px;
border-right-style: none;
margin: 5px;
}
.embed_img_right {
float: right;
clear: left;
margin: 10px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
color: #6699FF;
text-align: center;
font-size: 1.9em;
border-bottom-width: thin;
border-bottom-style: groove;
border-bottom-color: #000000;
}
#divBanner {
height: 30px;
padding-top: 5px;
padding-bottom: 5px;
float: none;
clear: left;
width: 468px;
left: 235px;
position: relative;
}
#ulpayroll {
list-style-type: square;
clear: none;
text-align: justify;
}
#divContainer a:link,#divContainer a:visited, #divContainer a:active {
text-decoration: underline;
color: #3333FF;
}
#divContainer a:hover,#divContainer a.current:link,#divContainer a.current:visited {
color: #FFFFFF;
}
#divLeft a:link,#diveLeft a:visited,#diveLeft a:active {
color: #0033FF;
}
#divLeft a:hover,#divleft a.current:link,#divLeft a.current:visited {
color: #CBD5EE;
}
h6 {
font-size: 30px;
color: #666666;
text-align: center;
height: 50px;
}
[/code]

Please, i really appreciate any help  :)

Share this post


Link to post
Share on other sites
to get a centering page that [b]just works[/b] like you asked for, you've got to come up with a fixed width you're happy with. once you have that in place, it's extremely simple to center a page. here's the basic idea:

HTML (with doctype and such added, of course):
[code]
<body>
<div id="#wrapper">
Content goes in here
</div>
</body>
[/code]

CSS:
[code]
body {
  text-align: center;
}

#wrapper {
  width: 600px;
  border: 1px solid #aaaaaa;
  margin: 0 auto;
  text-align: left;
}
[/code]

the text-align: center on the body helps with some older browsers, and the fixed width with the auto side margins centers a div in new gen browsers.

good luck

Share this post


Link to post
Share on other sites
This doesnt work ........ how exactly am i meant to position the divwrapper withing the body tag ???

Share this post


Link to post
Share on other sites
Have you thort about useing a table then postion all of the information to the postion as you desire.

Share this post


Link to post
Share on other sites
[quote author=Accurax link=topic=111060.msg449796#msg449796 date=1160486057]
This doesnt work ........ how exactly am i meant to position the divwrapper withing the body tag ???
[/quote]

this [b]does work[/b]. here's an example page:
[code]
<!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" />
<title>Untitled Document</title>
<style type="text/css">
body {
text-align: center;
}

#wrapper {
text-align: left;
border: 1px solid #aaaaaa;
padding: 10px;
width: 600px;
margin: 0 auto;
}
</style>
</head>

<body>
<div id="wrapper">
<p>Content goes here</p>
</div>
</body>
</html>
[/code]

as i stated before, though, your page has to be a fixed width. your [i]wrapper[/i] div, as the name implies, actually goes around your entire content. you'll want to change your width to the width of your page, though, instead of the 600px i've got.

Share this post


Link to post
Share on other sites
[quote author=redarrow link=topic=111060.msg449816#msg449816 date=1160488207]
Have you thort about useing a table then postion all of the information to the postion as you desire.
[/quote]

ugh... please [b]don't[/b] use tables for layout purposes. :P learn to use the CSS attributes as they are meant. they will be your best friend if you'll take the time to learn them. ;)

Share this post


Link to post
Share on other sites
I love you all ...... (well, nearly)

Ive done it !!!!

I had a rougue </div> that was closing my #divwrapper off just after the <body> tag. .....NOW... once ive got this darn navigation bar sorted ill be spring cleaning my code severely.

Burt sorting the navbar will also remove much cluttered code asell thanks mate

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.