0

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>
3
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Joebhoy Designs
0
#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 by mike_2000_17: Fixed formatting

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.