Mac Forums

Mac Forums (http://www.mac-forums.com/forums/)
-   OS X - Operating System (http://www.mac-forums.com/forums/os-x-operating-system/)
-   -   How to centre a sliced image in Dreamweaver (http://www.mac-forums.com/forums/os-x-operating-system/264335-how-centre-sliced-image-dreamweaver.html)

Matsmac 01-21-2012 02:18 PM

How to centre a sliced image in Dreamweaver
 
Having followed scrupulously tutorials for slicing an image in photoshop to then save for the web and open in dreamweaver it appears impossible to centre the layout of the page. In the tutorials the image is automatically in a one cell table which can then be centred. My sliced image doesn't seem to be in a cell and I can't put it in one either.

I did see another thread about this but I cannot apply the solutions posted.

Below is the code for my page - which as it stands always appears on the left of the screen.

Any help would be appreciated

<html>
<head>
<title>Cathy-Mader</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (Cathy-Mader.psd) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:900px;
height:675px;
}

#mikeburdin-01 {
position:absolute;
left:0px;
top:0px;
width:900px;
height:106px;
}

#mikeburdin-02 {
position:absolute;
left:0px;
top:106px;
width:72px;
height:569px;
}

#mikeburdin-03 {
position:absolute;
left:72px;
top:106px;
width:155px;
height:24px;
}

#mikeburdin-04 {
position:absolute;
left:227px;
top:106px;
width:15px;
height:569px;
}

#mikeburdin-05 {
position:absolute;
left:242px;
top:106px;
width:421px;
height:569px;
}

#mikeburdin-06 {
position:absolute;
left:663px;
top:106px;
width:237px;
height:569px;
}

#mikeburdin-07 {
position:absolute;
left:72px;
top:130px;
width:155px;
height:24px;
}

#mikeburdin-08 {
position:absolute;
left:72px;
top:154px;
width:155px;
height:24px;
}

#mikeburdin-09 {
position:absolute;
left:72px;
top:178px;
width:155px;
height:24px;
}

#mikeburdin-10 {
position:absolute;
left:72px;
top:202px;
width:155px;
height:24px;
}

#mikeburdin-11 {
position:absolute;
left:72px;
top:226px;
width:155px;
height:24px;
}

#mikeburdin-12 {
position:absolute;
left:72px;
top:250px;
width:155px;
height:24px;
}

#mikeburdin-13 {
position:absolute;
left:72px;
top:274px;
width:155px;
height:24px;
}

#mikeburdin-14 {
position:absolute;
left:72px;
top:298px;
width:155px;
height:24px;
}

#mikeburdin-15 {
position:absolute;
left:72px;
top:322px;
width:155px;
height:353px;
}
.centrenow {
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body class="centrenow" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (Cathy-Mader.psd) -->
<div id="Table_01">
<div id="mikeburdin-01">
<img src="images/mikeburdin_01.gif" width="900" height="106" alt="">
</div>
<div id="mikeburdin-02">
<img src="images/mikeburdin_02.gif" width="72" height="569" alt="">
</div>
<div id="mikeburdin-03">
<img src="images/mikeburdin_03.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-04">
<img src="images/mikeburdin_04.gif" width="15" height="569" alt="">
</div>
<div id="mikeburdin-05">
<img src="images/mikeburdin_05.gif" width="421" height="569" alt="">
</div>
<div id="mikeburdin-06">
<img src="images/mikeburdin_06.gif" width="237" height="569" alt="">
</div>
<div id="mikeburdin-07">
<img src="images/mikeburdin_07.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-08">
<img src="images/mikeburdin_08.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-09">
<img src="images/mikeburdin_09.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-10">
<img src="images/mikeburdin_10.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-11">
<img src="images/mikeburdin_11.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-12">
<img src="images/mikeburdin_12.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-13">
<img src="images/mikeburdin_13.gif" width="155" height="24" alt="">
</div>
<div id="mikeburdin-14">
<img src="images/mikeburdin_14.jpg" width="155" height="24" alt="">
</div>
<div id="mikeburdin-15">
<img src="images/mikeburdin_15.gif" width="155" height="353" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
body {
text-align:center; /* for IE */
margin:0 auto; /* for the rest */
}

louishen 01-21-2012 03:05 PM

#Table_01 {
margin: 0 auto;
width:900px;
height:675px;
}

Matsmac 01-21-2012 04:39 PM

Many thanks but substituting this code for
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:900px;
height:675px;
works really well for the top slice but not the others.

I don't really know what I'm doing but I'm a keen learner

Mat

Matsmac 01-22-2012 07:18 PM

I've worked it out!
I hadn't generated a table when I saved for the web in Photoshop.


All times are GMT -4. The time now is 07:23 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.