Kann Header-Bild nicht in Link

Question

drehen Ich versuche, meine Kopfzeile um http://ukgraffiti.tumblr.com/ in einen Link zurück auf die Hauptseite zu drehen.

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> 

Das Problem scheint zu sein, dass die ID und h1 tatsächlich den Standardtext-Header steuern, die ich mit CSS versteckt habe, anstatt die Bild, das ich an seine Stelle gesetzt habe.

Ich habe versucht, die Erstellung eines einfachen Links mit einer anderen ID, und änderte dann die ID in der CSS, aber das hat nicht funktioniert und mein Layout sowieso vermasselt.

Vielen Dank im Voraus.

Answer 1

können Sie gelten nur die Header-ID an den <a> tag:

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

Answer 2

ich auf Ihrer Seite nur sah jetzt. Das Problem ist, dass div ist, was Sie anklickbar machen möchten, weil es ein Hintergrundbild hat. So tun, um diese

Redaktion: Also ich einige Änderungen vorgenommen, um zu bekommen, was Sie wollen können

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

Auch weiße Lücke zu entfernen, entfernen Sie margin-top: 200px; von #content.

Answer 3

Ersetzen Sie Ihre 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> 

Mit dieser:

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

Und fügen Sie diese zu Ihrem CSS:

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

Hier können Sie die Position Ihrer Suchfeld einstellen .

Und legen Sie den Text-Einzug für die Überschrift. Denke du hast es als Text nur für Suchmaschinen.

@Jud Diese Arbeit. Ich mache eine vollständige Kopie Ihrer Seite HTML und ändere wie beschrieben. Hier können Sie es testen.

CODEPEN