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
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Just a couple of z-index & transparency issues...

    Hi again,
    So, I went and used a template for this site instead of creating one from scratch. It was just too maddening. And I've made a LOT of modifications to this thing already, and am pretty happy with it for the most part.

    But there are a few little items I'm having problems with still http://dev.yourbusybee.com/kaleco/:

    • I would really love it if the top banner with the name of the company could sit ON TOP of everything else. I've tried all sorts of combinations of z-index, and I'm just not having any luck. If I need to add another container of some sort, I don't mind.

    • I put a miniature version of the logo flower on the menu hover. But the top and bottom are cut off, though I did try and set the overflow to being visible. Perhaps I'm not setting it for the right element?

    • The "Active" state for the main menu bar has a nice little transparent box around the item. Unfortunately, it's also causing the text to be transparent as well. IS there a way to solve this? Or am I better off creating a transparent image background instead? I like to avoid those whenever possible, just to improve load times, but if it's necessary...


    Just as a note: I've run the page through the validators. So far as I can tell, the only issues seem to be related to cross-browser compatibility styles and the like. So far the site looks good in FireFox, and Safari. I have not checked it in an IE emulator yet.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello operapixie,
    Maybe a z-index on what's covering the logo image instead? Like this -
    Code:
    .shadowbox {
        border-radius: 15px 15px 15px 15px;
        box-shadow: 0 -2.6px 7px #CCCCCC;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        width: 960px;
        z-index: 1;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Oh my goodness! That was exactly the trick for the logo. THANK you!

    I never would have thought of that for the shadowbox since it's supposed to be starting below the header area.

    ~Laura


  •  

    Posting Permissions

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