해상도 변화에 따라 레이어로 만든 메뉴의 위치도 변하게 하려면 어떻게 하면 될까요? 정보
해상도 변화에 따라 레이어로 만든 메뉴의 위치도 변하게 하려면 어떻게 하면 될까요?본문
레이어의 위치가 해상도 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>
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;
<!--
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'
}
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_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'
}
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>
{
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>
<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>
<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에서 몇 픽셀이 떨어진 곳에 레이어를 띄울지 픽셀수치를 넣어주면끝....
<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 떨어진 곳에 보여라~ 라고 명령을 주게되어 가운데 정렬된 테이블의 경우 해상도에 따라 레이어는 항상 같은위치에 고정되어 메뉴의 위치가 맞지 않게됩니다.
레이어의 위치 지정값을 빼버리면 레어어는 테이블 안에 위치하게 됩니다.
좌측과 높이가 지정되면 화면의 좌측에서 946px 떨어진 곳에 보여라~ 라고 명령을 주게되어 가운데 정렬된 테이블의 경우 해상도에 따라 레이어는 항상 같은위치에 고정되어 메뉴의 위치가 맞지 않게됩니다.
레이어의 위치 지정값을 빼버리면 레어어는 테이블 안에 위치하게 됩니다.