dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Layered blocks inside scrolling container

  1. #1
    Join Date
    May 2008
    Posts
    13

    resolved [RESOLVED] Layered blocks inside scrolling container

    Hi,

    I'm trying to layer some content divs over an image, all viewed through a scrolling div.

    It's basically a map (the image) with points (the divs), viewed through a scrolling window (scrolling div).

    I now realise that positioning the divs absolutely brings them out of the container.

    So I tried to position the divs relatively but couldn't find a way of avoiding gaps inside the window where the divs displace the image.

    HTML Code:
    <div id="scrollview" style="width: 400px; height: 400px; overflow: scroll;">
    	<img src="map.gif" width="4000" height="4000"/>
    	<div id="item1" class="mappoint"></div>
    	<div id="item2" class="mappoint"></div>
    </div>
    What CSS would I need to make that work?

    Thanks

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    I now realise that positioning the divs absolutely brings them out of the container.
    Position absolute is relative (hence common confusion) to the first parent element found that has position relative.

    Give #scrollview position: relative then you can use position: absolute on your inner DIVs, so for example giving one of them left: 0 will position it in on the left edge of scrollview, not of the page.

    See my example at www.durexhcp.co.uk/contact_us for reference.

  3. #3
    Join Date
    May 2008
    Posts
    13
    Thanks, that really helped demystify it lol the guesswork was killing me

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles