0
저는 웹 사이트에서 일하고 있습니다. 온라인에서 어떤 종류의 해결책을 찾을 수없는 문제가있어서 도움을 주시면 감사하겠습니다.메뉴가 화면 밖으로 나옵니다. 그러나 페이지를 스크롤 할 수 없습니다.
드롭 다운 메뉴를 디자인했습니다. 문제는 페이지가 확대 된 경우 2 줄로 나뉩니다 (드롭 다운 메뉴처럼 바람직하지 않음). 메뉴의 최소 너비, 위치가 절대로 설정되어 있으므로 오른쪽으로 스크롤 할 수없고 메뉴가 화면 밖으로 나옵니다. 본문을 스크롤 할 수 있지만 메뉴가 그대로 남아 있기 때문에 body 태그의 최소 너비를 설정하지 않으면 작동하지 않습니다! 실망 스럽습니다
위치를 절대적으로 유지해야합니다. 그렇지 않으면 전체적인 방법이 필요하며 도움을 주셔서 감사합니다. 그래서 오른쪽으로 스크롤 해 보겠습니다. 스마트 폰처럼 화면이 실제로 확대됩니다.
여기에 메뉴 코드가 있습니다. (너무 길기 때문에, 전체가 아니라, 주요 부분입니다. 더 많은 것을 보거나, 요청하거나, 페이지를 방문하여 소스 코드를보십시오).
웹 사이트 : http://newfutureuniversity.org/
HTML :
...
<body>
<div id="container">
<div class="menu" >
<ul>
<li><a href="http://newfutureuniversity.org/">New Future</a></li>
<li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a>
<ul class="bottom">
...
</ul>
</li>
...
CSS :
body /* Changes the style for the whole body */
{
position:absolute;
margin:0px; /* Avoids margin in the whole page */
padding:0px;
border:0px;
background-color: #EEEEEE; /* Default background color, light grey */
height:100%; /* Vertically complete */
width:100%;
min-width:400px;
min-height: 100%;
color: #333; /* Letters color */
}
#container /* The container has the header, main and footer inside */
{
position:relative;
margin:0px;
padding:0px;
min-height: 100%; /* Avoids the footer to go up */
height: auto !important;
height: 100%;
margin: 0px auto -51px;
}
.menu
{
position: fixed;
top:0px;
left:0px;
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
width:100%;
min-width:400px;
border:none;
border-bottom:1px solid gray;
margin:0px;
padding:0px;
font-size:18px;
z-index:3;
}
.menu ul
{
background:#DDD;
height:26px;
list-style:none;
margin:0px;
padding:0px;
z-index:3;
}
.menu li{
width:24.5%;
min-width:93px;
float:left;
padding:0px;
margin: 2px 0px 2px 0.5%;
}
...
편집 : 당신은 최대화 취소하고 데스크톱 브라우저에서 문제를보고 확대 할 필요가있다.
Windows 7과 IE9에서는 최대화를 시도하지 않고 300 %로 확대/축소 할 수 있습니다. 문제의 그림을 게시 할 수 있습니까? – Jawad
여기에 추가 된 문제 그림 : http://oi40.tinypic.com/2eqc104.jpg –