Welcome to OMG boards community!
Community of friends where we talk about daily life, offtopic stuff, and what keeps us busy.

You are currently viewing our community forums as a guest user. Sign up or
Having an account grants you additional privileges, such as creating and participating in discussions.

Need Some Suggestions [CSS]

Discussion in 'The Geek District' started by Disjunto, Sep 15, 2011.

  1. Disjunto

    Disjunto OMG Member

    Threads:
    162
    Messages:
    2,887
    Likes Received:
    7
    Trophy Points:
    185
    Gender:
    Male
    Hopefully this explanation makes sense.

    I have a header div than is semi transparent (rgba background if you care), on this header bar is some navigation links (in a ul). UNDER the header bar is a fancy looking image which shows through and makes it look all kinds of cool. You with me? Good.

    On hover on one of the links, the client & designer want there to be a little marker underneath... which is FULLY transparent.

    Anyone got any ideas on how to achieve this effect? Only thing I can think of is dropping the nav out of the header or using margins and things to make room for a background on the nav element below the rest of the header that is a png with same level of opacity, but then you start having to deal with multiple browsers rendering colours slightly differently between browser colours and images.
     
  2. Floris

    Floris I'm just me :) Hi. Staff Member

    Threads:
    10,454
    Messages:
    37,613
    Likes Received:
    698
    Trophy Points:
    855
    Gender:
    Male
    Why not just change the background-image of the element with a negative margin? You can set transp. to it as well?
     
  3. OP
    Disjunto

    Disjunto OMG Member

    Threads:
    162
    Messages:
    2,887
    Likes Received:
    7
    Trophy Points:
    185
    Gender:
    Male
    because it's inside a fixed width container, surrounded by a fluid width wrapper and things get a bit wacky at that point.

    I've sort of bodged it together with a bit of js to put the marker in the right place at the moment (not too much of an issue, site has a large amount of JS anyway so will probably break with no js whatever happens.

    I've ended up with a div full of 3 divs, a padder on each side (too keep the rgba bg throughout, and make things easier) and a fixed width element in the middle which a very wide bg image that is moved about with background-position, putting the marker under the correct link.

    if you're still lost with what my problem was/how I solved it, msg me on IRC, I do actually look at irssi every now and then ;)
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice