ヘッダーイメージをリンクに変換できません

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

あなただけ<a>タグにヘッダIDを適用することができます：私はちょうど今、あなたのサイトを見て

<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;を削除するかもしれないものを得るためにいくつかの変更を加えました。これにより

<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> 

：

Answer 3

あなたのhtmlを交換し

<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