반응형
<td style="position:relative;">
<a style="position:absolute;top:10px;right:20px;">...</a>
</td>
<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>
</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>
레이어 속성은 시간날때 다시한번 정리하도록 하겠습니다.
전에 포스팅 했던건데 한참이 지나 다시 보니 역시 좀 어렵네요.;;
참고로 소셜커머스 쇼핑몰에서 우측배너를 추가로 만들 때 사용했습니다.^^
반응형
'HTML/자바스크립트' 카테고리의 다른 글
자동으로 페이지 이동(다른 페이지로 이동) 함수, 메타태그, 자바스크립트 (0) | 2011.12.08 |
---|---|
검색창에 이미지넣기 (0) | 2011.04.27 |
그림(이미지)에 마우스 오면 뜨는 작업 툴바 없애기 (0) | 2011.04.27 |
페이지 드래그 방지(무단카피 방지) (0) | 2011.04.27 |
URL 주소를 입력할때 "www" 유무 (0) | 2011.04.27 |