css로 메뉴제목을 클릭하면 하위리스트의 레이어창이 열릴때 위치문제 정보
css로 메뉴제목을 클릭하면 하위리스트의 레이어창이 열릴때 위치문제본문
제목줄을 클릭하면 하위 목록이 펼쳐지도록 레이어 형태로 구현하려고 합니다.
예를 들면 아래 코드에서 처럼 <추천정보>를 클릭하면 제목글자 아래로
<추천정보 관련 하위 리스트>가 레이어로 열리도록 하고싶습니다.
그런데... 익스8 / 파이어폭스 어디에서도 레이어가 제목글 바로 아래에 열리지 않고
멀찍이 떨어져서 레이어가 펼쳐집니다.
익스플로러 8에는 openLayer(IdName, tpos, lpos)에서 위치값을 조정해서 맞추면 되지만
문제는 익스6, 익스8 그리고 파이어폭스에서 동일하게 출력이 안되는 문제가 있습니다.
코드를 가져와서 적용하다보니 크로스브라우징에서 문제가 많은데
코드를 전반적으로 수정해서라도 손을 봤으면 하는데 어떻게 해야할지 모르겠군요
한번 보시고 도움글좀 부탁드리겠습니다.
<style>
/* -- 탑링크 Start - */
#navi_box { width:100%; height:35px; text-align:center; padding:0;
background:#003399 url('/_common/img/navibox_bg.gif') repeat-x top left; }
#navi_box .navi_inbox { float:left; margin:10px 0px 0px 10px; padding:0; }
#navi_box .navi_sec { font:bold 11px dotum; color:#ccc; letter-spacing:-0.1em; }
a.navi_white:link, a.navi_white:active, a.navi_white:visited { font:bold 13px gulim,Tahoma; color:#fff; }
a.navi_white:hover { color:'#FFFF00'; text-decoration:underline; }
a.navi_yellow:link, a.navi_yellow:active, a.navi_yellow:visited { font:bold 13px gulim,Tahoma; color:#FFFF99; }
a.navi_yellow:hover { color:'#FFFF00'; text-decoration:underline; }
/* -- 레이어 메뉴 BOX - */
#layerBox { position:relative; }
#layerPop { width:150px; height:250px; padding:10px; position:absolute; display:none; border:5px solid #777; background:#fff; }
#layerPop .close { position:absolute; bottom:15px; right:10px; font:bold; color:red; }
</style>
<!-- 레이어 메뉴 SCRIPT -->
<script type="text/javascript">
<!--
function openLayer(IdName, tpos, lpos){
var pop = document.getElementById(IdName);
pop.style.display = "block";
pop.style.top = tpos + "px";
pop.style.left = lpos + "px";
}
function closeLayer(IdName){
var pop = document.getElementById(IdName);
pop.style.display = "none";
}
//-->
</script>
<div id="navi_box">
<div class="navi_inbox">
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="/tmb/index.php">온라인장터</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="/busan/index.php">링크부산</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="#">구인구직</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="#">포인트샵</a>
<span class="navi_sec">ㆍ</span><a class='navi_yellow' href="#" onclick="openLayer('layerPop',0,0)">추천정보1</a>
</div>
</div>
<div style='both:clear; line-height:3px;'> </div>
<!-- 탑링크 End -->
<!-- 레이어 메뉴 1 -->
<div id="layerBox">
<div id="layerPop">
<strong>추천정보1 목록</strong>
<ul>
<li>목록내용</li>
</ul>
<a class="close" href="#" onclick="closeLayer('layerPop')">창닫기</a>
</div>
</div>
예를 들면 아래 코드에서 처럼 <추천정보>를 클릭하면 제목글자 아래로
<추천정보 관련 하위 리스트>가 레이어로 열리도록 하고싶습니다.
그런데... 익스8 / 파이어폭스 어디에서도 레이어가 제목글 바로 아래에 열리지 않고
멀찍이 떨어져서 레이어가 펼쳐집니다.
익스플로러 8에는 openLayer(IdName, tpos, lpos)에서 위치값을 조정해서 맞추면 되지만
문제는 익스6, 익스8 그리고 파이어폭스에서 동일하게 출력이 안되는 문제가 있습니다.
코드를 가져와서 적용하다보니 크로스브라우징에서 문제가 많은데
코드를 전반적으로 수정해서라도 손을 봤으면 하는데 어떻게 해야할지 모르겠군요
한번 보시고 도움글좀 부탁드리겠습니다.
<style>
/* -- 탑링크 Start - */
#navi_box { width:100%; height:35px; text-align:center; padding:0;
background:#003399 url('/_common/img/navibox_bg.gif') repeat-x top left; }
#navi_box .navi_inbox { float:left; margin:10px 0px 0px 10px; padding:0; }
#navi_box .navi_sec { font:bold 11px dotum; color:#ccc; letter-spacing:-0.1em; }
a.navi_white:link, a.navi_white:active, a.navi_white:visited { font:bold 13px gulim,Tahoma; color:#fff; }
a.navi_white:hover { color:'#FFFF00'; text-decoration:underline; }
a.navi_yellow:link, a.navi_yellow:active, a.navi_yellow:visited { font:bold 13px gulim,Tahoma; color:#FFFF99; }
a.navi_yellow:hover { color:'#FFFF00'; text-decoration:underline; }
/* -- 레이어 메뉴 BOX - */
#layerBox { position:relative; }
#layerPop { width:150px; height:250px; padding:10px; position:absolute; display:none; border:5px solid #777; background:#fff; }
#layerPop .close { position:absolute; bottom:15px; right:10px; font:bold; color:red; }
</style>
<!-- 레이어 메뉴 SCRIPT -->
<script type="text/javascript">
<!--
function openLayer(IdName, tpos, lpos){
var pop = document.getElementById(IdName);
pop.style.display = "block";
pop.style.top = tpos + "px";
pop.style.left = lpos + "px";
}
function closeLayer(IdName){
var pop = document.getElementById(IdName);
pop.style.display = "none";
}
//-->
</script>
<div id="navi_box">
<div class="navi_inbox">
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="/tmb/index.php">온라인장터</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="/busan/index.php">링크부산</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="#">구인구직</a>
<span class="navi_sec">ㆍ</span><a class="navi_yellow" href="#">포인트샵</a>
<span class="navi_sec">ㆍ</span><a class='navi_yellow' href="#" onclick="openLayer('layerPop',0,0)">추천정보1</a>
</div>
</div>
<div style='both:clear; line-height:3px;'> </div>
<!-- 탑링크 End -->
<!-- 레이어 메뉴 1 -->
<div id="layerBox">
<div id="layerPop">
<strong>추천정보1 목록</strong>
<ul>
<li>목록내용</li>
</ul>
<a class="close" href="#" onclick="closeLayer('layerPop')">창닫기</a>
</div>
</div>
댓글 전체
DTD를 선언해주시고...
#layerBox { position:relative; left: 300px;}
레이어 박스 에 좌표값을 간단히 지정해 주시면 될거 같은데요.
#layerBox { position:relative; left: 300px;}
레이어 박스 에 좌표값을 간단히 지정해 주시면 될거 같은데요.
댓글 감사합니다. 현재 알려주신 방법은 파폭에서만 적용이 되는데..
dtd선언은 현재 그누보드 환경을 그대로 적용해서 사용중입니다.
혹 이것과 관련해서 별도의 dtd선언이 필요할런지요? (이 부분을 잘몰라서 ...)
그리고 코드를 수정해서라도 익스6,익스8,파폭에서 모두 동일하게 표시되길 원합니다.
dtd선언은 현재 그누보드 환경을 그대로 적용해서 사용중입니다.
혹 이것과 관련해서 별도의 dtd선언이 필요할런지요? (이 부분을 잘몰라서 ...)
그리고 코드를 수정해서라도 익스6,익스8,파폭에서 모두 동일하게 표시되길 원합니다.
에고 해결된 줄 알았는데...모두 실패네용..-_- ;; (댓글 자삭 했슴다~~).... 망할 크로스브라우징~ css가 넘 시러~