중간에 크기를 조정할 수있는 메뉴를 만드는 방법은 무엇입니까?

Pls help !!!중간에 크기를 조정할 수있는 메뉴를 만드는 방법은 무엇입니까?

CSS :

body 
{ 
margin: 0px; 
padding: 0px; 
} 

body #header { 

    width:100%; 
    clear:both; 
    height:90px; 
    /*overflow:hidden*/; 
    box-shadow: 1px 0px 10px 2px #000; 
    } 

body #header #h_l { 
    width: 30%; 
    height: 90px; 
background-image: linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%); 
background-image: -o-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%); 
background-image: -moz-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%); 
background-image: -webkit-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%); 
background-image: -ms-linear-gradient(top, #e1e1e1 40%, #9d9d9d 99%); 

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #e1e1e1), color-stop(99%, #9d9d9d)); /* Safari 4+, Chrome 2+ */ 


filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1e1', endColorstr='#9d9d9d'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1e1', endColorstr='#9d9d9d')"; /* IE8+ */ 


background-image: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0.40, #e1e1e1), 
    color-stop(0.99, #9d9d9d) 
); 
float:left; 
} 

body #header #h_l #logo { 

    float: right; 
    /*-ms-interpolation-mode:bicubic; */ 
    max-width: 100%; 
    width: auto\9; /* ie8 */ 
} 

body #header #h_r { 
    width: 70%; 
    height: 90px; 
background: #747474; 

    float: right; 
} 

body #header #h_r #menu { 

    position: relative; 
    left: -50px; 
    float:left; 
    /*-ms-interpolation-mode:bicubic; */ 
    max-width: 100%; 
    width: auto\9; /* ie8 */ 
    }

HTML :

<body > 

    <div id="header"> 

    <div id="h_l"> 

     <img id="logo" title="logo" alt="logo" src="{HTTP}{WEBSITE}/images/newlook/MM/logo_plus100px_right.png" > 
    </div> 
    <div id="h_r"> 
     <span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Home_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Solutions_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Support_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Company_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Contact_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Blog_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Reseller_but.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Divider_1.png" ></span><span ><img id="menu" title="" alt="" src="{HTTP}{WEBSITE}/images/newlook/MM/Apps_but.png" ></span> 
    </div> 

    </div> 
</body>

왜 오른쪽에있는 메뉴에서 요소가 브라우저 창 크기 조정에 의해 새 행 하나를 계속 할? 어떻게하면 그 일을 멈추게 할 수 있고 브라우저 창의 크기를 조정할 때 왼쪽에있는 이미지처럼 크기를 조정할 수 있습니다 (전체 메뉴가 전체 블록 인 것처럼)? 그것은 CSS에서 할 수 또는 자바 스크립트를 만들어야합니까? 대답하는 사람 덕분에!

출처

2012-07-05 Angellum Manaflow

실제 이미지가 없으면 여기에서 달성하고자하는 것을 이해하기 쉽지 않습니다. 여기 당신의 사건을 재현 :

http://jsfiddle.net/gVQ8x/1/

난 그냥 여기 비율 폭을 설정 한 (대한 -ms-interpolation-mode 부분 어떻게?) :

body #header #h_r #menu { 
    position: relative; 
    left: -50px; 
    float:left; 
    /*-ms-interpolation-mode:bicubic; */ 
    max-width: 100%; 
    width: 6%; /* was auto\9 */ 
}

내가 강하게 IE 해킹을 사용에 대해 조언. 조건부 클래스를 대신 사용해보십시오 : http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

미래에 문제를 일으킬 수있는 또 다른 중요한 문제는 동일한 id를 공유하는 여러 요소, 즉 앞서 말한 body #header #h_r #menu을 가지고 있다는 것입니다. id는 javascript DOM 조작이 적절하고 예측 가능하게 작동하도록하려면 고유해야합니다.

출처

2012-07-05 18:24:30 unclenorton

답장을 보내 주셔서 감사합니다. 나는 당신이 제안한 조정을 시도 할 것이고, 나는 성공이나 실패에 대해 대답 할 것이다. –

중간에 크기를 조정할 수있는 메뉴를 만드는 방법은 무엇입니까?

답변

관련 문제