Jump to content

Please help ... I cant centre my content

Accurax

By Accurax
in CSS Help

 Share

Recommended Posts

Accurax Regular Member

Accurax

Posted
Posted
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  :)
Link to comment
https://forums.phpfreaks.com/topic/23530-please-help-i-cant-centre-my-content/
Share on other sites
obsidian Member

obsidian

Posted
Posted
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
obsidian Member

obsidian

Posted
Posted
[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.
obsidian Member

obsidian

Posted
Posted
[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. ;)
Accurax Regular Member

Accurax

Posted
  • Author
Posted
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
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.