웹마스터 팁

메뉴만들때 보통 이렇게 하죠...

<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>
제목 글쓴이 날짜
[매크로] mac_0004 메뉴를 담은 표의 위치와 모양 바꿔치기 매크로 [1] 김병희 2003.06.16
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] 키드 2004.01.26
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
슬라이드 배너및 메뉴가 익스플러 창 조절시 좌표값 변할때 사용 하는 구문!! 천문길 2006.08.21
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - top) [3] 뽀因㉦ㅓо Ø Γ 2006.09.19
셀렉트박스 트리메뉴인데 참 이뻐요(링크타켓 - new/blank) [8] file 뽀因㉦ㅓо Ø Γ 2006.09.19
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
DHTM 을 이용한 마우스 오른쪽의 메뉴 만들기.. [11] 허진규 2001.03.30
링크된 텍스르 마우스 오버시 그림이 변한다.(메뉴로도..) [1] ▩윤미 2002.05.19
플래쉬 효과나는 신비 메뉴 - -? *수정+카피라이터~ [17] ▩윤미 2002.06.09
NZEO의 좌측 이동메뉴를 구현해 보자. (이동 On/Off 기능 포함) [43] steelheart 2002.08.20
자바스크립트로 클릭하면 출력되는 메뉴를 만들어 보자~!!! [6] 유지호 2002.09.20
엔지오같은 메뉴 만들기 #1 - 수정판 [6] Eccen 2002.11.05
[re] 엔지오같은 메뉴 만들기 #2 -> 레이어배치 팁! //ⓦⓞⓞⓡⓨ님참고 [3] Aracing™ 2003.01.10
엔지오같은 메뉴 만들기 #2 - Error 수정판 -_-;; [13] Eccen 2002.11.12
엔지오처럼 메뉴가 아래위로 움직이는 소스[steelheart님 만듬]. [10] 김태경 2002.11.23
이동 메뉴 (Netscape 가능 NZEO.com 소스) [9] 박영창 2002.12.08
오른쪽 클릭 메뉴 [6] 디아릭스 2002.12.16