PDA

View Full Version : Aligning in DWCS3 help please


kearnsy
06-23-2009, 06:08 PM
Hi Folks

I'm helping a friend build a site as it's good practice for me, my friend came up with the design and asked me to piece it together, so he designed it in ps cs3, then i sliced it and exported it into dreamweaver

i've managed to get everything working etc. but i can't get everything to centre in the middle of the page

I thought it was just a case of setting the right & left margins to auto but it's not the case

anyway if i paste in my code would anybody be so kind as to tell me where i'm going wrong or what i'm not doing correctly?

thanks very much

here's the code...

<!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>main page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (main page .psd) -->
<style type="text/css">
<!--
#Table_01 {
width:955px;
height:600px;
padding: 0px;
margin: auto;
}
#Main-Header_ {
position:absolute;
left:0px;
top:0px;
width:955px;
height:391px;
margin-right: auto;
margin-left: auto;
background-position: center center;
}
#Content-1_ {
position:absolute;
left:0px;
top:391px;
width:224px;
height:62px;
background-image: url(images/Content_1.jpg);
margin-right: auto;
margin-left: auto;
}
#Content-2_ {
position:absolute;
left:224px;
top:391px;
width:484px;
height:62px;
background-image: url(images/Content_2.jpg);
}
#Content-3_ {
position:absolute;
left:708px;
top:391px;
width:247px;
height:62px;
background-image: url(images/Content_3.jpg);
}
#Content-4_ {
position:absolute;
left:0px;
top:453px;
width:224px;
height:94px;
background-image: url(images/Content_4.jpg);
}
#Content-5_ {
position:absolute;
left:224px;
top:453px;
width:484px;
height:94px;
background-image: url(images/Content_5.jpg);
}
#Content-6_ {
position:absolute;
left:708px;
top:453px;
width:247px;
height:94px;
background-image: url(images/Content_6.jpg);
}
#Home-Button_ {
position:absolute;
left:0px;
top:547px;
width:189px;
height:53px;
}
#Gallery-Button_ {
position:absolute;
left:189px;
top:547px;
width:188px;
height:53px;
}
#About-Button_ {
position:absolute;
left:377px;
top:547px;
width:200px;
height:53px;
}
#Future-Button_ {
position:absolute;
left:577px;
top:547px;
width:189px;
height:53px;
}
#Contact-Button_ {
position:absolute;
left:766px;
top:547px;
width:189px;
height:53px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (main page .psd) -->
<div id="Table_01">
<div id="Main-Header_">
<img id="Main_Header" src="images/Main_Header.jpg" width="955" height="391" alt="" /> </div>
<div id="Content-1_"></div>
<div id="Content-2_"></div>
<div id="Content-3_"></div>
<div id="Content-4_"></div>
<div id="Content-5_"></div>
<div id="Content-6_"></div>
<div id="Home-Button_">
<img id="Home_Button" src="images/Home_Button.jpg" width="189" height="53" alt="" /> </div>
<div id="Gallery-Button_">
<img id="Gallery_Button" src="images/Gallery_Button.jpg" width="188" height="53" alt="" /> </div>
<div id="About-Button_">
<img id="About_Button" src="images/About_Button.jpg" width="200" height="53" alt="" /> </div>
<div id="Future-Button_">
<img id="Future_Button" src="images/Future-Button.jpg" width="189" height="53" alt="" /> </div>
<div id="Contact-Button_">
<img id="Contact_Button" src="images/Contact_Button.jpg" width="189" height="53" alt="" /> </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

DWcourse
06-23-2009, 08:32 PM
add position:relative; to the #Table_01 style. That will do it for now but you have other problems coming down the road.

kearnsy
06-23-2009, 08:55 PM
thanks very much, that worked.

what do you mean when you say other problems?

As you can probably tell i'm a dreamweaver newbie, but i'm keen to learn

DWcourse
06-23-2009, 09:20 PM
If you start putting text or other content in your absolutely positioned divs they are going to grow and when that happens they will overlap the divs below them. It's a problem you get when you export designs from Photoshop or a similar program rather than building them yourself.

I'm sure someone here can point you to a tutorial on designing with divs or you could start with one of the built-in CSS layouts in Dreamweaver CS3.

kearnsy
06-23-2009, 09:28 PM
thanks for the swift response

what would you recommend then?

Would it be possible to recreate the layout using all the size info from the jpegs generated by photoshop?

by that i mean, start a page afresh, then add container, then a div tag for my header and so on? then position them exactly as they are in the above page.

DWcourse
06-23-2009, 11:03 PM
CSS positioning can be tricky for a novice but I'd begin my using Dreamweaver's built-in "3 column fixed, header and footer" layout and customizing that (paying close attention to the notes Adobe has provided in the CSS file).

You can access the layout by choosing menu: File>New… and then choosing Category: Blank Page, Page Type: HTML and Layout: 3 column fixed, header and footer. Choose Create New File from the Layout CSS to put all the CSS info in an external CSS document rather than in the header of the page.