묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
초고수님에게 문의 드립니다
2005.05.13 18:58
홈의 메인테이블 우측에 슬라이드 배더를 붙였는데 풀 화면에서는 이상이 없는데, 화면을 축소화면 배너가 밀립니다.
메인테이블 밖에 슬라이드 배너를 붙이면 이상이 없고요.(그러면 홈을 전면적으로 수정작업이 수행되어 곤란)
타 홈에서도 이런 이유로 우측 슬라이드 배너는 메인 테이블 밖에 붙이나 봅니다.
아래는 소스 입니다. 고수님의 한수 부탁 드립니다.
참고로 홈은 www.ihtpc.com 입니다.
배너 4개 올려져 있습니다
<상단메뉴부>
-------------------------------------------------------------메인 페이지 시작
<table align="center" cellpadding="0" cellspacing="0" width="956">
<tr>
<td height="0">
</td>
</tr>
</table>
<!-- 상단 로고/메인메뉴 끝-->
<table width="956" cellspacing=0 cellpadding=0>
<tr><td valign="top" align="center" style="border-bottom:rgb(243,243,243) 4 solid;">
<div align="center">
<!-- 슬라이드배너 시작 -->
<DIV id="divMenu" style="width:120px; height:400px; position:absolute; top:118px; left:expression( (document.body.clientWidth/2)+352); z-index:1; visibility:visible;">
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=7' target=_new><img src='http://ihtpc.com/shop/img/banner/7.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=9' target=_new><img src='http://ihtpc.com/shop/img/banner/9.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=8' target=_new><img src='http://ihtpc.com/shop/img/banner/8.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=6' target=_new><img src='http://ihtpc.com/shop/img/banner/6.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<table cellpadding="0" cellspacing="0" width="120">
<tr>
<td>
<p><a href="#"><img src="http://ihtpc.com/shop/skin/default/img/top_bottom01.gif" border="0"></a></p>
</td>
<td>
<p><a href="#bottom"><img src="http://ihtpc.com/shop/skin/default/img/top_bottom02.gif" border="0"></a></p>
</td>
</tr>
</table>
</DIV>
<SCRIPT>
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
var isNS = navigator.appName == "Netscape";
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset+10;
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop)+10;
}
if(yMenuTo<118) yMenuTo = 118;
timeoutNextCheck = 500;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 10);
if (yMenuTo < yMenuFrom) yOffset = -yOffset;
if (isNS4) divMenu.top += yOffset;
else if (isDOM) divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + 118;
divMenu.visibility = "visible";
moveRightEdge();
}
else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 118;
divMenu.style.visibility = "visible";
moveRightEdge();
}
</SCRIPT>
<!-- 슬라이드배너 끝 -->
메인테이블 밖에 슬라이드 배너를 붙이면 이상이 없고요.(그러면 홈을 전면적으로 수정작업이 수행되어 곤란)
타 홈에서도 이런 이유로 우측 슬라이드 배너는 메인 테이블 밖에 붙이나 봅니다.
아래는 소스 입니다. 고수님의 한수 부탁 드립니다.
참고로 홈은 www.ihtpc.com 입니다.
배너 4개 올려져 있습니다
<상단메뉴부>
-------------------------------------------------------------메인 페이지 시작
<table align="center" cellpadding="0" cellspacing="0" width="956">
<tr>
<td height="0">
</td>
</tr>
</table>
<!-- 상단 로고/메인메뉴 끝-->
<table width="956" cellspacing=0 cellpadding=0>
<tr><td valign="top" align="center" style="border-bottom:rgb(243,243,243) 4 solid;">
<div align="center">
<!-- 슬라이드배너 시작 -->
<DIV id="divMenu" style="width:120px; height:400px; position:absolute; top:118px; left:expression( (document.body.clientWidth/2)+352); z-index:1; visibility:visible;">
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=7' target=_new><img src='http://ihtpc.com/shop/img/banner/7.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=9' target=_new><img src='http://ihtpc.com/shop/img/banner/9.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=8' target=_new><img src='http://ihtpc.com/shop/img/banner/8.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<!-- 배너 내용(반복) 부분 시작 -->
<a href='/?page=banner&banner_id=6' target=_new><img src='http://ihtpc.com/shop/img/banner/6.gif' width=120 border=0></a>
<!-- 배너 내용(반복) 부분 끝 -->
<table cellpadding="0" cellspacing="0" width="120">
<tr>
<td>
<p><a href="#"><img src="http://ihtpc.com/shop/skin/default/img/top_bottom01.gif" border="0"></a></p>
</td>
<td>
<p><a href="#bottom"><img src="http://ihtpc.com/shop/skin/default/img/top_bottom02.gif" border="0"></a></p>
</td>
</tr>
</table>
</DIV>
<SCRIPT>
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
var isNS = navigator.appName == "Netscape";
function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;
if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset+10;
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop)+10;
}
if(yMenuTo<118) yMenuTo = 118;
timeoutNextCheck = 500;
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 10);
if (yMenuTo < yMenuFrom) yOffset = -yOffset;
if (isNS4) divMenu.top += yOffset;
else if (isDOM) divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}
if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + 118;
divMenu.visibility = "visible";
moveRightEdge();
}
else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 118;
divMenu.style.visibility = "visible";
moveRightEdge();
}
</SCRIPT>
<!-- 슬라이드배너 끝 -->
댓글 4
-
프템장
2005.05.13 20:39
-
이현노
2005.05.13 21:19
레이어를 만들어 주려면 <Div>태그안에 position:absolute라는 스타일을 적용시켜야 형성되고, 위치는 top, left를 기준으로 잡을 수있는데..
"position:absolute 이 부분을 상대위치로 잡아주세요" 에 대하여 구체적으로 설명 부탁 드립니다.
예제, 설명글 있는 URL 알려 주심 더 감사하고요... -
프템장
2005.05.14 09:52
position:absolute 이 부분을 position:relative 인가요? (태그는 찾아보세요.)
하여간 상대위치로 잡으시고 뒤에 위치를 재조절해주시면 됩니다.
상대위치로 잡기 때문에 브라우저의 전체크기에서 위치를 제어하는게 아니라,
표안의 셀에서 위치가 조절되겠죠.
그러면 브라우저의 크기가 변해서 표가 일정부분 가려지더라도 해당 슬라이드 배너부분은 상대위치로 잡혀서 표현되기 때문에 문제가 없어진다는 말이었습니다. -
이현노
2005.05.14 19:45
position:relative; top:118px; left:400; z-index:1; visibility:visible; 로 수정하니 화면을 축소시 배너가 않밀리네요.
헌데 문제가 상단메뉴와 메인페이지 사이에 상당히 큰 공간이 생기고, top은 어떤 값을 주어도 고정이 되어 버리네요
IE이외의 부라우저에서는 오작동할겁니다. 지금도 오작동하지만... ^^''