可調整大小的導航欄

我很新的HTML + CSS。我目前正在嘗試製作網站導航欄。我已經把它展示出來，並且按鈕在一定程度上工作，現在我唯一的問題是我想讓圖片在瀏覽器窗口中重新調整大小。可調整大小的導航欄

我已經使用了具有1個圖像的技術，包括正常的Nav Bar ontop和鼠標懸停在導航欄下方的按鈕，所以通常圖像顯示上半部分，但是當它懸停在上面時顯示下半部分的某個部分。在我使用過的編碼中，每個按鈕的位置和大小以及顯示的數量都是特定於像素的。

我想讓這個導航欄做的事情是根據瀏覽器的大小來調整大小。因此，如果顯示在較小的窗口中，圖像將重新調整大小，反之亦然。我試圖將px更改爲％無效。有沒有簡單的方法呢？

您可以檢查出完整的網站在這裏：www.step-down.co.uk

ul#navbar li a { 
display: block; float: left; height: 104px; 
background-image: url(li1.png); text-indent: -9999px; position:relative; top:50px; right:10px;

}

ul#navbar li a.news { 
    width: 172px; background-position: 0px 0; 
} 

ul#navbar li a.newr { 
    width: 338px; background-position: -172px 0; 
} 
ul#navbar li a.hype { 
    width: 170px; background-position: -510px 0; 
} 

ul#navbar li a.reviews { 
    width: 205px; background-position: -680px 0; 
} 
ul#navbar li a.bands { 
    width: 195px; background-position: -885px 0; 
} 



ul#navbar li a.contact { 
    width: 214px; background-position: -1080px 0; 
} 




    ul#navbar li a.news:hover { 
    background-position: 0px -114px; 
} 

    ul#navbar li a.newr:hover { 
    background-position: -172px -114px; 
} 
    ul#navbar li a.hype:hover { 
    background-position: -510px -114px; 
} 

    ul#navbar li a.reviews:hover { 
    background-position: -680px -114px; 
} 
    ul#navbar li a.bands:hover { 
    background-position: -885px -114px; 
} 
    ul#navbar li a.contact:hover { 
    background-position: -1080px -114px 
}

來源

2012-05-20 Cythis

對於所有的導航酒吧特性使它們 '％'整個屏幕，這樣他們將根據您的需要重新調整大小。

來源

2012-05-20 22:21:59

你能否詳細解釋一下？ – Cythis

我認爲你需要的不僅僅是相對大小，因爲OP的使用圖像精靈。 –

可調整大小的導航欄

回答

相關問題