精靈和絕對定位問題：2工作和2不？

對不起，我知道精靈覆蓋了很多，但我還沒有找到答案在那裏與我的具體情況。精靈和絕對定位問題：2工作和2不？

我有4個絕對定位的按鈕使用相同的.png文件與3個狀態（鏈接，懸停，活動）的'主頁'按鈕懸停工程，但懸停區域不是整個按鈕，'汽車'按鈕懸停是所有的按鈕，但其他2個按鈕沒有可點擊或可移動的區域。

大多數處理這個問題的文章都說要調整高度/寬度，但是對我而言，所有這些都是移動圖像而不是文本，並且不會改變任何懸停問題......不知道還有什麼嘗試..

必要風格：

span.nav-button-adjust { display:block; 
          position:relative; 
          top:3px; 
          left:9px; 
} 

span.nav-button a:link, 
span.nav-button a:visited { display:block; 
           width: 91px; height: 30px; 
           background-image: url(images/nav-button.png); 
           background-position: top; 
           background-repeat: no-repeat; 
           font-family:arial black; 
           text-decoration:none; 
           color:#1461b2; 
} 

span.nav-button a:hover { background-image: url(images/nav-button.png); 
          background-position: center;  
} 

span.nav-button a:active { background-image: url(images/nav-button.png); 
           background-position: bottom;  
}

必要的HTML：

<span class="nav-button"><a href="home.php" style="position:absolute;left:420px;top:17px"><span class="nav-button-adjust">&nbsp;&nbsp;HOME</span></a></span> 
<span class="nav-button"><a href="about.php" style="position:absolute;left:522px;top:17px"><span class="nav-button-adjust">&nbsp;ABOUT</span></a></span> 
<span class="nav-button"><a href="cars.php" style="position:absolute;left:392px;top:59px"><span class="nav-button-adjust">&nbsp;&nbsp;CARS</span></a></span> 
<span class="nav-button"><a href="search.php" style="position:absolute;left:496px;top:59px"><span class="nav-button-adjust">SEARCH</span></a></span>

編輯：每個請求：

像我使用：https://dl.dropboxusercontent.com/u/12017360/cars/images/nav-button.png

來源

2013-07-17 B Rad C

你也可以提供圖片，它可能會幫助嗎？ –

我會使用' '來分隔你的文字。 – hungerstar

你有太多的事情與你的CSS，尤其是你的HTML。你可以整理你想要做的以下事情。你不需要使用絕對定位。

在下面的jsFiddle中，您會注意到當您懸停或單擊一個鏈接時，背景圖像的另一部分的一小部分將穿過。這與你如何製作/設置你的精靈有關。

http://jsfiddle.net/ucsNH/

不知道如果這些鏈接必須是30像素高。如果沒有，您可以通過設置#nav a { height: 29px; line-height: 29px;並將background-positions調整1px來修復它們，因此它們將是0 -1px, 0 -30px, 0 -59px。見第二個jsFiddle。

http://jsfiddle.net/ucsNH/2/

CSS

ul, li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font: 12px/1.5em Arial, sans-serif; /* this should be inherited */ 
} 
#nav { 
    width: 202px; /* (5px + 91px + 5px) x 2 */ 
} 
#nav li { 
    float: left; 
    margin: 5px; 
} 
#nav a:link, 
#nav a:visited { 
    display: block; 
    width: 91px; 
    height: 30px; 
    line-height: 30px; /* vertically centers text */ 
    text-transform: uppercase; 
    color:#1461b2; 
    background: url(images/nav-button.png) no-repeat 0 0; 
    text-decoration: none; 
    text-align: center; 
    font-weight: bold; 
} 
#nav a:hover { 
    background-position: 0 -29px; 
} 
#nav a:active { 
    background-position: 0 -58px; 
    color: white; 
} 
.home, 
.about { 
    position: relative; 
    left: 25%; 
}

HTML

<ul id="nav"> 
    <li class="home"><a href="#">Home</a></li> 
    <li class="about"><a href="#">About</a></li> 
    <li><a href="#">Cars</a></li> 
    <li><a href="#">Search</a></li> 
</ul>

即HTML是整潔了很多不是嗎？

導航應放置在一個無序列表<ul>。請避免內嵌樣式，例如您的標籤<a>標籤。 span標籤不需要在錨標籤內，因此您不應使用 來推送東西（文字）。如果您需要一些空間，請使用margin和padding。這就是他們的目的！

來源

2013-07-17 08:26:56 hungerstar

非常感謝你 –

在這裏你去我創建了所有的懸停按鈕一jfiddle工作，只需點擊它來檢查，這就是你要找的東西？如果是，那麼請點擊左邊的勾號選擇此作爲正確的答案。

只有我做出了對定位的變化，

<span class="nav-button"><a href="home.php" style="position:absolute;left:220px;top:17px"><span class="nav-button-adjust">&nbsp;&nbsp;HOME</span> 
</a> 
</span> 
<span class="nav-button"><a href="about.php" style="position:absolute;left:322px;top:17px"><span class="nav-button-adjust">&nbsp;ABOUT</span> 
</a> 
</span> 
<span class="nav-button"><a href="cars.php" style="position:absolute;left:192px;top:59px"><span class="nav-button-adjust">&nbsp;&nbsp;CARS</span> 
</a> 
</span> 
<span class="nav-button"><a href="search.php" style="position:absolute;left:296px;top:59px"><span class="nav-button-adjust">SEARCH</span> 
</a> 
</span>

來源

2013-07-17 06:04:37

精靈和絕對定位問題：2工作和2不？

回答

相關問題