SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - creating a DIV mask

    Hello,

    I am wondering if it is possible to do the following:

    I currently have some script from an external site which i am placing on my site. I have placed this script within a DIV which is correctly positioned (it is where i want it)

    Now, i want to place another DIV which would sit directly on top of the iframe, basically acting as a mask to part of what the iframe generates. Is this possible? I.e i would have two divs on top of each other.

    From what i understand it may be possible using absolute positioning and/or z-index.

    The problem as far as i can see is when i position something to an absolute position it positions it absolutely on the page - not so effective when resoultions can change etc. Can i position something absolutely relative to the div i have placed it in..... eg:

    Code:
    <DIV id"holder">
        <script iframe.....>
    </DIV>
    Would it be possible to put a div called mask to cover the top of the iframe, so that the mask is postioned absolutely relative to the parent DIV?

    Any help is appreciated!

    Many thanks

    Matt

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could give the #holder div a position:relative to act as the stacking context for AP elements.

    Then just have an element inside there with position:absolute and it should layer on top of the iframe
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    would the clip property not work for the iframe, considering you have to give it absolute height/width ( even if don with js)

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well I'd need a visual to fully understand waht you mean (I always have trouble visualizing what people actually want on here)
    http://www.w3.org/TR/CSS2/visufx.html#clipping

    The element you are applying clip to does need AP though.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    would the clip property not work for the iframe, considering you have to give it absolute height/width ( even if don with js)
    Yes you could clip a rectangular area of the iframe. Whether that would solve the OPs question would depend on what parts of the iframe was required to be hidden.

    Would it be possible to put a div called mask to cover the top of the iframe, so that the mask is postioned absolutely relative to the parent DIV?
    As long as the iframe didn't contain something like flash you should be able to layer another element on top of the iframe.

    I have to wonder why you are doing this and some people take exception to their sites being shown in an iframe in someone else's site (especially if you are trying to hide something in it) .


Bookmarks

Posting Permissions

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