Jump to content


Photo

Please help ... I cant centre my content


  • Please log in to reply
6 replies to this topic

#1 Accurax

Accurax
  • Members
  • PipPipPip
  • Advanced Member
  • 246 posts

Posted 10 October 2006 - 12:27 PM

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 ....

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;
}

Please, i really appreciate any help  :)


#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 10 October 2006 - 12:41 PM

to get a centering page that just works 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):
<body>
<div id="#wrapper">
Content goes in here
</div>
</body>

CSS:
body {
  text-align: center;
}

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

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
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 Accurax

Accurax
  • Members
  • PipPipPip
  • Advanced Member
  • 246 posts

Posted 10 October 2006 - 01:14 PM

This doesnt work ........ how exactly am i meant to position the divwrapper withing the body tag ???

#4 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 10 October 2006 - 01:50 PM

Have you thort about useing a table then postion all of the information to the postion as you desire.
Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#5 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 10 October 2006 - 01:52 PM

This doesnt work ........ how exactly am i meant to position the divwrapper withing the body tag ???


this does work. here's an example page:
<!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>

as i stated before, though, your page has to be a fixed width. your wrapper 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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#6 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 10 October 2006 - 01:53 PM

Have you thort about useing a table then postion all of the information to the postion as you desire.


ugh... please don't 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. ;)
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#7 Accurax

Accurax
  • Members
  • PipPipPip
  • Advanced Member
  • 246 posts

Posted 10 October 2006 - 02:10 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users