웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
(허접 팁)레이어를 브라우저 크기에 상관없이 위치지정하기
2002.09.25 02:44
제목 글이 좀 이상한데.. 지송합니다.
제가 홈페이지 만들다가 느낀건데.. 생각해보면 좀 허접한 생각이지만...
아시는 분은 아시리라 생각합니다.
특히, 나모를 쓰다보면 레이어를 이용한 액션스크립트 레이어메뉴를 만들 수 있습니다.
거의 대부분의 홈페이지에 유용하게 쓰이는 것으로 알고 있습니다.
하지만, 그 메뉴 레이어의 단점은
홈페이지를 중앙정렬을 하면 hidden layer가 position=absolute 로 되어있어서..
그 레이어가 절대 위치에 놓이게 된다는 것입니다.
레이어는 그 크기가 상대적 크기는 조절은 가능하지만, 위치의 선정에서 중앙정렬이 불가능합니다.
그 예는 아래와 같습니다.
http://gene.nazon.net/cgi-bin/technote/maintitle.cgi
위 홈페이지는 중앙정렬을 하면 메뉴레이어가 위치에 안맞게 되므로 왼쪽 정렬을 한 것입니다.
이 홈페이지는 나모웹에디터의 액션태그를 써서 만든것입니다.
http://www.pdbox.co.kr/
상위메뉴레이어의 마우스오버에 따른 브라우저 크기에 상관없는
하위 히든레이어의 중앙정렬을 보여주는 홈페이지입니다. 하지만, 그 스크립트가 너무나 복잡하여 html이나 javascript를 잘 모르시는 분들은 수정해서 사용하기가 힘들지요..
하지만, 위 두가지의 예를 모두 보완하여 나모웹에디터의 액션태그를 이용하여 hiedden layer태그를
중앙정렬할 수 있습니다.
생각해보면 정말 허접한데.. 유용하게 쓰일 수 있을 것 같아 올립니다. 욕하지 마세요.. ^^ ;;
자바스크립트의 수정보다는 아래의 hidden layer menu의 간단한 수정으로 중앙정렬이 가능합니다.
레이어 가로 크기를 100%로 놓고 position 설정에서 위치를 지정해주면 되는 것이지요..
절대위치 지정은 minus 값도 되기 때문에 브라우저의 어떤 크기에서도 어느 위치라도 그 위치를 정확히 설정해줄수 있습니다.
<div id="layer1" style="width:100%; height:20px; position:absolute; left:0px; top:74px; z-index:1; visibility:hidden;">
<p align=center><font color="#FFFF99">인사말 / 하우스 사람들 / 시설 및 편의안내 / 오시는
방법 / 요금표</font></p>
</div>
허접하지만 읽어주셔서 감사합니다.
이 보다 더 좋은 방법이 있으면 알려주세요.. ^^ ;; 그럼 감솨~
아래 주소로 가시면 그 결과를 보실 수 있습니다.
화면 중앙 정렬 http://enzyme.nazzang.net/duri/a.htm
화면 왼쪽 정렬 http://enzyme.nazzang.net/cgi-bin/technote/maintitle.cgi
제가 홈페이지 만들다가 느낀건데.. 생각해보면 좀 허접한 생각이지만...
아시는 분은 아시리라 생각합니다.
특히, 나모를 쓰다보면 레이어를 이용한 액션스크립트 레이어메뉴를 만들 수 있습니다.
거의 대부분의 홈페이지에 유용하게 쓰이는 것으로 알고 있습니다.
하지만, 그 메뉴 레이어의 단점은
홈페이지를 중앙정렬을 하면 hidden layer가 position=absolute 로 되어있어서..
그 레이어가 절대 위치에 놓이게 된다는 것입니다.
레이어는 그 크기가 상대적 크기는 조절은 가능하지만, 위치의 선정에서 중앙정렬이 불가능합니다.
그 예는 아래와 같습니다.
http://gene.nazon.net/cgi-bin/technote/maintitle.cgi
위 홈페이지는 중앙정렬을 하면 메뉴레이어가 위치에 안맞게 되므로 왼쪽 정렬을 한 것입니다.
이 홈페이지는 나모웹에디터의 액션태그를 써서 만든것입니다.
http://www.pdbox.co.kr/
상위메뉴레이어의 마우스오버에 따른 브라우저 크기에 상관없는
하위 히든레이어의 중앙정렬을 보여주는 홈페이지입니다. 하지만, 그 스크립트가 너무나 복잡하여 html이나 javascript를 잘 모르시는 분들은 수정해서 사용하기가 힘들지요..
하지만, 위 두가지의 예를 모두 보완하여 나모웹에디터의 액션태그를 이용하여 hiedden layer태그를
중앙정렬할 수 있습니다.
생각해보면 정말 허접한데.. 유용하게 쓰일 수 있을 것 같아 올립니다. 욕하지 마세요.. ^^ ;;
자바스크립트의 수정보다는 아래의 hidden layer menu의 간단한 수정으로 중앙정렬이 가능합니다.
레이어 가로 크기를 100%로 놓고 position 설정에서 위치를 지정해주면 되는 것이지요..
절대위치 지정은 minus 값도 되기 때문에 브라우저의 어떤 크기에서도 어느 위치라도 그 위치를 정확히 설정해줄수 있습니다.
<div id="layer1" style="width:100%; height:20px; position:absolute; left:0px; top:74px; z-index:1; visibility:hidden;">
<p align=center><font color="#FFFF99">인사말 / 하우스 사람들 / 시설 및 편의안내 / 오시는
방법 / 요금표</font></p>
</div>
허접하지만 읽어주셔서 감사합니다.
이 보다 더 좋은 방법이 있으면 알려주세요.. ^^ ;; 그럼 감솨~
아래 주소로 가시면 그 결과를 보실 수 있습니다.
화면 중앙 정렬 http://enzyme.nazzang.net/duri/a.htm
화면 왼쪽 정렬 http://enzyme.nazzang.net/cgi-bin/technote/maintitle.cgi
댓글 6
-
아스라다
2002.09.25 11:12
아이프레임을 이용한 방법도 잇습니다. ^^ -
와삭이
2002.09.25 11:20
좋은 팁이네요 ^^ -
오영민
2002.09.26 01:59
허걱 제가 확인을 못하고 올렸네요.. 비슷한 내용인데.. ^^ ;; 중복인데 죄송합니다. -
Nytoner
2002.10.26 22:11
서브 메뉴를 표시할 부분에 레이어를 위치한 다음, 레이어의 위치 값을 삭제하는 방법도 있습니다..
(오영민 님이 말씀하신 팁과 같은 팁인거 같기도 한데, 오영민 님의 팁을 제대로 이해하지 못하겠네요;;) -
서정훈
2003.03.24 19:03
멋집니다.멋집니다.멋집니다. -
이은섭
2003.10.15 00:52
예~술이네요^^
굿~~~~ 아이뒤어
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자]- marquee태그 (글자 움직이기)-2 [5] | ZipShin | 2002.10.12 |
부모-자식 레이어의 활용(레이어 위치 고정) [8] | clo | 2002.10.12 |
[HTML 초보자]- marquee태그 (글자 움직이기)-1 [6] | ZipShin | 2002.10.11 |
프레임셋 응용 [8] | 심플리즘 | 2002.10.08 |
HTML의 4가지 요소 [2] | ZipShin | 2002.10.01 |
[HTML 초보자] 테이블 태그에 색상 넣기!! 퍼펙트2 [5] | ZipShin | 2002.10.01 |
HTML 이란? [5] | 조현원 | 2002.09.28 |
스크롤바를 이용하지 않고 페이지내에서 원하는 위치로 이동하기 [10] | 유지호 | 2002.09.28 |
CSS,HTML,DHTML 및 기타 최신레퍼런스를 구하는 방법 [2] | -크크크- | 2002.09.28 |
벅스에서 음악주소 얻어내기 총정리!!! [11] | 세DlCIZLOI너 | 2002.09.25 |
(허접 팁)레이어를 브라우저 크기에 상관없이 위치지정하기 [6] | 오영민 | 2002.09.25 |
테이블 크기 더 이상 안넘어가게 하기.. [12] | dEathrock | 2002.09.24 |
소스 보는 방법 몇가지 [13] | 태영이 | 2002.09.24 |
[HTML 초보자] 테이블 태그에 색상 넣기!! 퍼펙트1 [2] | ZipShin | 2002.09.19 |
[HTML 초보자] 테이블 태그의 rowspan [2] | ZipShin | 2002.09.17 |
최근게시물의 폰트크기와 링크색상 바꾸기. [5] | 매머드 | 2002.09.13 |
[HTML 초보자]- 테이블 태그(셀을 합치자..^^) [10] | ZipShin | 2002.09.11 |
레이어 고정법 [8] | bageup | 2002.09.11 |
Fieldset을 이용한 제몰 딸린 테이블~!!! [2] | 깻잎사랑=_=v | 2002.09.10 |
Fieldset을 이용한 iframe의 효과~! [6] | 깻잎사랑=_=v | 2002.09.09 |