html - фиксированная - Изменение размера панели навигации



фиксированная панель навигации css (1)

Я довольно новичок в 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
}

Для всех свойств Nav-Bar они составляют «%» всего экрана, таким образом, они будут соответствовать размерам, которые вам нужны.





navigation