将一个P标签转换为一个链接。

Question

我有一个问题。我雇佣的设计师没有将标志和页头分开，现在已经太晚让他去做了。

所以我有一张页头图片，其中包含网站的标志。我想让这个标志可点击。您可以在此处查看该网站：http://www.stopsweats.org/

标志标签的代码为：

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

这里是根据评论添加的CSS。

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

那么我如何将其转化为有效链接呢？

1. 我不想添加任何可见文本，因为这样会显得很丑陋。
2. 我将更改 #logo 的宽度、高度和位置，并叠加在图像上。希望在所有浏览器中都可以正常显示。

- Vishal Khialani

---

为什么不在锚点内添加<img>标签？ - Kyle

等一下，标志在哪里？是 <p> 元素吗？请添加这些元素的 CSS 代码。 - Madara's Ghost

你应该在问题中包含相关的CSS。我不得不直接查看你的网站才找到它。 - Francis Avila

你仍然缺少#logo和a的CSS。 - Francis Avila

Answer 1

最简单的方法是让a占据一些空间。它已经被正确地定位，所以只需要做一点点调整。

移除这些css的宽度和高度属性：

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

然后在中添加一些文本：

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

由于您已将 a 元素应用了 text-indent: -9999px，因此文本不会被显示出来，但这个块的宽度和高度适合覆盖横幅图像区域。

- Francis Avila

Answer 2

请这样写： 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/

- sandeep

Answer 3

根据您的结构，最简单的方法是将您的徽标图像直接放入HTML中，而不是通过CSS的background-image属性。如果您愿意这样做，只需在锚点之间添加图像标签（....），然后根据以下代码更改您的CSS和HTML。

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>

请检查您的标志图像URL，并确保将标题div标签放置在当前HTML文件中的位置。

此外，如果您的#logo id设置了宽度和高度值，请相应更改。

- Code Lover

Answer 4

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

你可能还需要调整其他标签的CSS，但它会起作用。

- RoyalEnfy