[Solved] Background Image Anchor

[tsaw]

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.

Code:

Any thoughts?

Thanks so much!

Tim

[TheDoc]

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:

Your Company Name

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.

[tsaw]

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:

Dummy Text

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);
}

[Author]

Posts