适合任何屏幕的菜单（自动调整宽度）

-1

我制作的菜单完全适合任何屏幕，但其高度不会改变（只有宽度）。适合任何屏幕的菜单（自动调整宽度）

问题是：我的菜单分为3个图像（左，中，右）。中间图像调整大小以适应屏幕（我的推杆70％），但是当屏幕有更小的宽度，菜单断裂线两侧，这样的：

On my screen

On smaller screens

我需要的解决方案这个或者其他的方法来制作这个菜单！

它必须占据整个宽度并且在其两侧具有梯度。这里

<!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>

来源

2012-02-03 Artur Haddad

你可以发布的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

真正安全的选择是使用表1行3列。这会给你你想要的列（左，右，中）和宽度将被保持。关于列的背景图像，您可能想要考虑如何设计和剪切它们以使其看起来不错。

这里的另一个选择将是html css &的组合 - 唯一的问题是，如果浏览器不支持JS，那么您的网站看起来不正确。

这是否帮助？

来源

2012-02-04 17:26:56

你能教我一步一步吗？因为我在html中没有很多技巧，所以我不知道我应该如何在表格中这么做。 – 2012-02-06 11:15:04

适合任何屏幕的菜单（自动调整宽度）

回答

相关问题