웹마스터 팁
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>
제목 | 글쓴이 | 날짜 |
---|---|---|
아이프레임 가로스크롤바 없애기 [3] | 백승창 | 2004.05.28 |
처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] | 올리못™ | 2004.05.30 |
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] | PHASE | 2004.06.03 |
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] | ☺심심 | 2004.06.06 |
이미지에 필터만으로 그림자주기.. [15] | Simsim | 2004.07.07 |
도메인 포워딩 하기 [4] | 나준혁 | 2004.07.27 |
동영상과 함께 자막 재생하기. [4] | 세강:D | 2004.08.16 |
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] | 詩와언어™ | 2004.08.27 |
테이블 주위에 점선효과!!!~~(초간단팁!) [6] | 초라 | 2004.09.25 |
TabIndex를 이용하여 탭키 컨트롤하기 [5] | 손상모 | 2004.10.08 |
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] | Multi_Taeji | 2004.10.13 |
<button>태그를 아시나요? [6] | 그냥이렇게。 | 2004.10.13 |
타이틀 바에 움직이는 타이틀 넣기. [5] | 덜렁이 | 2004.10.16 |
스타일시트에서 링크포커스 없애기 [12] | keymove | 2004.10.26 |
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] | canelia | 2004.10.29 |
각 객체접근.. [2] | canelia | 2004.10.29 |
웹문서 검색을 대비한 헤더,푸터 나누기. [4] | 그럴까? | 2004.10.29 |
a링크를 이용 새창 띄우기 [10] | 토토루 | 2004.11.07 |
웹폰트사용에 대한 실체를 밝힌다!! [22] | Multi_Taeji | 2004.11.13 |
최근게시물의 폰트크기와 링크색상 바꾸는 방법 | LUFFY | 2004.11.20 |