适合任何屏幕的菜单(自动调整宽度)
问题描述:
我制作的菜单完全适合任何屏幕,但其高度不会改变(只有宽度)。适合任何屏幕的菜单(自动调整宽度)
问题是:我的菜单分为3个图像(左,中,右)。 中间图像调整大小以适应屏幕(我的推杆70%),但是当屏幕有更小的宽度,菜单断裂线两侧,这样的:
我需要的解决方案这个或者其他的方法来制作这个菜单!
它必须占据整个宽度并且在其两侧具有梯度。这里
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var onre = function(){
var w = document.getElementById('make2fit').offsetWidth;
var h = document.getElementById('make2fit').offsetHeight;
var ww = window.innerWidth;
var wh = window.innerHeight;
var p = (Math.floor((ww/wh)*100)/100<1)?(ww/w):(wh/h);
var nw = Math.round(w * p);
var nh = Math.round(h * p);
document.getElementById("make2fit").width = nw;
document.getElementById("make2fit").height = nh;
}
window.onresize = onre;
window.onload = onre;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silvania Miranda</title>
<style type="text/css">
body {
background-color: #030708;
}
div.menu {
/* current css */
min-width:960px; /* which is the current minimum width for designing website for desktops */
height:auto;
width:auto;
margin-right:auto;
margin-left:auto;
position:relative;
top:510px;
overflow:hidden;
}
ul li {
/* current css */
display:block; /* default display for list elements, could be omitted */
float:left;
width:30%;
max-width:125px;
min-width:50px;
color:white;
}
ul {
/* current css */
overflow:hidden
}
div.mulher{
width:auto;
height:auto;
z-index:-1;
bottom:0px;
right:0px;
position:absolute;
}
div.fundo{
position:absolute;
width:100%;
height:auto;
bottom:15%;
}
div.fundomenu{
background:url(menufundo.png);
width:80%;
height:60px;
position:relative;
margin-right:auto;
margin-left:auto;
z-index:0;
float:left}
div.cantomenu
{position:relative;
height:60px;
width:156px;
overflow:hidden;
z-index:100;
float:left}
div.esq{background:url(menupontae.png)}
div.dir{background:url(menupontad.png)}
</style>
</head>
<body>
<div class="mulher"><img src="mulher.png" id="make2fit" style="margin:0px;"/></div>
<div class="fundo">
<div class="esq cantomenu"></div>
<div class="fundomenu"></div>
<div class="dir cantomenu"></div>
</div>
</body>
</html>
答
真正安全的选择是使用表1行3列。这会给你你想要的列(左,右,中)和宽度将被保持。关于列的背景图像,您可能想要考虑如何设计和剪切它们以使其看起来不错。
这里的另一个选择将是html css &的组合 - 唯一的问题是,如果浏览器不支持JS,那么您的网站看起来不正确。
这是否帮助?
+0
你能教我一步一步吗?因为我在html中没有很多技巧,所以我不知道我应该如何在表格中这么做。 – 2012-02-06 11:15:04
你可以发布的HTML和CSS的呢?如果可以,请使用jsfiddle。 – 2012-02-03 21:27:51
http://jsfiddle.net/NsPGp/ – 2012-02-03 21:31:35
帮忙?? .......... – 2012-02-04 14:52:01