...

View Full Version : Photoshop Layout CSS coding help!



PhoenixYellow
12-20-2009, 06:38 AM
I thought I would start by saying Happy Holidays! http://www.clicksmilies.com/s1106/weihnachten/xmas-smiley-031.gif

I designed a layout in photoshop and after the site was complete, I sliced and exported it in CSS coding from the web preparation pane in photoshop. I then opened it in dreamweaver and since I am so new to coding I cant figure out how to get it like I want.

Currently, the layout is just a bunch of images put together. However, I want to center the whole layout, and add a background image behind it. I then want to add text and objects on top of the photoshop layout slices. I know this requires making overlapping divs but I just don't know how to correctly code it.

I also want to add a vertical navi bar on one of the slices as well, but I think I can get this done once I figure out how to overlap the divs or put my Photoshop layout into the backgorund.

I hope I described that clearly enough. I REALLY need help with this so if you need clarification let me know :thumbsup:

Thank you!


Here is the code thus far...


<!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>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (index.psd) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:991px;
}

#girl_ {
position:absolute;
left:0px;
top:0px;
width:266px;
height:707px;
}

#content_ {
position:absolute;
left:266px;
top:0px;
width:419px;
height:707px;
}

#sidebar_ {
position:absolute;
left:685px;
top:0px;
width:115px;
height:707px;
}

#chocolate_ {
position:absolute;
left:0px;
top:707px;
width:800px;
height:253px;
}

#footer_ {
position:absolute;
left:0px;
top:960px;
width:800px;
height:31px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (index.psd) -->
<div id="Table_01">
<div id="girl_">
<img id="girl" src="http://forums.techguy.org/images/girl.png" width="266" height="707" alt="" />
</div>
<div id="content_">
<img id="content" src="http://forums.techguy.org/images/content.gif" width="419" height="707" alt="" />
</div>
<div id="sidebar_">
<img id="sidebar" src="http://forums.techguy.org/images/sidebar.png" width="115" height="707" alt="" />
</div>
<div id="chocolate_">
<img id="chocolate" src="http://forums.techguy.org/images/chocolate.gif" width="800" height="253" alt="" />
</div>
<div id="footer_">
<img id="footer" src="http://forums.techguy.org/images/footer.gif" width="800" height="31" alt="" />
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Excavator
12-20-2009, 08:11 AM
Hello PhoenixYellow,
To center an element you need 3 things.

a DocType declaration
an element with a width
that elements left and right margins set to auto

Like this, I've also highlighted a place to put your background image -
<!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>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Save for Web Styles (index.psd) -->
<style type="text/css">
body {
background: url(your_image.jpg);
}
#Table_01 {
height:991px;
width:800px;
margin: 0 auto;
position:relative;
}

#girl_ {
position:absolute;
left:0px;
top:0px;
width:266px;
height:707px;
}

PhoenixYellow
12-20-2009, 09:27 AM
Hello PhoenixYellow,
To center an element you need 3 things.

a DocType declaration
an element with a width
that elements left and right margins set to auto



Thank you! This helped me out tremendously.

Now I just need to figure out how to code and text on top of the current tables



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum