適合任何屏幕的菜單（自動調整寬度）

-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

適合任何屏幕的菜單（自動調整寬度）

回答

相關問題