...

View Full Version : Positioning problem



garabildi
04-20-2011, 12:21 PM
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>

garabildi
04-20-2011, 04:02 PM
No answers on this? I was hoping that it was just a simple matter of applying the correct positioning to the child div.

garabildi
04-20-2011, 05:07 PM
I think I have an answer. I set the background images via css and then absolutely positioned the #pics guide div. It renders fine across most browsers except IE8 (not sure about 7 or 9). In this case the positioning is probably off by about 5px. But it will do!



<html>
<head>
<style type="text/css">
#main{height:902px; width:520px; background:url(#) top center no-repeat;}
#pics{height:723px; width:520px; position: absolute; top:159;}
#children{height:227px; width:294px; padding-bottom:12px;}
#event{height:226px; width:294px; padding-bottom:5px;}
#emergency{height:234px; width:295px; padding-bottom:6px;}
#website{height:36px; width:520px;}
img{border:none;}
</style>
</head>

<body>
<div id="main">
<div id="pics">
<div id="children"> <a href="#" target="_blank"><img src="#" /></a>
</div>
<div id="event"> <a href="http://www.facebook.com/tearfundireland?sk=events" target="_blank"><img src="#" /></a>
</div>
<div id="emergency"> <a href="#" target="_blank"><img src="http://www.lukemcgurdy.com/images/emergency.jpg" /></a>
</div>
<div id="website"> <a href="#" /></a>
</div>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum