Grow your CSS skills. Land your dream job.

h1 image replacement no link

  • # August 20, 2009 at 6:53 am

    Hi all,
    I’ve been following Chris’s excellent video tutorials to help create a wordpress theme but have run into an early snag.

    I’m using the h1#logo image replacement technique but it simply will not allow the link to be applied to the image, or, possibly, the div that contains it (my understanding of how this is meant to work may be misplaced).

    The link is only applied to the text which is now indented -9999px.

    My code is as follows which I’d swear is pretty much as that which Chris uses apart from the margins and dimensions:

    Code:
    h1#logo
    {width: 1020px; height: 325px; background: url(media/header_img.jpg) no-repeat; text-indent: -9999px; margin: 0 0 20px 0;}

    Any advice much appreciated.

    Thanks
    Yan

    # August 20, 2009 at 7:08 am

    Have you tried the Dwyer method for image replacement? Give this a try:

    Code:

    Rob
    # August 20, 2009 at 10:51 am

    all you need to do is…

    Code:
    h1 a {
    display:block;
    width:100%;
    height:100%;
    }

    and that should sort ya :)

    # August 20, 2009 at 11:39 am

    Thanks guys much appreciated.

    Rob, your method answers most handsomely apart from…
    I have a background colour used on my a:hovers which the h1 image now picks up too.
    I’ve tried targetting this with

    Code:
    h1 a:hover {color:white}

    so trying to disable the hover state but it does no good.

    Is there a way round this or should I lose the hover backgrounds instead?

    Ta
    Yan

    # August 20, 2009 at 11:42 am

    Arggh!
    I know it’s missing the semi-colon but it doesn’t work when I put it in either.

    Yan

    # August 20, 2009 at 11:46 am

    Sorry, me again.
    OK, I’ve used ‘transparent’ as background-colour for h1 hover which works in FF on mac.
    Do we know if this filters down to IE 6 pc?
    I’m not in a position to test just yet.

    Thanks
    Yan

    Rob
    # August 22, 2009 at 11:17 am

    Hey :)

    Do you have a live linky? :)

    Also for reference, you dont need a semi colon on the end of a single line of CSS, for example:

    h1 { width:100px }

    You would need it after one, because its the semi colon that says "New style option!!"

    So

    h1 {width:100px; height:100px }

    would be perfectly valid.

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

You must be logged in to reply to this topic.

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