网页大小调整中断菜单项

Question

我正在开发一个网站，问题是当我调整浏览器的大小（水平）时，菜单中的HOME链接会被破坏。用语言解释会发生什么变得困难，所以请在这里查看：http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html。

灰色背景是一个图像，右上角切割。在切割该区域后，我将该区域透明化。所以，它是透明背景上的梯形。

我的问题是：在调整大小时如何防止梯形转换为矩形？

Answer 1

如果你想要那样的东西。

如果钻石位于两个标签之间，那么您应该为您的li元素（全部）赋予特定宽度。不使用百分比。喜欢这个

 .menu > li#home {
 display: inline;
 float: left;
 background: none;
 background-image: url(../img/home.png);
 width: 273px;   /* same as your image size */
 }

以及两个标题图片

img#logo {
position: absolute;
top: 10px;  /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}

Answer 2

不使用图像，而是在文件中创建所需的形状。试试这个链接：

Using the Area Shape Attribute