Question

我试图将http://ukgraffiti.tumblr.com/的标题转换为返回主页的链接。

CSS：

#header {
  position: fixed;
  padding: 50px 500px 90px 80px;
  background-image: url(http://s32.postimg.org/nqrhk4r9h/graffiti_header3.jpg);
  background-repeat: no-repeat;
}

HTML：

<div id="header">
  <h1><a href="http://ukgraffiti.tumblr.com/">{Title}</a></h1>
</div>

问题似乎是id和h1实际上控制了我用CSS隐藏的默认文本标题，而不是我放在其中的图像。

我尝试使用不同的ID创建一个简单的链接，然后在CSS中更改了id，但这并没有起作用，无论如何都搞砸了我的布局。

提前致谢。

Answer 1

您只需将标头ID应用于<a>标记：

<a id="header" href="http://ukgraffiti.tumblr.com/">{Title}</a>

Answer 2

我现在只看了你的网站。问题是div是你想要点击的东西，因为它有一个背景图像。这样做

编辑：所以我做了一些改变以获得你想要的东西

<div>
    <a href="http://ukgraffiti.tumblr.com/"><img src="http://s32.postimg.org/nqrhk4r9h/graffiti_header3.jpg"></a>
    <div id="topsearch">
    <form action="http://ukgraffiti.tumblr.com/search" method="get" id="searchform">
        <p><input onfocus="this.value=&#39;&#39;" type="text" value="Search" name="q" results="5"></p>
    </form>
</div>

要删除白色间隙，请从#content中删除margin-top: 200px;。

Answer 3

替换你的html：

<div id="header">
  <h1><a href="http://ukgraffiti.tumblr.com/">UK GRAFFITI</a></h1>
  <p id="description"><br></p>
  <div id="topsearch">
    <form action="/search" method="get" id="searchform">
      <p>
        <input onfocus="this.value=''" type="text" value="Search" name="q" results="5">
      </p>
    </form>
  </div>
</div>

有了这个：

<a id="header" href="href="http://ukgraffiti.tumblr.com/">
    <h1 class="header-text">UK GRAFFITI</h1>
</a>
<form action="/search" method="get" id="searchform">
    <input onfocus="this.value=''" type="text" value="Search" name="q" results="5">
</form>

并将此添加到您的css：

#searchform {
  width: 80px;
  position: absolute;
  top: 128px;
  left: 738px;
  z-index: 1000;
}

您可以在此处设置搜索框的位置。

并为标题设置文本缩进。认为你只把它作为搜索引擎的文本。

.header-text {
  text-indent: -9999em;
}

@Jud这项工作。我制作了你的页面html的完整副本，并按照描述进行更改。在这里你可以测试它。

CODEPEN

无法将标题图像转换为链接

3 个答案: