4 replies to this topic

[N-sane Noob]

Okay. So I have a site made up of divs and i want to nest them all in one and center them. I tried the wrapper method which I know I am supposed to use, but nothing works, and it is driving me insane. Site:

SITE

<style type="text/css">
<!--
body {   
background-image: url(Background.jpg);
}

This is my CSS:


#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 291px;
	top: 105px;
}
#apDiv2 {
	position:absolute;
	width:332px;
	height:41px;
	z-index:1;
	left: 767px;
	top: 54px;
}
#apDiv3 {
	position:absolute;
	width:51px;
	height:23px;
	z-index:2;
	left: 787px;
	top: 63px;
}
.style1 {
	color: #CE8D46;
	font-family: "Myriad Pro";
	font-size: 18px;
}
#apDiv4 {
	position:absolute;
	width:44px;
	height:23px;
	z-index:2;
	left: 829px;
	top: 67px;
}
#apDiv5 {
	position:absolute;
	width:58px;
	height:26px;
	z-index:2;
	left: 904px;
	top: 63px;
}
#apDiv6 {
	position:absolute;
	width:34px;
	height:23px;
	z-index:4;
}
#apDiv7 {
	position:absolute;
	width:82px;
	height:22px;
	z-index:3;
	left: 760px;
	top: 67px;
}
</style>

And in in the HTML body I have the divs.

Edited by N-sane Noob, 30 January 2008 - 10:45 PM.

[Mr.Shawn]

You could use an external div to center them. For example,

<div align="center">
<div id="container">
text here.
</div>
</div>

And with the container set with a style to prevent all the text inside the container being centered.

#container {
text-align: left;
}

Try not to use the left and top property as each user screen dimensions is different. From what I see from your site, your site is being swayed to the very right. Horizontal scrolling is not recommended.

Edited by Mr.Shawn, 31 January 2008 - 04:09 AM.

[VenomGraphics]

The way I use, that seems to work for all the browsers I've used [IE and Firefox], is this:

body {
margin: 0;
padding: 0;
}

Just look here to see it in action. [Only issue I have is that the menu doesn't show up properly in IE, but that has nothing to do with the centering.]

Edited by SniperFox, 31 January 2008 - 11:24 AM.

[N-sane Noob]

Thanks guys for the help, I have found the real deal of the solution.

#wrapper {
position:relative;
width:812px;
margin:0 auto;
}

[Mr.Shawn]

Nice one there. Learned something new today.