묻고답하기
나라디자인 CSS Navigation Bar 사용에 대한 문의 입니다.
2010.11.23 14:11
나라디자인 CSS Navigation Bar 사용에 대한 문의 입니다.
지금 기존의 레이아웃을 사용하지 않고
나라디자인 CSS Navigation Bar를 이용해 꾸며 보려하는데....문제가 발생했습니다.
레이아웃의 기본틀은
정찬명님의 메뉴얼을 통해 얻은 아래와 같은 레이아웃 뼈대로 꾸미고 있는데...
나라디자인 CSS Navigation Bar의
스크롤 메뉴가 로그인창은 물론 게시판이 들어가면 모든 것들의 뒤로 숨어버립니다.
레이아웃 스킨의 z-index 값을 조절하라는 답변이 있어
눈씻고 찾아봤으나 z-index 값 자체가 없어 당황 스럽네요.
밑으로는 수정하지 않은 정찬명님의 레이아웃 기본틀 소스 입니다.
잠깐 시간내어서 초보자에게 도움 좀 주시면 진심으로 감사드리겠습니다.^^------------------------------------------------------------------------------
layout.html
<div id="xe" class="fixed | liquid | hybrid | aLeft | aRight">
<div id="container" class="c | ce | ec | cee | ece | eec">
<div id="header">
<h1></h1>
<div class="extension"></div>
</div>
<div id="body">
<div id="content"></div>
<div class="extension e1"></div>
<div class="extension e2"></div>
</div>
<div id="footer">
<div class="extension"></div>
<address></address>
</div>
</div>
</div>
------------------------------------------------------------------------------
layout.css
@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) *//*
A CSS framework begins here. We don't recommend modifying framework. You can override these properties by defining the styles outside the framework.
여기서 부터 CSS 프레임웍 입니다. 프레임웍 수정을 권장하지 않습니다. 스킨을 변형할 때 프레임웍 밖에서 선언된 속성으로 덮어쓰기 할 수 있습니다.
*//* Layout */
#xe{ position:relative;}
#container{ position:relative;}
#header{ position:relative; clear:both; *zoom:1;}
#header:after{ content:""; display:block; clear:both;}
#body{ position:relative; clear:both; *zoom:1;}
#body:after{ content:""; display:block; clear:both;}
#content{ position:relative; text-align:justify; *zoom:1;}
#content:after{ content:""; display:block; clear:both;}
#footer{ position:relative; clear:both; *zoom:1;}
#footer:after{ content:""; display:block; clear:both;}
#footer address{ text-align:center;}/* Layout Width */
.fixed #container{ width:960px; margin-left:auto; margin-right:auto;}
.liquid #container{ width:80%; margin-left:auto; margin-right:auto;}
.hybrid #container{ width:80%; margin-left:auto; margin-right:auto;}/* Layout Align */
.aLeft #container{ margin-left:0;}
.aRight #container{ margin-right:0;}/* Header Extension */
#header .extension{ position:relative; *zoom:1;}
#header .extension:after{ content:""; display:block; clear:both;}
#header .extension ul{ position:relative;}
#header .extension li{ position:relative; display:inline; list-style:none;}/* Footer Extension */
#footer .extension{ position:relative; *zoom:1;}
#footer .extension:after{ content:""; display:block; clear:both;}
#footer .extension ul{ position:relative;}
#footer .extension li{ position:relative; display:inline; list-style:none;}/* Body Extension */
#body .extension{position:relative; *zoom:1; display:none;}
#body .extension:after{ content:""; display:block; clear:both;}
#body .extension .section{position:relative;}/* ----- Fixed 1 Column Layout ----- */
.fixed .c #body .e1{ display:block; margin-right:-30px;}
.fixed .c #body .e1 .section{ float:left; width:300px; margin-right:30px;}/* ----- Liquid 1 Column Layout ----- */
.liquid .c #body .e1{ display:block; margin-right:-3.4%;}
.liquid .c #body .e1 .section{ float:left; width:30%; margin-right:3.3%;}/* ----- Hybrid 1 Column Layout ----- */
.hybrid .c #body .e1{ display:block; margin-right:-30px;}
.hybrid .c #body .e1 .section{ float:left; width:240px; margin-right:30px;}/* ----- Fixed 2 Column Layout ----- */
.fixed .ce #body .e1,
.fixed .ec #body .e1{ width:220px;}
.fixed .ce #body #content,
.fixed .ec #body #content{ width:720px;}
.fixed .ce #body #content{ float:left;}
.fixed .ec #body #content{ float:right;}
.fixed .ce #body .e1,
.fixed .ec #body .e1{ display:block;}
.fixed .ce #body .e1{ float:right; clear:right;}
.fixed .ec #body .e1{ float:left; clear:left;}/* ----- Liquid 2 Column Layout ----- */
.liquid .ce #body .e1,
.liquid .ec #body .e1{ width:23%;}
.liquid .ce #body #content,
.liquid .ec #body #content{ width:75%;}
.liquid .ce #body #content{ float:left;}
.liquid .ec #body #content{ float:right;}
.liquid .ce #body .e1,
.liquid .ec #body .e1{ display:block;}
.liquid .ce #body .e1{ float:right; clear:right;}
.liquid .ec #body .e1{ float:left; clear:left;}/* ----- Hybrid 2 Column Layout ----- */
.hybrid .ce #body{ padding-right:280px;}
.hybrid .ec #body{ padding-left:280px;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ width:260px;}
.hybrid .ce #body #content,
.hybrid .ec #body #content{ width:100%;}
.hybrid .ce #body #content{ float:left;}
.hybrid .ec #body #content{ float:right;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ display:block;}
.hybrid .ce #body .e1{ float:right; clear:right; margin-left:-260px; right:-280px;}
.hybrid .ec #body .e1{ float:left; clear:left; margin-right:-260px; left:-280px;}/* ----- Fixed 3 Column Layout ----- */
.fixed .cee #body .e1,
.fixed .cee #body .e2,
.fixed .ece #body .e1,
.fixed .ece #body .e2,
.fixed .eec #body .e1,
.fixed .eec #body .e2{ display:block; width:200px;}.fixed .cee #body #content,
.fixed .ece #body #content,
.fixed .eec #body #content{ width:520px;}.fixed .cee #body #content{ float:left; margin-right:20px;}
.fixed .ece #body #content{ float:left; margin-right:-100%; left:220px;}
.fixed .eec #body #content{ float:right;}.fixed .ece #body .e1,
.fixed .eec #body .e1{ float:left; margin-right:20px;}.fixed .cee #body .e1,
.fixed .eec #body .e2{ float:left;}.fixed .cee #body .e2,
.fixed .ece #body .e2{ float:right;}/* ----- Liquid 3 Column Layout ----- */
.liquid .cee #body .e1,
.liquid .cee #body .e2,
.liquid .ece #body .e1,
.liquid .ece #body .e2,
.liquid .eec #body .e1,
.liquid .eec #body .e2{ display:block; width:20%;}.liquid .cee #body #content,
.liquid .ece #body #content,
.liquid .eec #body #content{ width:56%;}.liquid .cee #body #content{ float:left; margin-right:2%;}
.liquid .ece #body #content{ float:left; margin-right:-100%; left:22%;}
.liquid .eec #body #content{ float:right;}.liquid .ece #body .e1,
.liquid .eec #body .e1{ float:left; margin-right:2%;}.liquid .cee #body .e1,
.liquid .eec #body .e2{ float:left;}.liquid .cee #body .e2,
.liquid .ece #body .e2{ float:right;}/* ----- Hybrid 3 Column Layout ----- */
.hybrid .cee #body .e1,
.hybrid .cee #body .e2,
.hybrid .ece #body .e1,
.hybrid .ece #body .e2,
.hybrid .eec #body .e1,
.hybrid .eec #body .e2{ display:block; width:220px;}.hybrid .cee #body{ padding-right:480px;}
.hybrid .ece #body{ padding-left:240px; padding-right:240px;}
.hybrid .eec #body{ padding-left:480px;}.hybrid .cee #body #content,
.hybrid .ece #body #content,
.hybrid .eec #body #content{ width:100%;}.hybrid .cee #body #content,
.hybrid .ece #body #content{ float:left; margin-right:-100%;}
.hybrid .eec #body #content{ float:right;}.hybrid .ece #body .e1,
.hybrid .eec #body .e2{ float:left; left:-240px; margin-right:-220px;}
.hybrid .eec #body .e1{ float:left; left:-480px; margin-right:-220px;}.hybrid .cee #body .e1,
.hybrid .ece #body .e2{ float:right; left:240px; margin-left:-220px;}
.hybrid .cee #body .e2{ float:right; left:480px; margin-left:-220px;}/*
A CSS framework ends here. We don't recommend modifying framework. You can override these properties by defining the styles outside the framework.
여기까지 CSS 프레임웍 입니다. 프레임웍 수정을 권장하지 않습니다. 스킨을 변형할 때 프레임웍 밖에서 선언된 속성으로 덮어쓰기 할 수 있습니다.
*/
------------------------------------------------------------------------------
부탁드립니다.
댓글 1
-
ForHanbi
2010.11.23 14:33
-
drimilda
2010.11.23 14:38
관심 감사합니다. 말씀하신대로 하나 채택해서 위의 두 구문은 하고 있고요... 위의 뼈대 레이아웃 상단에 네비게이션 바를 사용하는데 스크롤 메뉴가 뒤로 숨어버립니다. ㅡㅡ;; -
drimilda
2010.11.23 14:39
제 질문에 문제가 있나보군요... 제가 영 생초보라 죄송해요... 위의 정찬명민의 레이아웃 파일과 css파일을 레이아웃으로 등록하고 그 레이아웃 편집창에 네비게션바를 불러와서 사용하려하거든요?? 이거 어떻게 말씀 드려야하지요?? 헐 -
ForHanbi
2010.11.23 14:41
z-index값을 #body{z-index:1;} #header{z-index:2;} 이렇게 한번 줘 보세요. 그래도 내려가면 에더부분 인덱스 값을 조금더 올리고요. -
drimilda
2010.11.23 15:37
아 감사드립니다.~~ 해결되었습니다. 정말 이거 참 힘드네요^^
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
4b4 | 게시판 모듈을 설치했는데 오류가 나요 [1] | 2012.12.06 by sejin7940 |
플라스틱 라디오 | 첨부파일 주소를 알수있는 방법이 있을까요? [2] | 2012.12.06 by 푸시아 |
KATZEST | 회원 정보 모듈에서 받은 정보를 프로필에 출력하고 싶습니다. [1] | 2012.12.06 by 푸시아 |
어렵다용 | 최고관리자만 볼 수 있게 하기 [2] | 2012.12.06 by 송동우 |
어렵다용 | 혹시회비장부 같은건 없나요 ㅠ | |
띵똥 | 크롬과 ie8에서 전혀 다르게 나옵니다.CSS에 문제가 있는거같은데 [1] | 2012.12.06 by 송동우 |
어렵다용 | 모바일에서 글 쓰기 | |
어렵다용 |
우측위젯이 메인아래로 내려가요
[3]
![]() | 2012.12.06 by 어렵다용 |
어렵다용 |
우측 위젯이 메인아래로 내려가요 재질문 ㅠ
[1]
![]() | 2012.12.06 by 송동우 |
witchtail | 쪽지함 페이지에서 쪽지 발송인의 프로필이미지를 표시하고 싶습니다. [2] | 2012.12.06 by 푸시아 |
good499 |
최근글로 갤러리만 뽑을시 이미지주위 여백이 생기는문제
![]() | |
파표 | contact us스킨수정 질문드립니다. [1] | 2012.12.05 by 푸시아 |
genosaid | 다국어 사용하면서 게시물 수정시 동시 저장 안되는 현상.. [4] | 2012.12.05 by genosaid |
어렵다용 | 부운영자 모듈에서 [1] | 2012.12.05 by 송동우 |
커피메이트 | XE 회원가입 메일인증 있을때 메일주소 잘못치면 수정방법 [2] | 2012.12.05 by 송동우 |
koreafeel | 예약하기 문의 [1] | 2012.12.05 by 파표 |
오락실주인 | 인기문서출력 위젯 | |
송창학800 | 로그인기능에 대해 질문드려영...ㅠㅅ ㅠ | |
진달래1 | 검색 오류 질문합니다. | |
가을이구나 | 댓글도 스크랩 할 수 있는 방법이 없는지요? |
<div id="xe" class="fixed | liquid | hybrid | aLeft | aRight">
<div id="container" class="c | ce | ec | cee | ece | eec">
의 | 표시는 그 중에 하나 택일해서 사용한다는 말이고요...
정확히 질문의 요지가 파악이 안됩니다.
CSS Navigation Bar 메뉴를 어디에서 사용하시는데 안된다는 말씀이신지