Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Photoshop Layout CSS coding help!

    I thought I would start by saying Happy Holidays!

    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

    Thank you!


    Here is the code thus far...

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello PhoenixYellow,
    To center an element you need 3 things.
    1. a DocType declaration
    2. an element with a width
    3. that elements left and right margins set to auto

    Like this, I've also highlighted a place to put your background image -
    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>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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello PhoenixYellow,
    To center an element you need 3 things.
    1. a DocType declaration
    2. an element with a width
    3. 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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •