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 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem trying to code this particular psd

    Hi I'm not sure how I should slice and code this particular psd.....here's a screenshot but bear in mind I'm having trouble only coding the main body section after the navbar. Before that I'm fine.

    http://www.juanchandler.com/screenshot.png

    Secondly here are the .png's I've sliced from the main image.

    http://www.juanchandler.com/body_bgtop.png
    http://www.juanchandler.com/body_background.png

    Bear in mind it's going to be a Wordpress theme ie. the height of the container would be different each time, so body_background.png needs to tile vertically. Then the text needs to start further up over body_bgtop.png which won't repeat as a background.

    So this is what I've written.


    Code:
    <style type="text/css">
     
    body{
    background: #000000;
    margin: 0px;
    padding: 0px;
    color: #ffffff
    }
     
    #container{
    width: 1245px;
    margin: 0px auto;
    background: url(images/body_background.png) repeat-y;
    }
     
    #container-bgtop{
    width: 1245px;
    background: url(images/body_bgtop.png) no-repeat;
    }
    </style>
     
     
    </head>
     
    <body>
     
      <div id="container">
         <div id="container-bgtop">
               Text goes here
            </div>    
         </div>
     
    </body>
    Whilst this does achieve the goal I mentioned above it makes body_background.png appear overlapping body_bgtop.png.

    If someone could advise it would be much appreciated.

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    1
    Thanked 1 Time in 1 Post
    I'm still learning myself but why do you need <div id="container-bgtop"> inside <div id="container"> could you not just have.


    <div id="container"></div>
    <div id="container-bgtop">
    Text goes here
    </div>



    Other than that cant you just use padding to position it?


    padding: 0px 0px 0px 0px; /* top-right-bottom-left */


    This could be nonsense if so just ignore it


  •  

    Posting Permissions

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