Member Avatar for annabananah

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
  • 79 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Joebhoy Designs
Member Avatar for ko ko 
#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 because: Fixed formatting
Member Avatar for Joebhoy Designs

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.

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.