웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게...
2004.06.03 10:27
메뉴만들때 보통 이렇게 하죠...
<div style="position:absolute; ~">
그런데 이경우 홈페이지가 좌측에 붙어있는경우에는 유용하지만
가운데나 오른쪽으로 정렬된 홈페이지에선 메뉴의 위치가 바뀌게 됩니다.
그럴경우엔 relative를 사용해야하는데....
<div style="position:relative; ~">
이경우엔 해당 레이어의 크기만큼 그 레이어의 태그가 있는 곳에 자리를 차지하게 됩니다.
이때는 메뉴레이어들을 전체적으로 하나의 레이어로 감싸준후 그레이어에 absolute속성을 부과하면 됩니다.
예)
<div style="position:absolute;">
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
</div>
[요약]
absolute는 자리를 차지하지는 않지만 가운데 혹은 오른쪽 정렬의 홈페이지에서는 브라우저 크기에따라 레이어의 위치가 바뀌고,
relative는 위에 언급한 위치가 바뀌지 않는대신, 자리를 차지합니다.
둘의 단점을 보완하는 방법이라 할수있겠습니다.
ps.
visibility:hidden; 옵션도 함께주면 좋습니다.
<div style="position:absolute;visibility:hidden;">
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
</div>
<div style="position:absolute; ~">
그런데 이경우 홈페이지가 좌측에 붙어있는경우에는 유용하지만
가운데나 오른쪽으로 정렬된 홈페이지에선 메뉴의 위치가 바뀌게 됩니다.
그럴경우엔 relative를 사용해야하는데....
<div style="position:relative; ~">
이경우엔 해당 레이어의 크기만큼 그 레이어의 태그가 있는 곳에 자리를 차지하게 됩니다.
이때는 메뉴레이어들을 전체적으로 하나의 레이어로 감싸준후 그레이어에 absolute속성을 부과하면 됩니다.
예)
<div style="position:absolute;">
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
</div>
[요약]
absolute는 자리를 차지하지는 않지만 가운데 혹은 오른쪽 정렬의 홈페이지에서는 브라우저 크기에따라 레이어의 위치가 바뀌고,
relative는 위에 언급한 위치가 바뀌지 않는대신, 자리를 차지합니다.
둘의 단점을 보완하는 방법이라 할수있겠습니다.
ps.
visibility:hidden; 옵션도 함께주면 좋습니다.
<div style="position:absolute;visibility:hidden;">
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
<div style="position:relative; ~">메뉴1</div>
</div>
제목 | 글쓴이 | 날짜 |
---|---|---|
동영상과 함께 자막 재생하기. [4] | 세강:D | 2004.08.16 |
도메인 포워딩 하기 [4] | 나준혁 | 2004.07.27 |
이미지에 필터만으로 그림자주기.. [15] | Simsim | 2004.07.07 |
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] | ☺심심 | 2004.06.06 |
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] | PHASE | 2004.06.03 |
처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] | 올리못™ | 2004.05.30 |
아이프레임 가로스크롤바 없애기 [3] | 백승창 | 2004.05.28 |
아기창 뜨고 부모창 닫기 [6] | 임소식 | 2004.05.19 |
플래시 swf파일 배경 투명하게 하기 ~~~ [8] | kim's | 2004.05.09 |
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] | ☺심심 | 2004.05.02 |
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] | kim's | 2004.04.29 |
[tip]간단한 반투명 필터 적용법 [2] | 드래군 | 2004.04.21 |
제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] | Danggn™ | 2004.04.17 |
(For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] | 쉬드 | 2004.04.10 |
모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] | 학몽 | 2004.03.09 |
스타일 시트파일을 만들기 .. [4] | 박종익 | 2004.03.07 |
간단하게, 색깔있는 밑줄 긋기. [4] | naughtykidd | 2004.02.27 |
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] | naughtykidd | 2004.02.26 |
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] | 01CODE.com | 2004.02.26 |
전송버튼의 테두리를 없애 BoA요 >_< [7] | 플로렐라 | 2004.02.14 |