鏈接互相重疊

當您將鼠標懸停在其上時，本網站上的鏈接似乎重疊。 div的已經給予了正確的高度，但一旦你將鼠標懸停在鏈接似乎是撿的165像素鏈接互相重疊

http://www.dawaf.co.uk/animate/

有沒有一種方法來設置高度爲93px停止重疊的高度？

#about { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 89px; 
    width: 336px; 
} 
span.title-link { 
    font-size: 6.8em; 
    font-weight: bold; 
    font-family: 'Titillium Web', Arial, sans-serif; 
    text-decoration: none; 
    line-height: 93px; 
    cursor: pointer; 
    opacity: 0; 
} 

span.title-link a { 
    color: #FFF; 
    text-decoration: none; 
} 

span.title-link a:hover { 
    color: #E91F4C; 
} 

#about-red { 
    left: -104px; 
    width: 545px; 
} 

#logo-red { 
    height: 93px; 
    width: 209px; 
    position: absolute; 
    left: 336px; 
} 

/*Echo 
------------------------------------------------------------ */ 
#gallery { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 92px; 
    width: 434px; 
} 

#gallery-echo { 
    left: -202px; 
    width: 714px; 
} 

#logo-echo { 
    height: 93px; 
    width: 280px; 
    position: absolute; 
    left: 434px; 
} 

/*Events 
------------------------------------------------------------ */ 
#contact-events { 
    left: -216px; 
    width: 862px; 
} 

#contact { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 92px; 
    width: 448px; 
} 

#logo-events { 
    height: 93px; 
    width: 414px; 
    position: absolute; 
    left: 448px; 
}

來源

2013-03-27 user1652997

也許你修正了它，但在Google Chrome瀏覽器中看起來沒問題。但是，一點。在菜單中，如果儘量保留適用於a元素的儘可能多的樣式，並且很少應用於ul或li，您將獲得更多可預測的CSS行爲。 – magi182 2013-03-27 18:30:41

如果您在Chrome中使用檢查元素，則可以看到a元素重疊。因此，關於「關於」的鏈接將部分路徑重疊到「圖庫」鏈接上。 – user1652997 2013-03-27 18:33:17

問題出在span.title-link – user1652997 2013-03-27 18:34:44

內聯元件，例如跨度，a鏈接等忽略 'height' 屬性。嘗試：

.title-link { 
    display: inline-block; 
}

來源

2013-03-27 18:40:55 rvidal

Yeppers。這裏。 – Michael 2013-03-27 18:44:09

謝謝你，工作。 – user1652997 2013-03-27 18:44:21

你會碰到很多更多的工作，如果你是絕對定位的元素和固定大小你的問題加劇，因爲你與％/ em單位混合像素。花時間調整你的方法會更好，而不是解決這個問題。

將絕對定位限制爲儘可能少的元素。在這種情況下，您希望將導航項目包裝在容器中，並絕對放置容器。
不要固定高度;使用font-size以及line-height:SOME_MULTIPLE(i.e. 1.5)和vertical-align:middle（無論元素是內聯/內聯塊/塊都可以工作）。
嘗試概括你的風格，並通過類將它們應用於多個元素，而不是通過id對各個元素進行風格化。它使您的CSS更易於維護。

理由給你這些技巧和不回答你的問題......

你將有一個更容易的時間越來越最初這個網站一起
你將有較少的工作來改變文本一個導航項目，或添加一個新的導航項目。
我已經看過這種風格與ids和fix-the-position/size-of-everything方法。這是太多餘的，僵硬的有用。忘記最佳做法;它違反了基本的CSS和HTML原則，並且使每個人都很困難。打破這個習慣，讓這個和所有未來的項目變得更加輕鬆！

來源

2013-03-27 19:21:10

鏈接互相重疊

回答

相關問題