Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post

    Positioning problem

    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.

    Code:
    <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>

  • #2
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    No answers on this? I was hoping that it was just a simple matter of applying the correct positioning to the child div.

  • #3
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    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!


    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •