初學者：幫我用一個可點擊的替換背景圖片徽標

Question

當佈局很複雜時，我對CSS和html不太好。我可以快速解決問題，但我沒有真正的知識。

我在嘗試改編此演示：http://demo.marcofolio.net/bgimg_slideshow/爲我的網站。

問題：徽標是div的背景圖像而不是鏈接。

我不夠好，看看我可以如何改變它沒有玷污佈局。

你可以通過提供修補程序（如果它不會超過5分鐘）或通過給我提示或鏈接來幫助我，所以我可以自己想出來嗎？

編輯：這裏是一個jsfiddle with minimum code

，這裏是文件：

HTML：

<div id="header"> 
    <div id="headerimgs"> 
     <div id="headerimg1" class="headerimg"></div> 
     <div id="headerimg2" class="headerimg"></div> 
    </div> 
    <div id="nav-outer"> 
     <div id="navigation"> 
      <div id="menu"> 
       <ul> 
        <li><a href="http://www.marcofolio.net/">Marcofolio</a></li> 
        <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li> 
        <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li> 
        <li><a href="http://jquery.com/">jQuery</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li> 
        <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

的CSS：

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;} 

#header { height:600px; } 

.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; } 

#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/headerbg.png"); } 

#navigation { height:100px; width:960px; margin:0 auto; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/logo.png"); background-position:top left; background-repeat:no-repeat; } 

#menu { position:relative; top:85px; } 
#menu ul { list-style:none; } 
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; } 
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; } 
#menu ul li a:hover { text-decoration:underline; } 

Answer 1

您應該添加

<div id="logo"> 
     <a href="#"> 
      <img src="images/logo.png" alt="" /> 
     </a> 
    </div> 

到< DIV ID = 「＃導航」 >，右側前< DIV ID = 「搜索」 >

然後：

1），你應該浮動左側徽標

#logo{ 
     float: left; 
    } 

2）刪除top：85px; from #menu並加上明確：均;

3）刪除background-image：url（「../ images/logo.png」）; from #navigation

這樣，您可以點擊圖片標誌。 :)

說明：

• 你漂浮標誌的左邊，因爲＃搜尋浮動到右

• 您刪除頂部：85px;因爲這是對現在充滿圖像的空白空間的補償，並且添加清楚：兩者都是因爲它清除了浮動並將菜單放回原位

Answer 2

如果你達到使用JavaScript太，你可以做以下事情。

設置div的風格盤旋在它時鼠標指針顯示：

.Logo { cursor:pointer; } 

然後使用JavaScript，具有與onclick事件打開一個URL：

<div class="Logo" onclick="window.open('google.com')" />

Answer 3

我在您提供的鏈接上進行了一些實時編輯。我認爲這是你想達到的。

這是一個Demo，基於你的小提琴。

HTML

<div id="navigation"> 
    <h1 id="logo"><a href="/">My Website!</a><br /> 
    <span>loving jQuery and CSS</span> 
    </h1> 
... 

CSS

#navigation { 
    position: relative; 
} 

#logo { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#logo a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 32px; 
} 
#logo span { 
    font-size:20px; 
    color:#48bdee; 
    margin-left:50px; 
} 

Answer 4

這裏是我做到了。

首先，從#navigation div中刪除背景圖片。

然後添加以下內容作爲#navigation的第一個孩子。

<a href="/" style=" 
    height: 80px; 
    width: 500px; 
    background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png'); 
    background-position: top left; 
    background-repeat: no-repeat; 
    display: inline-block; 
    position: absolute; 
" alt="Image Description"></a> 

所以，你的導航DIV應該是這樣的：

<!-- Remove all background attributes from #navigation in the CSS --> 
<div id="navigation"> 
      <!-- Below is the new line!, makes your logo clickable! --> 
      <a id="logo" href="" style="height: 80px; width: 500px; background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png'); background-position: top left; background-repeat: no-repeat;display: inline-block; position: absolute;"></a> 
      <!-- Everything else below stays the same!... --> 
      <div id="search"> 
       <form> 
        <input type="text" id="searchtxt"> 
        <input type="submit" value="search" id="searchbtn"> 
       </form> 
      </div> 
      <div id="menu"> 
       <ul> 
        <li><a href="http://www.marcofolio.net/">Marcofolio</a></li> 
        <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li> 
        <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li> 
        <li><a href="http://jquery.com/">jQuery</a></li> 
        <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li> 
        <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a> 
       </li></ul> 
      </div> 
     </div> 

基本上，你犯了一個<a href>其中有一個背景圖片（所有a href's是可點擊）。當您將背景圖像分配給<a href>時，您必須將display:block設置爲塊級元素。在這種情況下，我們將其定位爲將其從文檔流中刪除，並避免干擾其他元素。

有更好的方法來做到這一點，但它可能需要重寫一些你的代碼（這並不困難，但確實需要HTML & CSS的業餘技能水平）。

希望這會有所幫助！