Menu
I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.
because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left
see here:
http://www.wireframebox.com/test/sideimages/index_leftworks.html
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; border: 0; background-color:#096 }
img { border: 0; }
#main {
width:960px;
height:216px;
background-image:url(main.jpg);
position:relative;
top:0; margin: 0 auto;
}
#left {
width:170px;
height:216px;
background-image:url(left.jpg);
float:left;
left:-170px;
position:relative;
}
#right {
width:170px;
height:216px;
background-image:url(right.jpg);
float:right;
left:170px;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work
see here
http://www.wireframebox.com/test/sideimages/
Code is equal, only <div id="right"></div> is missing
the css is in the source.
you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width
http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/
why does this work on the left but not the right?
956
See the below fiddle for output...
Fiddle: http://jsfiddle.net/C2j6G/4/
Demo: http://jsfiddle.net/C2j6G/4/embedded/result/
see below image -
100
It's better if you can combine those two images & give in the background of body. like this:
HTML
<div id="main"></div>
CSS
body {
margin: 0;
padding: 0;
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center;
}
#main {
width:960px;
height:216px;
background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg);
margin:0 auto;
}
Check this http://jsfiddle.net/PVWzA/1/
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
