SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Gurus - please help with overlapping menu

    CSS more than any other aspect of code - from Javascript to PHP - is more difficult to me. It drives me crazy!

    I am attempting to code a menu with irregular shapes that overlap. I used some of the advice from this thread as a guide:

    http://www.sitepoint.com/forums/show...46#post4741346

    Here is my attempt:

    http://bopjodesign.com/xactlyit/netaffinity/stages.html

    As you can see, the "tails" of my 2nd, 3rd, and 4th arrows are not showing up on the hover event. My CSS is in the head of the document. What am I doing wrong? Please help if you can...

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are doing it right, just not done all yet.

    On link hover, just as you are doing on the angled right side also do on the angled left side, i.e. increase the width further and soak it up with negative left margin. Adjust background position accordingly.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I tried what you suggested, but it doesn't seem to work. I get the exact same effect of the tails not showing on hover. I increased the width of the 2nd button on hover and give it a negative left margin like this:

    #connect a:hover {
    width: 216px; // 20px larger than before
    margin-right: -20px // Same as before
    margin-left: -20px // New
    }

    I then increased the width of the span on hover and adjusted the positioning of the background image:

    #connect a:hover span {
    background-position: -156px // 20px less than before -124px;
    width: 216px; // 20px larger than before
    }

    I can see a shadow behind the "connect" button on the bottom, so I tried adding a high z-index but that didn't do anything.

    You can see my work here:

    http://www.bopjodesign.com/xactlyit/...ty/stages.html

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,


    I would simplify it a bit and absolutely place the anchors so that you can change the width on hover without affecting anything else.

    As you are using a transparent png you have to be careful with the shadow compounding so I would shorten the height of the anchors so the bottom shadow isn't changed on hover.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #stages {
        position: absolute;
        width: 684px;
        height: 62px;
        left: 31px;
        top: 177px;
    }
    #sprite_holder, #sprite_holder ul {
        margin: 0px;
        padding: 0px;
        height: 62px;
        width: 684px;
        list-style-type: none;
        background: url(http://bopjodesign.com/xactlyit/netaffinity/images/stages.png) no-repeat 0 0;
    }
    #sprite_holder li {
        float: left;
        position:relative;
        height: 54px;
    }
    #sprite_holder a, #sprite_holder span {
        text-align: center;
        height: 54px;
        position: relative;
        text-decoration: none;
        width:100%;
        display:block;
    }
    #sprite_holder span {
        position: absolute;
        left:0;
        top:0;
        z-index:2;
    }
    li#research {width: 174px;}
    li#connect {width: 176px;}
    li#call {width: 176px;}
    li#strengthen {width: 158px;}
    
    #research a:hover {width: 180px;}
    #connect a:hover {width: 200px;    left:-20px;}
    #call a:hover {width: 210px;    left:-20px;}
    #strengthen a:hover {width: 198px;left:-20px;}
    
    #sprite_holder a:hover {z-index:99}
    
    #sprite_holder span {background:url(http://bopjodesign.com/xactlyit/netaffinity/images/stages.png) no-repeat;}
    #research span {background-position: 0px 0px;}
    #connect span {background-position: -176px 0px;}
    #call span {background-position: -352px 0px;}
    #strengthen span {background-position: -526px 0px;}
    
    #research a:hover span {background-position: -2px -62px;}
    #connect a:hover span {background-position: -156px -124px;}
    #call a:hover span {background-position: -330px -186px;}
    #strengthen a:hover span {background-position: -506px -248px;}
    </style>
    </head>
    <body>
    <div id="stages">
        <ul id="sprite_holder">
            <li id="research"><a href="#">Research<span></span></a></li>
            <li id="connect"><a href="#">Connect<span></span></a></li>
            <li id="call"><a href="#">Call<span></span></a></li>
            <li id="strengthen"><a href="#">Strengthen<span></span></a></li>
        </ul>
    </div>
    </body>
    </html>
    You might be interested in a similar example here with explanation here.

  5. #5
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul O'B - your method works perfectly! I discovered (late) last night that the assigned staggered z-indexes given to the <li> elements were causing the tails not to appear. I see how you assign a high z-index to the <a> elements on hover. Very nice. The solution of shortening the height of the <li> and <span> elements was genius and gets rid of the compounding shadow perfectly. (I only began noticing that late last night).

    I will study your code more and use it a a guideline for future use in these kinds of situations. I was tearing my hair out and completely stumped. Surely this is an advanced use of CSS. It frequently amazes me how complicated things get for such a seemingly simply effect!

    Thank you again for graciously taming this beast. I hope this thread will help others along the way.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it sorted and indeed things can get complicated when overlaps occur especially where transparency is also concerned.

    However, when you think about it things need to be that way or they wouldn't work. It's all about control

  7. #7
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am beginning to rediscover CSS as a form of coding every bit as complex and powerful as PHP or Javascript, albeit in a completely different way. Just because its "front end" doesn't mean its not a highly sophisticated, complex and worthy skill in its own right.


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
  •