묻고답하기
나라디자인 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
아 감사드립니다.~~ 해결되었습니다. 정말 이거 참 힘드네요^^
<div id="xe" class="fixed | liquid | hybrid | aLeft | aRight">
<div id="container" class="c | ce | ec | cee | ece | eec">
의 | 표시는 그 중에 하나 택일해서 사용한다는 말이고요...
정확히 질문의 요지가 파악이 안됩니다.
CSS Navigation Bar 메뉴를 어디에서 사용하시는데 안된다는 말씀이신지