Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS h1 image replacement no link

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25814
    twaddler
    Member

    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

    #62451
    Meander365
    Member

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

    Code:

    #62456
    Rob MacKay
    Participant

    all you need to do is…

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

    and that should sort ya :)

    #62460
    twaddler
    Member

    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

    #62461
    twaddler
    Member

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

    Yan

    #62462
    twaddler
    Member

    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

    #62559
    Rob MacKay
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.