任意の画面に適合するメニュー（自動サイズ変更幅）

-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を使います。 –

http://jsfiddle.net/NsPGp/ –

ヘルプ.......... –

本当に安全なオプションは、1行目と3列のテーブルを使用することです。それはあなたに必要な列（左、右、中央）を与え、幅は維持されます。列の背景イメージに関しては、見栄えを良くするためにデザインやカットする方法を考えたいかもしれません。

ここで別のオプションはhtml css & javascriptの組み合わせになります。唯一の問題は、ブラウザがJSをサポートしていないと、あなたのウェブサイトが正しく表示されないことです。

これは役に立ちますか？

出典

2012-02-04 17:26:56

あなたは私をステップバイステップで教えていただけますか？私はhtmlで多くのスキルを持っていないので、私はテーブルでそれをやろうとしている方法を正確には知らない。 –

任意の画面に適合するメニュー（自動サイズ変更幅）

答えて

関連する問題