Grow your CSS skills. Land your dream job.

Z-Index. Background image overlaying clickable links

  • # January 7, 2009 at 5:58 am

    Hi all

    I’ve got a .png file with transparent edges in the top left of my site but the image is overlapping on top of some links using the z-index. Is there any way to keep this image on top but have my links "see through" though the transparent part so they can be clicked?

    Regards

    Adam

    Rob
    # January 7, 2009 at 8:25 am

    could you link us to the site so we can see? :)

    # January 7, 2009 at 9:29 am

    Sure. http://mfcstudysupportcentre.co.uk

    Another issue I’m having is with the images in the sidebar, they are correctly referenced in the source but they just don’t show up.

    Any ideas?

    # January 7, 2009 at 9:34 am

    Sorry, I’m messing with the site live now not thinking that you might be looking at it.

    Rob
    # January 7, 2009 at 10:12 am

    have you moved the nav links to the centre now away from the football?

    you could make the nav UL with a z-index of like 3, which would bring it above the football and then move it so its closer to the left…

    like this

    #nav ul { position:relative; left:160px; z-index:3; }

    Is it just the Nav links?

    # January 7, 2009 at 10:20 am

    I’ve set it back to how I want it with the topic heading links left aligned.

    I thought about lifting the z-index of the h2 tags but then they would appear on top of the ball’s shadow rather than being effected by it.

    Any suggestions why the images in the bar on the left aren’t being displayed?

    Rob
    # January 7, 2009 at 10:25 am
    "magichew" wrote:
    Any suggestions why the images in the bar on the left aren’t being displayed?

    yea your path isnt right :D

    its looking for images/council_logo.png from your domain. So its actually looking for an image at this location…

    http://mfcstudysupportcentre.co.uk/imag … l_logo.png

    Which dosnt not exist :)

    # January 7, 2009 at 10:28 am

    Right, so I can either link them correctly or shift my images folder to my root?

    Rob
    # January 7, 2009 at 10:30 am
    "magichew" wrote:
    Right, so I can either link them correctly or shift my images folder to my root?

    You could do that, or if you like where you put them, which could be in your wordpress theme folder, its completly up to you, although a quick fix would be to move all the files to the folder images in your root :)

    # January 7, 2009 at 10:49 am

    Thanks, I’ve got it sorted now, a beginners mistake from a beginner!

    Any further thoughts on the z-index issue or is it simply just a feature of CSS?

    Rob
    # January 7, 2009 at 10:50 am
    "magichew" wrote:
    Thanks, I’ve got it sorted now, a beginners mistake from a beginner!

    Any further thoughts on the z-index issue or is it simply just a feature of CSS?

    if you want it effected by the shadow but still clicky, that could be tricky… I have an idea, just gonna have a quick play…

    Rob
    # January 7, 2009 at 11:00 am

    Ok I have a crazy idea… but it might be more hazzle than its worth…

    You could make the <a> tag display as an inline-block, with a set width and height and z-index it above the text of "about Us" then the text would be under the shadow of the ball and the actual link would be above it, making it clickable… You would only need to edit the about us menu item, and leave the rest dynamic…

    I dunno just a crazy idea :D

    # January 7, 2009 at 11:41 am

    That’s genius! Sounds like it should work. Don’t know if I have the skill to pull it off! Let’s find out!

    My skill has run out. Can’t make it work. But it’s not the About Us link that I’m needing to affect, it’s the top post link, the left hand side of the link get’s covered by the ball, in this case it’s okay because the text link is long enough to have some sticking out the right hand side to be clicked. I’ve tried adding a #content a {z-index: 3} but it’s done nothing so far.

    Rob
    # January 7, 2009 at 1:42 pm

    ok I will have another look – just sorting my kids out atm :)

    Rob
    # January 8, 2009 at 5:38 am

    Sorry dude – it got all a little mental yesterday, phone calls, emergancy CV updates and so on lol

    I shall try and have a look today if I get time again :) – its just a little fiddley.

    I was thinking though to make it work properly (dynamically) we are probably going to have to be creative with the php. If you are going to keep the menu the same, it might be a bit less tricky. :D

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".