Centering PS slices in CSS

Question

annabananah 0 Newbie Poster

13 Years Ago

I am very inexperienced, and am attempting to center the spices that I make in PS using Dreamweaver CS5 for a simple web page. I have tried implementing different types of code that I have found through hours of searching Google and this website, however I do not think that I am doing this correctly.

The only thing that i could manage to do is center all of the slices on top of each other, instead of having them in their position, with the page coming up centered.

If anyone could help it would be really appreciated!

<!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>01- home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (01- home.psd) -->
<style type="text/css">
<!--
#container {
	height:1200px;
	width:1980px;
	margin: 0 auto;
	position:relative
	  }
	  
#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1980px;
	height:1200px;
}

#id01--home-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:1980px;
	height:28px;
}

#id01--home-02_ {
	position:absolute;
	left:0px;
	top:28px;
	width:842px;
	height:482px;
}

#id01--home-03_ {
	position:absolute;
	left:842px;
	top:28px;
	width:298px;
	height:43px;
}

#id01--home-04_ {
	position:absolute;
	left:1140px;
	top:28px;
	width:840px;
	height:482px;
}

#id01--home-05_ {
	position:absolute;
	left:842px;
	top:71px;
	width:298px;
	height:439px;
}

#id01--home-06_ {
	position:absolute;
	left:0px;
	top:510px;
	width:513px;
	height:690px;
}

#id01--home-07_ {
	position:absolute;
	left:513px;
	top:510px;
	width:159px;
	height:160px;
}

#id01--home-08_ {
	position:absolute;
	left:672px;
	top:510px;
	width:159px;
	height:160px;
}

#id01--home-09_ {
	position:absolute;
	left:831px;
	top:510px;
	width:160px;
	height:160px;
}

#id01--home-10_ {
	position:absolute;
	left:991px;
	top:510px;
	width:159px;
	height:160px;
}

#id01--home-11_ {
	position:absolute;
	left:1150px;
	top:510px;
	width:159px;
	height:160px;
}

#id01--home-12_ {
	position:absolute;
	left:1309px;
	top:510px;
	width:159px;
	height:160px;
}

#id01--home-13_ {
	position:absolute;
	left:1468px;
	top:510px;
	width:512px;
	height:569px;
}

#id01--home-14_ {
	position:absolute;
	left:513px;
	top:670px;
	width:955px;
	height:326px;
}

#id01--home-15_ {
	position:absolute;
	left:513px;
	top:996px;
	width:376px;
	height:83px;
}

#id01--home-16_ {
	position:absolute;
	left:889px;
	top:996px;
	width:34px;
	height:28px;
}

#id01--home-17_ {
	position:absolute;
	left:923px;
	top:996px;
	width:35px;
	height:28px;
}

#id01--home-18_ {
	position:absolute;
	left:958px;
	top:996px;
	width:34px;
	height:28px;
}

#id01--home-19_ {
	position:absolute;
	left:992px;
	top:996px;
	width:34px;
	height:28px;
}

#id01--home-20_ {
	position:absolute;
	left:1026px;
	top:996px;
	width:35px;
	height:28px;
}

#id01--home-21_ {
	position:absolute;
	left:1061px;
	top:996px;
	width:34px;
	height:28px;
}

#id01--home-22_ {
	position:absolute;
	left:1095px;
	top:996px;
	width:373px;
	height:83px;
}

#id01--home-23_ {
	position:absolute;
	left:889px;
	top:1024px;
	width:206px;
	height:55px;
}

#id01--home-24_ {
	position:absolute;
	left:513px;
	top:1079px;
	width:130px;
	height:48px;
}

#id01--home-25_ {
	position:absolute;
	left:643px;
	top:1079px;
	width:329px;
	height:121px;
}

#id01--home-26_ {
	position:absolute;
	left:972px;
	top:1079px;
	width:84px;
	height:17px;
}

#id01--home-27_ {
	position:absolute;
	left:1056px;
	top:1079px;
	width:99px;
	height:17px;
}

#id01--home-28_ {
	position:absolute;
	left:1155px;
	top:1079px;
	width:103px;
	height:17px;
}

#id01--home-29_ {
	position:absolute;
	left:1258px;
	top:1079px;
	width:105px;
	height:17px;
}

#id01--home-30_ {
	position:absolute;
	left:1363px;
	top:1079px;
	width:86px;
	height:17px;
}

#id01--home-31_ {
	position:absolute;
	left:1449px;
	top:1079px;
	width:89px;
	height:17px;
}

#id01--home-32_ {
	position:absolute;
	left:1538px;
	top:1079px;
	width:442px;
	height:121px;
}

#id01--home-33_ {
	position:absolute;
	left:972px;
	top:1096px;
	width:566px;
	height:104px;
}

#id01--home-34_ {
	position:absolute;
	left:513px;
	top:1127px;
	width:130px;
	height:73px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (01- home.psd) -->
<div id="Table_01">
	<div id="id01--home-01_">
		<img id="id01__home_01" src="images/01--home_01.png" width="1980" height="28" alt="" />
	</div>
	<div id="id01--home-02_">
		<img id="id01__home_02" src="images/01--home_02.png" width="842" height="482" alt="" />
	</div>
	<div id="id01--home-03_">
		<img id="id01__home_03" src="images/01--home_03.jpg" width="298" height="43" alt="" />
	</div>
	<div id="id01--home-04_">
		<img id="id01__home_04" src="images/01--home_04.png" width="840" height="482" alt="" />
	</div>
	<div id="id01--home-05_">
		<img id="id01__home_05" src="images/01--home_05.png" width="298" height="439" alt="" />
	</div>
	<div id="id01--home-06_">
		<img id="id01__home_06" src="images/01--home_06.png" width="513" height="690" alt="" />
	</div>
	<div id="id01--home-07_">
		<img id="id01__home_07" src="images/01--home_07.png" width="159" height="160" alt="" />
	</div>
	<div id="id01--home-08_">
		<img id="id01__home_08" src="images/01--home_08.gif" width="159" height="160" alt="" />
	</div>
	<div id="id01--home-09_">
		<img id="id01__home_09" src="images/01--home_09.png" width="160" height="160" alt="" />
	</div>
	<div id="id01--home-10_">
		<img id="id01__home_10" src="images/01--home_10.png" width="159" height="160" alt="" />
	</div>
	<div id="id01--home-11_">
		<img id="id01__home_11" src="images/01--home_11.png" width="159" height="160" alt="" />
	</div>
	<div id="id01--home-12_">
		<img id="id01__home_12" src="images/01--home_12.png" width="159" height="160" alt="" />
	</div>
	<div id="id01--home-13_">
		<img id="id01__home_13" src="images/01--home_13.png" width="512" height="569" alt="" />
	</div>
	<div id="id01--home-14_">
		<img id="id01__home_14" src="images/01--home_14.png" width="955" height="326" alt="" />
	</div>
	<div id="id01--home-15_">
		<img id="id01__home_15" src="images/01--home_15.png" width="376" height="83" alt="" />
	</div>
	<div id="id01--home-16_">
		<img id="id01__home_16" src="images/01--home_16.png" width="34" height="28" alt="" />
	</div>
	<div id="id01--home-17_">
		<img id="id01__home_17" src="images/01--home_17.png" width="35" height="28" alt="" />
	</div>
	<div id="id01--home-18_">
		<img id="id01__home_18" src="images/01--home_18.png" width="34" height="28" alt="" />
	</div>
	<div id="id01--home-19_">
		<img id="id01__home_19" src="images/01--home_19.png" width="34" height="28" alt="" />
	</div>
	<div id="id01--home-20_">
		<img id="id01__home_20" src="images/01--home_20.png" width="35" height="28" alt="" />
	</div>
	<div id="id01--home-21_">
		<img id="id01__home_21" src="images/01--home_21.png" width="34" height="28" alt="" />
	</div>
	<div id="id01--home-22_">
		<img id="id01__home_22" src="images/01--home_22.png" width="373" height="83" alt="" />
	</div>
	<div id="id01--home-23_">
		<img id="id01__home_23" src="images/01--home_23.png" width="206" height="55" alt="" />
	</div>
	<div id="id01--home-24_">
		<img id="id01__home_24" src="images/01--home_24.png" width="130" height="48" alt="" />
	</div>
	<div id="id01--home-25_">
		<img id="id01__home_25" src="images/01--home_25.png" width="329" height="121" alt="" />
	</div>
	<div id="id01--home-26_">
		<img id="id01__home_26" src="images/01--home_26.png" width="84" height="17" alt="" />
	</div>
	<div id="id01--home-27_">
		<img id="id01__home_27" src="images/01--home_27.png" width="99" height="17" alt="" />
	</div>
	<div id="id01--home-28_">
		<img id="id01__home_28" src="images/01--home_28.png" width="103" height="17" alt="" />
	</div>
	<div id="id01--home-29_">
		<img id="id01__home_29" src="images/01--home_29.png" width="105" height="17" alt="" />
	</div>
	<div id="id01--home-30_">
		<img id="id01__home_30" src="images/01--home_30.png" width="86" height="17" alt="" />
	</div>
	<div id="id01--home-31_">
		<img id="id01__home_31" src="images/01--home_31.png" width="89" height="17" alt="" />
	</div>
	<div id="id01--home-32_">
		<img id="id01__home_32" src="images/01--home_32.png" width="442" height="121" alt="" />
	</div>
	<div id="id01--home-33_">
		<img id="id01__home_33" src="images/01--home_33.png" width="566" height="104" alt="" />
	</div>
	<div id="id01--home-34_">
		<img id="id01__home_34" src="images/01--home_34.png" width="130" height="73" alt="" />
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

web-design

3 Contributors
2 Replies
78 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by Joebhoy Designs

All 2 Replies

ko ko 97 Practically a Master Poster

13 Years Ago

#container {
    height:1200px;
    width:1980px;
    margin: 0 auto;
    position:relative
}

Where is the container ? You might be forgot to wrap the site with this container.

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Joebhoy Designs 0 Newbie Poster · Answer 1 · 2011-04-13T11:38:05+00:00

there is no container or wrapper div tags in your html coding so therefore it wont work. If you are going to use css to do websites you MUST make sure that you use all the correct div tags because it is looking for the elements in your css file and they just dont exist cos you didnt add it to the html.

Centering PS slices in CSS

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers