화면에 맞는 메뉴 (자동 크기 조정 폭)

-1

어떤 화면에서도 완벽하게 맞는 메뉴를 만들고 있지만 높이는 변경되지 않습니다 (너비 만 변경).화면에 맞는 메뉴 (자동 크기 조정 폭)

문제는 : 내 메뉴가 3 개의 이미지 (왼쪽, 가운데 및 오른쪽)로 나뉘어져 있습니다. 중간 이미지가 화면에 맞게 크기가 조절 (나는 70 % 퍼트)하지만 화면처럼 작은 폭 메뉴 브레이크 라인의 측면 갖는 경우 :

On my screen

가 On smaller screens

I는 솔루션을 필요 이것, 또는이 메뉴를 만드는 다른 방법!

전체 너비를 차지하고 측면에 그라디언트가 있어야합니다.

<!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로 많은 기술을 가지고 있지 않기 때문에 내가 어떻게 테이블에서 그렇게 해야하는지 정확히 알지 못한다. –

화면에 맞는 메뉴 (자동 크기 조정 폭)

답변

관련 문제