Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Nov 2008
    Posts
    3
    Member #
    17763
    Hey everyone, I'm trying to make a transparent tab system (it sounds like a bad idea but I'll show you when its done, itll be amazing), but I'm having some trouble. I'll try to explain:

    With this code:
    Code:
    <div style="height: 100px; width: 100%; background-color: #0000FF">
       <div style="height: 100px; width: 100px; background-color: #FF0000; float: left;"></div>
    </div>
    I get a long rectangle with a square on top of its left side like this:
    [[---]---------]
    and it looks like there's 100px of blue, and the rest of the width is red.

    However, if I give the blue div some opacity: 0.5, it doesn't give me the transparent blue im looking for, instead it blends with the red. It makes sense, because the blue is on top of the red. What I really need is for the blue to take up the left 100px, and the red to take up whatever's left.
    So I want this:
    [---][---------]
    so that when I give the blue div opacity: 0.5, the red won't show up behind it.

    My case gets a bit more complex than that: I won't know the width of the blue div; it's automatically generated.

    I tried floats, I tried tables, I tried everything. Does anyone know what I can do?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    but I'll show you when its done, itll be amazing
    I'm sure it will.

    Seriously,
    It's too hard to answer this without knowing what the final thing is supposed to be.
    Right now, I'm thinking you might need to do this with Flash.

    AJAX is another possibility, but again, no idea what the "amazing" part is going to be.


  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    tricky issue, especially since we can't see what it's supposed to look like.

    Would you be able to give us a link to a page that you're working on, so we can see what's going on? Also, fire up photshop or something like that and draw us what you want it to look like. I'll be happy to help if I have more information, but from what it sounds like, flash might be your best bet.

  5. #4
    Junior Member
    Join Date
    Nov 2008
    Posts
    3
    Member #
    17763
    Hey, thanks for your responses. I made a few pages to explain what i'm doing:

    http://verdagon.net/iwantthis.html

    I think I could do this with javascript but I really want to make it clean and css-only...


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com