Centering PS slices in CSS

Question

annabananah 0 Newbie Poster

15 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>

html-css web-design

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

Dani AI

Generated 10 Months Ago

Your CSS already includes a #container rule, but the HTML you posted does not. As and pointed out, that mismatch is the root cause: the absolutely positioned slices in your CSS expect a positioned ancestor to be their reference. Without the wrapper the browser positions those elements against the page (and things look stacked or misaligned).

Practical fix (minimal change): wrap the existing Table_01 div in the container your CSS expects, for example add <div id="container"> before Table_01 and the matching </div> after it. That gives the slices a positioned parent so each left/top value takes effect and the whole layout will be centered by the margin: 0 auto already in your stylesheet. If you prefer not to add a wrapper, make the element you want centered a non-absolute block (e.g. position: relative and a fixed width) and use margin: 0 auto so the browser centers it.

Notes and tips:

A 1980px fixed layout will cause horizontal scrolling on most screens today; consider a narrower or responsive approach (flexbox/grid) and export only the graphic pieces you need.
Use browser developer tools to inspect the DOM and computed styles to confirm which element is acting as the positioned ancestor.
Read more about how CSS positioning and centering work on MDN: CSS position (MDN) and .

All 2 Replies

ko ko 97 Practically a Master Poster

15 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 13 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

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers