将P标签制作为链接

Question

I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.

so I have a header image which has the sites logo in it. I want to make this logo clickable . You can see the site here: http://www.stopsweats.org/

The code for the logo tag is:

<div id="header">
<p id="logo">
<a href="http://www.stopsweats.org"></a>
</p>

Here is the CSS, added as per comments

#header {
    background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
    border-color: transparent;
    height: 108px;
    padding-top: 2em;
    z-index: -1;
}

So how can I make this into a valid link.?

1. I don't want to add any visible text as it will look ugly.
2. I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.

Answer 1

Write like this: HTML:

<div id="header">
 <a href="http://www.stopsweats.org" id="logo"></a>
</div>  

CSS:

#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
    display:block;
    width:245px;
    height:60px;
    margin-left:90px;
}

http://jsfiddle.net/rEFRw/

Answer 2

The easiest thing to do is make the a take up some space. It's already properly positioned, so there's only a little bit to do.

Remove these css width and height properties:

#logo a {
    width:1px;
    height:1px;
}

Then add a little text to the a :

<a href="http://www.stopsweats.org">StopSweats</a>

The text won't be displayed because you have text-indent: -9999px applied to that a , but the block will be about the right width and height to cover the banner image area.

Answer 3

Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..

CSS

#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}

HTML

<div id="header">
    <p id="logo">
    <a href="http://www.stopsweats.org"><img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" /></a>
    </p>
</div>

Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.

Also if your #logo id has width and height value set than change accordingly.

Answer 4

#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}

you may have to adjust some css of other tags also. but it will work