www.webdeveloper.com
Results 1 to 3 of 3

Thread: Please help! Sliced pictures and DIVs

  1. #1
    Join Date
    Dec 2012
    Posts
    2

    Exclamation Please help! Sliced pictures and DIVs

    Hey guys.

    Need help. I've made a site design in Photoshop. Sliced the picture into: header, controls, content, footer. Assembled them using DIVs and css classes. When viewing in chrome white gaps apper at the borders of the divs, especially when zooming in/out!! I tried adjusting margins, paddings, borders, but none of this worked. Here is my website link. Please help.

    http://http://psoriginalstory.narod.ru/

    and here is the HTML code:


    <body>
    <div class="container">
    <div class="header"></div>
    <div class="controls"></div>
    <div class="content"></div>
    <div class="footer"></div>
    </div>

    </body>

    .container {
    width: 1440px;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: url(../images/container.jpg);
    }

    .header {
    vertical-align: bottom;
    display: block;
    height: 219px;
    width: 1440px;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg__header.png);
    position: relative;
    white-space: nowrap;
    }

    .controls {
    vertical-align: bottom;
    display: block;
    height: 164px;
    width: 1440px;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg__controls.png);
    position: relative;
    white-space: nowrap;
    }

    .content {
    width: 1440px;
    height: 1900px;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg__content.png);
    }

    .footer {
    width: 1440px;
    height: 477px;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg__footer.png);


    .footer p a:visited {
    color: #F00;
    }

  2. #2
    Join Date
    Mar 2012
    Posts
    919
    Photoshop is best used for prototyping, then build the web site using HTML and CSS.

  3. #3
    Join Date
    Dec 2012
    Posts
    2
    Thanx for the advide jedaisoul.

    I'm not buildint my site in photoshop. I only need to slice my seamless bacground. By the way I solved the issue:
    if you have any annoying lines between the slices of your background picture, make sure the number of pixels are nice and round (like 250,300 or 260, 270,280). Otherwise the browser gets crasy trying to scale it. And don't forget to use the Photoshop knife tool properly to gat a seamless backround, it can sometimes give some really annoying light lines of pixels on the borders of your sliced images.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles