Please help! Sliced pictures and DIVs

**Pavel S** · 12-06-2012 07:13 AM

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

**jedaisoul** · 12-11-2012 11:09 AM

Photoshop is best used for prototyping, then build the web site using HTML and CSS.

**Pavel S** · 12-11-2012 11:54 AM

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: Please help! Sliced pictures and DIVs

Thread Tools

Display

Please help! Sliced pictures and DIVs

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions