CSS Forum

**swz** · 10-27-2008, 02:40 AM

Ok I know there is a stickied item about how to center your layout with CSS but every method I try doesn't seem to work with the code I have. I think it may have to do with the fact that the code was output by photoshop slices.

Can anyone lend some help?

Here's my code:

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>
<title>MDKLayout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#container {
  margin: 0 auto;
  width: 900px;
  text-align: left;
  }

#index-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:24px;
	height:1000px;
}

#index-02_ {
	position:absolute;
	left:24px;
	top:0px;
	width:974px;
	height:146px;
}

#index-03_ {
	position:absolute;
	left:998px;
	top:0px;
	width:26px;
	height:1000px;
}

#index-04_ {
	position:absolute;
	left:24px;
	top:146px;
	width:131px;
	height:20px;
}

#index-05_ {
	position:absolute;
	left:155px;
	top:146px;
	width:135px;
	height:20px;
}

#index-06_ {
	position:absolute;
	left:290px;
	top:146px;
	width:105px;
	height:20px;
}

#index-07_ {
	position:absolute;
	left:395px;
	top:146px;
	width:100px;
	height:20px;
}

#index-08_ {
	position:absolute;
	left:495px;
	top:146px;
	width:240px;
	height:20px;
}

#index-09_ {
	position:absolute;
	left:735px;
	top:146px;
	width:263px;
	height:41px;
}

#index-10_ {
	position:absolute;
	left:24px;
	top:166px;
	width:100px;
	height:21px;
}

#index-11_ {
	position:absolute;
	left:124px;
	top:166px;
	width:53px;
	height:21px;
}

#index-12_ {
	position:absolute;
	left:177px;
	top:166px;
	width:44px;
	height:21px;
}

#index-13_ {
	position:absolute;
	left:221px;
	top:166px;
	width:69px;
	height:21px;
}

#index-14_ {
	position:absolute;
	left:290px;
	top:166px;
	width:60px;
	height:21px;
}

#index-15_ {
	position:absolute;
	left:350px;
	top:166px;
	width:63px;
	height:21px;
}

#index-16_ {
	position:absolute;
	left:413px;
	top:166px;
	width:63px;
	height:21px;
}

#index-17_ {
	position:absolute;
	left:476px;
	top:166px;
	width:71px;
	height:21px;
}

#index-18_ {
	position:absolute;
	left:547px;
	top:166px;
	width:68px;
	height:21px;
}

#index-19_ {
	position:absolute;
	left:615px;
	top:166px;
	width:120px;
	height:21px;
}

#index-20_ {
	position:absolute;
	left:24px;
	top:187px;
	width:974px;
	height:35px;
}

#index-21_ {
	position:absolute;
	left:24px;
	top:222px;
	width:743px;
	height:663px;
}

#index-22_ {
	position:absolute;
	left:767px;
	top:222px;
	width:231px;
	height:49px;
}

#index-23_ {
	position:absolute;
	left:767px;
	top:271px;
	width:207px;
	height:330px;
}

#index-24_ {
	position:absolute;
	left:974px;
	top:271px;
	width:24px;
	height:8px;
}

#index-25_ {
	position:absolute;
	left:974px;
	top:279px;
	width:24px;
	height:641px;
}

#index-26_ {
	position:absolute;
	left:767px;
	top:601px;
	width:207px;
	height:9px;
}

#index-27_ {
	position:absolute;
	left:767px;
	top:610px;
	width:207px;
	height:240px;
}

#index-28_ {
	position:absolute;
	left:767px;
	top:850px;
	width:207px;
	height:35px;
}

#index-29_ {
	position:absolute;
	left:24px;
	top:885px;
	width:950px;
	height:35px;
}

#index-30_ {
	position:absolute;
	left:24px;
	top:920px;
	width:974px;
	height:80px;
}

-->
</style>
</head>
<body background="C:\Users\swaze001\Desktop\MDK\images\bgrepeat.jpg" style="background-color:#FFFFFF;">
<div id="container">
    <div id="index-01_">
		<img id="index_01" src="images/index_01.jpg" width="24" height="1000" alt="" />
	</div>
	<div id="index-02_"><img id="index_02" src="images/index_02.jpg" width="974" height="146" alt="" /></div>
	<div id="index-03_">
		<img id="index_03" src="images/index_03.jpg" width="26" height="1000" alt="" />
	</div>
	<div id="index-04_">
		<img id="index_04" src="images/index_04.jpg" width="131" height="20" alt="" />
	</div>
	<div id="index-05_">
		<img id="index_05" src="images/index_05.jpg" width="135" height="20" alt="" />
	</div>
	<div id="index-06_">
		<img id="index_06" src="images/index_06.jpg" width="105" height="20" alt="" />
	</div>
	<div id="index-07_">
		<img id="index_07" src="images/index_07.jpg" width="100" height="20" alt="" />
	</div>
	<div id="index-08_">
		<img id="index_08" src="images/index_08.jpg" width="240" height="20" alt="" />
	</div>
	<div id="index-09_">
		<img id="index_09" src="images/index_09.jpg" width="263" height="41" alt="" />
	</div>
	<div id="index-10_">
		<img id="index_10" src="images/index_10.jpg" width="100" height="21" alt="" />
	</div>
	<div id="index-11_">
		<img id="index_11" src="images/index_11.jpg" width="53" height="21" alt="" />
	</div>
	<div id="index-12_">
		<img id="index_12" src="images/index_12.jpg" width="44" height="21" alt="" />
	</div>
	<div id="index-13_">
		<img id="index_13" src="images/index_13.jpg" width="69" height="21" alt="" />
	</div>
	<div id="index-14_">
		<img id="index_14" src="images/index_14.jpg" width="60" height="21" alt="" />
	</div>
	<div id="index-15_">
		<img id="index_15" src="images/index_15.jpg" width="63" height="21" alt="" />
	</div>
	<div id="index-16_">
		<img id="index_16" src="images/index_16.jpg" width="63" height="21" alt="" />
	</div>
	<div id="index-17_">
		<img id="index_17" src="images/index_17.jpg" width="71" height="21" alt="" />
	</div>
	<div id="index-18_">
		<img id="index_18" src="images/index_18.jpg" width="68" height="21" alt="" />
	</div>
	<div id="index-19_">
		<img id="index_19" src="images/index_19.jpg" width="120" height="21" alt="" />
	</div>
	<div id="index-20_">
		<img id="index_20" src="images/index_20.jpg" width="974" height="35" alt="" />
	</div>
	<div id="index-21_">
		<img id="index_21" src="images/index_21.jpg" width="743" height="663" alt="" />
	</div>
	<div id="index-22_">
		<img id="index_22" src="images/index_22.jpg" width="231" height="49" alt="" />
	</div>
	<div id="index-23_">
		<img id="index_23" src="images/index_23.jpg" width="207" height="330" alt="" />
	</div>
	<div id="index-24_">
		<img id="index_24" src="images/index_24.jpg" width="24" height="8" alt="" />
	</div>
	<div id="index-25_">
		<img id="index_25" src="images/index_25.jpg" width="24" height="641" alt="" />
	</div>
	<div id="index-26_">
		<img id="index_26" src="images/index_26.jpg" width="207" height="9" alt="" />
	</div>
	<div id="index-27_">
		<img id="index_27" src="images/index_27.jpg" width="207" height="240" alt="" />
	</div>
	<div id="index-28_">
		<img id="index_28" src="images/index_28.jpg" width="207" height="35" alt="" />
	</div>
	<div id="index-29_">
		<img id="index_29" src="images/index_29.jpg" width="950" height="35" alt="" />
	</div>
	<div id="index-30_">
		<img id="index_30" src="images/index_30.jpg" width="974" height="80" alt="" />
	</div>
</div>
</body>
</html>

**chrishirst** · 10-27-2008, 04:49 AM

URL needed

**Brian07002** · 10-27-2008, 06:25 AM

make sure that each image 'slice' is center in your css

**swz** · 10-27-2008, 06:26 AM

Quote:

Originally Posted by chrishirst

URL needed

http://swz.fraglife.com/MDK/

**swz** · 10-27-2008, 06:27 AM

Quote:

Originally Posted by Brian07002

make sure that each image 'slice' is center in your css

So what change would actually occur in the code?

**wayfarer07** · 07:39 AM

Ok, for one thing, you don't need all that position: absolute. The reason it is not centering, is because you've absolutely positioned everything, but not relative to the #container. You can fix it by putting {position: relative;} inside of the #container block, which will cause everything to snap into place. I still recommend you learn to do layouts without excessive absolute positioning.

**swz** · 10-27-2008, 08:55 AM

Quote:

Originally Posted by wayfarer07

Ok, for one thing, you don't need all that position: absolute. The reason it is not centering, is because you've absolutely positioned everything, but not relative to the #container. You can fix it by putting {position: relative;} inside of the #container block, which will cause everything to snap into place. I still recommend you learn to do layouts without excessive absolute positioning.

Thanks!

The layout is now centered, but I am still having one last little snag here.

After I assigned #container as position:relative, the layout has like a padding or spacing from the top where the layout should meet the browser. Any insight?

Here is a screencap of what I am talking about. (The layout needs to be flush with the top of the browser window).

**LadynRed** · 10-27-2008, 09:29 AM

Your #container isn't 'containing' anything. You REALLY need to get rid of ALL the position:absolute and you have a super serious case of div-itis that you don't need at all.

I would suggest the following:
www.cssslicingguide.com
and
http://www.subcide.com/tutorials/csslayout/

**wayfarer07** · 10-27-2008, 10:59 AM

The spacing at the top is a result of a default margin on the body. Now that everything is relative to the container instead of the body, it is correctly showing up.

CSS

Code:

body {
margin: 0;
}

will eliminate the spacing.

However, I totally agree with LadynRed, the way this site is laid out is just asking for trouble.

**vidal** · 11-04-2008, 03:57 AM

css

body {text-align:center;}
#container {margin:0 auto;width:780px;}

html

<body>
<div id="container">center me</div>
</body>

This should do the trick!