可调整大小的导航栏 [英] Resizable nav bar

问题描述

我对html + css很新颖。我目前正在尝试制作网站导航栏。我已经把它显示出来，并且按钮在一定程度上工作，现在我唯一的问题是我想让图片在浏览器窗口中重新调整大小。

我使用的技术有两种，一种是正常导航栏ontop，另一种是鼠标悬停在导航栏下方的按钮，所以通常情况下，图像显示的是上半部分，但是当它悬停时，会显示下半部分的某个部分。
在我使用的编码中，每个按钮的位置和大小以及显示的数量都是特定于像素的。

我想要的是什么导航栏的功能取决于浏览器的大小。因此，如果显示在较小的窗口中，图像将重新调整大小，反之亦然。我试图将px更改为％无效。有没有简单的方法呢？

你可以在这里查看完整的网站：www.step-down.co.uk

  ul＃navbar li a {
 display：block;向左飘浮;身高：104px; 
 background-image：url（li1.png）; text-indent：-9999px;位置：相对;顶部：50像素;右：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 
} 
   
I'm pretty new to html + css. I'm currently trying to make a website nav bar. I've got it to show and the buttons to work to an extent, now my only issue is I would like the image to re-size with the browser window.

I have used the technique which has 1 image with both the normal Nav Bar ontop and the mouse over nav bar buttons underneath, so normally the image shows the top half but when hovered over it displays a certain section of the bottom half.
In the coding I have used, it is all pixel specific to quote the locations and sizes of each button and how much to show.

What I want this navbar to do is to be re-sizable depending on the browser to an extent. So if showed in a smaller window the image will re-size and vice versa. I have tried changing the px to %'s without avail. Is there a simple way round this?

You can check out the full website here: 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
}

解决方案
For all of the Nav-Bar properties make them '%' of the entire screen, this way they will be re sized to what you need. 

                        
这篇关于可调整大小的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！