Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Positioning problem

Options
  • 20-04-2011 12:41pm
    #1
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭


    I should know how to do this ...

    Anyway, I'm doing up a landing page for Facebook 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 these images (excluding #main) set to position:relative; top:-Xpx; however, this wasn't rendering correctly across certain browsers.

    In an attempt to address this problem 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.

    Help would be appreciated
    <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>


Comments

  • Options
    #2
    cormee
    Registered Users Posts: 1,801 ✭✭✭cormee


    Do you have an example live?


  • Options
    #3
    Fanny Cradock
    Registered Users Posts: 10,245 ✭✭✭✭Fanny Cradock


    I'm afraid not. It wont be live until I get it right.


Advertisement