Grow your CSS skills. Land your dream job.

[Solved] Background Image Anchor

  • # February 22, 2010 at 12:32 pm

    I have a header on a site – see image attachment… (snap shot of top right corner of header)

    Currently the header is a background image defined in CSS… and the search box is placed into the area above the image.

    PROBLEM:

    I want to make the the background image an anchor that when clicked – returns to the home page. When I do that, not only does it work for the image – but when I click in the search box – it no longer goes to search but back to the home page.

    I would like the search box to work as a search box – form input and everything else when clicked return to the home page.

    Any thoughts?

    Thanks so much!

    Tim

    # February 22, 2010 at 1:05 pm

    First things first: you shouldn’t have an anchor tag wrapping around a div, not only will this not validated, it will also cause problems like the one you are dealing with.

    I would do something like this:

    Code:

    < ?php if ($search_box): ?>


    < ?php endif; ?>

    Code:
    a#logo {
    display: block;
    width: ; /* up to the search box */
    height: ; /* height of header */
    text-indent: -9999px;
    }

    You may need to work in some absolute positioning to get it to sit properly, but that’s what I do for nearly every project.

    # February 22, 2010 at 1:51 pm

    SOLVED!

    OH Yes! I see it now… I needed to move the anchor inside the divs and separate that from the form input box.

    I used your suggestion on the code and tweaked it and this is working the way I want it…

    I just had to move the background image line into the a#logo css code… and add the href to the line of code in the html.

    I greatly appreciate you taking time to help me!

    Thanks!

    Tim

    Here’s how the final version ended up:

    Code:
    CODE:


    < ?php if ($search_box): ?>


    < ?php endif; ?>

    CSS CODE:
    /** Logo Panel **/
    #logopanel {
    width: 815px;
    height: 117px;
    float: left;
    }

    a#logo {
    display: block;
    width: 815px; /* up to the search box */
    height: 117px ; /* height of header */
    text-indent: -9999px;
    float: left;
    background-image: url(../../../default/files/templateimages/level1_04.jpg);
    }

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

You must be logged in to reply to this topic.

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