해상도 변화에 따라 레이어로 만든 메뉴의 위치도 변하게 하려면 어떻게 하면 될까요? > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

해상도 변화에 따라 레이어로 만든 메뉴의 위치도 변하게 하려면 어떻게 하면 될까요? 정보

해상도 변화에 따라 레이어로 만든 메뉴의 위치도 변하게 하려면 어떻게 하면 될까요?

본문

레이어의 위치가 해상도 1024x768을 기준으로 한 절대경로 위치로 설정되어 있어서 해상도가 바뀌면 메뉴의 위치가 이상해 집니다. 해상도를 바뀌면 레이어로 만든 메뉴의 위치도 같이 변하게 하고 싶은데 어떻게 하면 좋을까요? ㅜㅜ
제가 아직 초보라서 고수분들의 가르침 부탁드립니다. 
 
 
==========================================================================================================================
 
 
<?
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>제목 없음</title>
 
<script language="JavaScript">
<!--
function na_object_show(obj)
{
  var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
  var is_ns6 = navigator.appName.indexOf('Netscape', 0) != -1 && document.getElementById;
  if(is_ns4)
    document.layers[obj].visibility = 'show'
  else if (is_ns6)
    document.getElementById(obj).style.visibility = 'show'
  else if(document.all)
    document.all(obj).style.visibility = 'visible'
}
function na_object_hide(obj)
{
  var is_ns4 = navigator.appName.indexOf('Netscape', 0) != -1 && !document.getElementById;
  var is_ns6 = navigator.appName.indexOf('Netscape', 0) != -1 && document.getElementById;
  if(is_ns4)
    document.layers[obj].visibility ='hide'
  else if(is_ns6)
    document.getElementById(obj).style.visibility = 'hidden';
  else if(document.all)
    document.all(obj).style.visibility ='hidden'
}
function na_init_layer_events()
{
  if (document.layers) {
    document.layers['layer1'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer1'].onmouseout = new Function("na_object_hide('layer2');");
    document.layers['layer1'].onmouseover = new Function("na_object_show('layer2');");
    document.layers['layer2'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer2'].onmouseout = new Function("na_object_hide('layer2');");
    document.layers['layer2'].onmouseover = new Function("na_object_show('layer2');");
    document.layers['layer4'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer4'].onmouseout = new Function("na_object_hide('layer5');");
    document.layers['layer4'].onmouseover = new Function("na_object_show('layer5');");
    document.layers['layer5'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer5'].onmouseout = new Function("na_object_hide('layer5');");
    document.layers['layer5'].onmouseover = new Function("na_object_show('layer5');");
    document.layers['layer6'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer6'].onmouseout = new Function("na_object_hide('layer7');");
    document.layers['layer6'].onmouseover = new Function("na_object_show('layer7');");
    document.layers['layer7'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer7'].onmouseout = new Function("na_object_hide('layer7');");
    document.layers['layer7'].onmouseover = new Function("na_object_show('layer7');");
    document.layers['layer8'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer8'].onmouseout = new Function("na_object_hide('layer9');");
    document.layers['layer8'].onmouseover = new Function("na_object_show('layer9');");
    document.layers['layer9'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer9'].onmouseout = new Function("na_object_hide('layer9');");
    document.layers['layer9'].onmouseover = new Function("na_object_show('layer9');");
    document.layers['layer10'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer10'].onmouseout = new Function("na_object_hide('layer11');");
    document.layers['layer10'].onmouseover = new Function("na_object_show('layer11');");
    document.layers['layer11'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
    document.layers['layer11'].onmouseout = new Function("na_object_hide('layer11');");
    document.layers['layer11'].onmouseover = new Function("na_object_show('layer11');");
  }
}
// --></script>
</head>
<body OnLoad="na_init_layer_events();">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="65">
    <tr>
        <td><img src="test/top.jpg" width="950" height="65" border="0"></td>
    </tr>
</table>
 
------- 아래의 굵은 표시 부분이 레이어로 메뉴를 만든 부분입니다. 위의 테이블(align="center" width="950" height="65)과 같은 위치에 맞게 오도록 만들고 싶은데 어떻게 하면 좋을지 모르겠습니다. 아시는 분 답변 부탁드립니다. -----------
 
<table align="center" cellpadding="0" cellspacing="0" border="0" width="950" height="35">
    <tr>
        <td width="180">
            <div id="layer3" style="background-image:url('test/lefttop.jpg'); width:25px; height:35px; position:absolute; left:21px; top:80px; z-index:1; visibility:visible;">
            </div>
         </td>
        <td width="180">
  <div id="layer1" style="width:180px; height:35px; position:absolute; left:46px; top:80px; z-index:1; visibility:visible;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
            <img src="test/menubar.jpg" width="180" height="35" border="0">
            </div>       
            <div id="layer2" style="width:350px; height:30px; position:absolute; left:50px; top:115px; z-index:1; visibility:hidden;" OnMouseOver="na_object_show('layer2');" OnMouseOut="na_object_hide('layer2');">
               <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
      <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>                       </div>           
   </td>        
        <td width="180">
            <div id="layer4" style="width:180px; height:35px; position:absolute; left:226px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
            <img src="test/menubar.jpg" width="180" height="35" border="0">
   </div>
            <div id="layer5" style="width:350px; height:30px; position:absolute; left:230px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer5');" OnMouseOver="na_object_show('layer5');">
            <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
   <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
            </div>
            </td>
        <td width="180">
            <div id="layer6" style="width:180px; height:35px; position:absolute; left:406px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
   <img src="test/menubar.jpg" width="180" height="35" border="0">
            </div>
            <div id="layer7" style="width:350px; height:30px; position:absolute; left:410px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer7');" OnMouseOver="na_object_show('layer7');">
            <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
   <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
            </div>
            </td>
        <td width="180">
            <div id="layer8" style="width:180px; height:35px; position:absolute; left:586px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
            <img src="test/menubar.jpg" width="180" height="35" border="0">
            </div>
            <div id="layer9" style="width:350px; height:30px; position:absolute; left:590px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer9');" OnMouseOver="na_object_show('layer9');">
            <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
   <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
            </div>
            </td>
        <td width="180">
            <div id="layer10" style="width:180px; height:35px; position:absolute; left:766px; top:80px; z-index:1; visibility:visible;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
            <img src="test/menubar.jpg" width="180" height="35" border="0">
            </div>
            <div id="layer11" style="width:350px; height:30px; position:absolute; left:770px; top:115px; z-index:1; visibility:hidden;" OnMouseOut="na_object_hide('layer11');" OnMouseOver="na_object_show('layer11');">
            <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
   <a href="
"><img src="test/submenu.jpg" width="160" height="28" border="0"></a>
            </div>
            </td>
        <td width="180">
            <div id="layer12" style="background-image:url('test/righttop.jpg'); width:25px; height:35px; position:absolute; left:946px; top:80px; z-index:1;">
            </div>
            </td>
  
 </tr>
</table>

댓글 전체

어디선가 본건데요....
<td style="position:relative">
<div id="navigation" style="position:absolute; left: 0; top: 0; width: 레이어 가로사이즈; height: 세로사이즈; visibility: show">
레이어내용</div></td>
이런식으로 넣어주면.. 됩니다. left: 0; top: 0;  이 곳이 해당 td에서 몇 픽셀이 떨어진 곳에 레이어를 띄울지 픽셀수치를 넣어주면끝....
레이어의 좌측과 높이 지정을 빼보세요. left:946px; top:80px; 이부분...

좌측과 높이가 지정되면 화면의 좌측에서 946px 떨어진 곳에 보여라~ 라고 명령을 주게되어 가운데 정렬된 테이블의 경우 해상도에 따라 레이어는 항상 같은위치에 고정되어 메뉴의 위치가 맞지 않게됩니다.

레이어의 위치 지정값을 빼버리면 레어어는 테이블 안에 위치하게 됩니다.
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT