www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Complex layout: alpha transparent PNG

  1. #1
    Join Date
    Jul 2007
    Posts
    20

    resolved [RESOLVED] Complex layout: alpha transparent PNG

    Hiya!

    The "complex" part might be laughable to some, but for me, it's quite complex...

    Here is the layout that I want to accomplish using CSS, XHTML and PNG images (no Flash!):

    http://img404.imageshack.us/img404/9...plexlaydi2.jpg

    What I have done is this: I've made a container, which have a background image containing the red and the white part of the picture. I then made a news div, containaing the news (duh). Now, I just need to position a partly transparent PNG image over the news div. But the problem is this: the image is quite large (in pixels) and the totally transparent part of the picture covers the news text, making it impossible to select it, and to click the links in it!

    The PNG image need to lay on top of the text. But the text needs to be selected, or at the very least, the user must be able to click the links (that technically is underneath the pic, even though the pic is transparent in that specific area.)

    Is there any way to solve this, or should I try something completly different? I tried my best to explain to best I could...


  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Ahhh young Skywalker! -I see what you're trying to do. In short, -no, I don't think that this is possible as a z-index layer (in this case, that masking-image) that is non-link, will remain non-link. BUT I have another idea how to 'fake' this transparency mask edge effect...! brb....

    bak:

    Try floated images:

    <div style="border:1px solid red;margin:25px; overflow:hidden; width:300px; height:auto;">
    <img alt="1" style="width:20px; height:30px; border:1px solid black; float:left;" />
    <img alt="2" style="width:30px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="3" style="width:40px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="4" style="width:50px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="5" style="width:60px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="6" style="width:70px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="7" style="width:80px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="8" style="width:90px; height:30px; border:1px solid black; clear:left; float:left;" />
    <img alt="10" style="width:110px; height:30px; border:1px solid black; clear:left; float:left;" />

    </div>
    this can preserve the z-index of the 'faux background' (which could even scroll to display more news events, etc) and the 'edges' that are floated-left, are from a sliced image.

    Any problems or ?, ask!
    Last edited by WebJoel; 03-26-2008 at 06:23 AM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Jul 2007
    Posts
    20
    Hey, great idea! Thanks for the reply!

    Let me just see if I got it right: I splice up the image into several images, and position them acordingly? Yes, it seems like it would work.

    Thank you very much!

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Variations of this could include a 'rock-climbing wall' on one or both sides, -or like being inside of a cave looking out (or in), a pool of water, a hole in the clouds, a large school of fish, circling, with 'text' visible in the 'hole', etc etc...

    Since you're placing a (presumeably) scrolling series of DIVs behind these floated images, you'll be dealing with some z-index issues that may at first, be troublesome. But they can be worked out. The 'scrolling box' series of text-DIVs can be z-indexed behind the floated-left images and since the forementioned float-left images are *png with partial transparency, the text-boxes will be slightly visible behind them as they scroll-up/down... and the main portions of the text-boxes will be 'clickable' as they are not 'underneith' any image, -visible or otherwise.

    -It's a rather exciting project, this one. I hope you come back and show us what you come up with (post in Web Site Review, or whatever).
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Jul 2007
    Posts
    20
    Quote Originally Posted by WebJoel
    -It's a rather exciting project, this one. I hope you come back and show us what you come up with (post in Web Site Review, or whatever).
    Yeah, it sure is! Here is what I've done:

    Code:
    <div id="news">
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr1" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr2" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr3" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr4" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr5" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr6" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr7" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr8" alt="" />
    				<img src="pix/backgrounds/news_overlay.png" class="overlay nr9" alt="" />
    				<h2>News in short</h2>
    				<p><strong>News 1</strong>
    				We started as an Internet affiliate portal.<span><a href="">&gt; &gt;</a></span></p>
    				<p><strong>News 2</strong>
    				We started as an Internet affiliate portal. We started as an Internet affiliate portal.<span><a href="">&gt; &gt;</a></span></p>
    				<p><strong>News 3</strong>
    				We started as an Internet affiliate portal.<span><a href="">&gt; &gt;</a></span></p>
    				<p><strong>News 4</strong>
    				We started as an Internet affiliate portal.<span><a href="">&gt; &gt;</a></span></p>
    				<p><strong>News 5</strong>
    				We started as an Internet affiliate portal.<span><a href="">&gt; &gt;</a></span></p>
    				<p><strong>News 6</strong>
    				We started as an Internet affiliate portal.<span><a href="">&gt; &gt;</a></span></p>
    			</div>
    And the CSS:

    Code:
    #news .overlay {
    	background:				url(../pix/backgrounds/news_overlay.png) no-repeat;
    	position:				absolute;
    }
    #news .nr1 { top: 96px; left: -130px; }
    #news .nr2 { top: 150px; left: -116px; }
    #news .nr3 { top: 204px; left: -102px; }
    #news .nr4 { top: 258px; left: -89px; }
    #news .nr5 { top: 312px; left: -76px; }
    #news .nr6 { top: 366px; left: -62px; }
    #news .nr7 { top: 420px; left: -49px; }
    #news .nr8 { top: 474px; left: -35px; }
    #news .nr9 { top: 528px; left: -21px; }
    It does seems like it works. I'm probably gonna do a couple of more images so that it works no matter how much content there is in the news div. The only problem now is what to do about IE6's inability do correctly display PNG alpha transparency...

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