garabildi
04-20-2011, 11:21 AM
I'm doing up a landing page for Face book and I'm having a little trouble correctly positioning images.
The page consists of a main background image (#main) and then 4 separate clickable images (#children, #events, #emergency# and #website) that rest on top of this. I initially had all the images set to position:relative; top:-Xpx; however, this wasn't rendering correctly across certain browsers.
In an attempt to address this I've changed things slightly. Gone is the individual positioning and in comes a #pics div to wrap all these 4 divs (#children, #events, etc...). I had hoped that positioning this relative to #main would solve my problems. However, what I get is the #main (902px) being shunted up by #pics by 720px.
In conclusion, what I want is for #main to remain fixed and for #pics (and all the sub-divs) to move relative to #main.
<html>
<head>
<style type="text/css">
#main{height:902px;width:520px;}
#pics{height:784px; position:relative; top:-720px;}
#children{height:227px; width:294px}
#event{height:226px; width:294px;}
#emergency{height:295px; width:234px;}
#website{height:36px; width:520px;}
img{border:none;}
</style>
</head>
<body>
<div id="main">
<div id="pics"><img src="#" />
<div id="children"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="event"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="emergency"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="website"> <a href="#" target="_blank"><img src="#" /></a>
</div>
</div>
</div>
</body>
</html>
The page consists of a main background image (#main) and then 4 separate clickable images (#children, #events, #emergency# and #website) that rest on top of this. I initially had all the images set to position:relative; top:-Xpx; however, this wasn't rendering correctly across certain browsers.
In an attempt to address this I've changed things slightly. Gone is the individual positioning and in comes a #pics div to wrap all these 4 divs (#children, #events, etc...). I had hoped that positioning this relative to #main would solve my problems. However, what I get is the #main (902px) being shunted up by #pics by 720px.
In conclusion, what I want is for #main to remain fixed and for #pics (and all the sub-divs) to move relative to #main.
<html>
<head>
<style type="text/css">
#main{height:902px;width:520px;}
#pics{height:784px; position:relative; top:-720px;}
#children{height:227px; width:294px}
#event{height:226px; width:294px;}
#emergency{height:295px; width:234px;}
#website{height:36px; width:520px;}
img{border:none;}
</style>
</head>
<body>
<div id="main">
<div id="pics"><img src="#" />
<div id="children"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="event"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="emergency"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="website"> <a href="#" target="_blank"><img src="#" /></a>
</div>
</div>
</div>
</body>
</html>