0

私はhtml + cssにかなり慣れていません。私は現在、ウェブサイトのナビゲーションバーを作ろうとしています。私はそれを表示し、ボタンがある程度機能するようにしましたが、私の唯一の問題は、ブラウザウィンドウで画像のサイズを変更したいということです。

通常のナビゲーション バーが上にあり、マウス オーバー ナビゲーション バー ボタンが下にある 1 つの画像を持つ手法を使用したので、通常、画像は上半分を表示しますが、ホバーすると下半分の特定のセクションが表示されます。私が使用したコーディングでは、各ボタンの位置とサイズ、および表示する量を引用するのはすべてピクセル固有です。

このナビゲーションバーにやりたいことは、ブラウザに応じてある程度サイズを変更できるようにすることです。したがって、小さいウィンドウに表示すると、画像のサイズが変更され、その逆も同様です。無駄に 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
}
4

1 に答える 1

0

すべての Nav-Bar プロパティを画面全体の '%' にすると、必要なサイズに変更されます。

于 2012-05-20T22:21:59.463 に答える