HTML/자바스크립트

레이어로 해상도에 따라 바뀌는 배너(팝업)위치 고정하기

RYU™ 2011. 11. 12. 19:27
반응형



<td style="position:relative;">
        <a style="position:absolute;top:10px;right:20px;">...</a>
</td>


메인페이지 좌측 또는 우측에 또하나의 테이블을 띄울 수 있는 방법입니다.
말 그대로 한개의 페이지에 또다른 페이지를 띄우는거죠.

팝업을 예로들면..

일반 팝업의 경우 모니터 해상도에 따라 배너 위치가 다르지만 레이어를 사용하면 해상도가 달라도 위치가 변하지 않습니다. 방법은 메인페이지 테이블의 <td>부분에 레이어를 넣으면 됩니다.

레이어를 사용하면 해상도와 무관하게 원하는 위치에 배너나 팝업을 넣을 수 있습니다.
아래 그림과 같이 말이죠.(빨간색 부분)



테이블 레이어(빨간색 부분)

테이블 레이어(빨간색 부분)






적용예제
<table>...


         </td>
<td style='position:relative;'>
<div id='Layer1' style='text-align:left; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto; width:844px; height:500px; position:absolute; left:-350px; top:150px; z-index:3;'>
<table></table> //들어갈내용들(배너,팝업등)
</div>
         </td>


...</table>



레이어 속성은 시간날때 다시한번 정리하도록 하겠습니다.
전에 포스팅 했던건데 한참이 지나 다시 보니 역시 좀 어렵네요.;;
참고로 소셜커머스 쇼핑몰에서 우측배너를 추가로 만들 때 사용했습니다.^^

반응형