Forum Moderators: not2easy
The scenario is a have a large image that serves as the background. Lets say its 1600px wide. I want to slice it to have one middle piece of 800px and two side pieces of 400px each.
now most screens can fit about 800-1000px on them and alot much more.
what id really like to do is position the middle piece with background-potion : top and then the others with something like 400px left of center and the other 400px right of center.
i know how to do this with tables by just setting the center cell to a fixed with and then assign background images to each cell, in the left cell put background-position: top left and in the right cell background-position: top left
Ive got this so far but it is making a long scrollbar to the right
HTML
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>
CSS
#Div1, #Div2, #Div3 {
position: absolute;
width: 100%;
}#Div1 {
background: url(1.jpg) no-repeat;
background-position: top;
top: 0px;
right: 400px;
height: 200px;
}#Div2 {
background: url(2.jpg) no-repeat;
background-position: top;
top: 0px;
right: 0px;
left: 0px;
height: 200px;
}#Div3 {
background: url(3.jpg) no-repeat;
background-position: top;
top: 0px;
left: 400px;
height: 200px;
}
But there is some in it to be learned by all. So to show how absolute positioning works in standard compliant browsers (IE6 won't handle this without adding scripts like IE7.js, and even then its math "rounding errors" will make it look bad):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
#div1, #div2, #div3 {
position:absolute;
top:0;
height: 800px;
}
#div1 {
left:0;
right:50%; /*center*/
margin-right:400px; /*half the width of div2*/
background: url(1.jpg) no-repeat right top;
}
#div3 {
left:50%; /*center*/
right:0;
margin-left:400px; /*half the width of div2*/
background: url(3.jpg) no-repeat left top;
}
#div2 {
left:50%; /*center*/
width:800px;
margin-left:-400px; /*half it's width*/
background: url(2.jpg) no-repeat left top;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">slicing images is a bad idea nowadays,
put the whole image on the background of
the body instead</div>
<div id="div3"></div>
</body>
</html>
Works as expected in FF3, safari and opera, didn't bother with testing it in IE7, won't work in IE6.
Just draw it out where the edges go left/right and then see the margins shift those edges to accommodate the width of the div2. You'll notice the div1 and div3 don't go off-screen and hence don't create scroll bars.
IE6 can't deal with left and right being set at the same time and calculate the width itself. So on option is to teach it that ability (IE7.js is what I'd use) or just use a degraded solution like setting div1 and div3 to display:none in the conditional comment.
If the window is too small those negative margins don't create a scroll bar.
While looking at the test above I figured I should be able to fix it if I made the body wide enough with a min-width and gave it "position".
And indeed adding:
body {
min-width:800px;
position:relative;
padding:0;
margin:0;
}
Does wonders to the above.
Basically the body now acts as a container for the absolutely positioned div's, so the added padding an margin removal is to make it sit back into the corners. It has position due to the position:relative and all absolute positioning is done within it. The min-width on the body prevents the browser from making the body too small to fit the div2 so it can't ignore it's left portion anymore.
So this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
#div1, #div2, #div3 {
position:absolute;
top:0;
height: 800px;
}
#div1 {
left:0;
right:50%;
margin-right:400px;
background: url(1.jpg) no-repeat right top;
}
#div3 {
left:50%;
right:0;
margin-left:400px;
background: url(2.jpg) no-repeat left top;
}
#div2 {
left:50%;
width:800px;
margin-left:-400px;
background: url(3.jpg) no-repeat left top;
}
body {
min-width:800px;
position:relative;
padding:0;
margin:0;
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="div1"></div>
<div id="div2">slicing image is a bad idea nowadays</div>
<div id="div3"></div>
</body>
</html>
Actually works across the board (FF3, safari, opera, IE7 and IE6) within reason. Making absolutely positioned layouts a bit more doable than they were in my mind at least.
But I still believe slicing images is a bad idea ...
so now that we got this down, why is slicing bad? can we get some 1 line bullet points here?
also, what if i wanted to show you the design so you could really see what im after? im a coder and my designer is pretty hip to what is hip and although content is kind, image look and style are what make the 1st impression. is there somewhere here i can post files or links to outside stuff?
