묻고답하기
xe_official_v2 레이아웃 수정중인데요 서브메뉴바 위치 ㅠㅠ
2013.01.26 04:51
서브메뉴바가 오른쪽으로되어있는데,
왼쪽으로 바꾸고 싶습니다. ㅠㅠ도저히 혼자서는 답이 나오지 않습니다.
다 고쳤는데 서브메뉴바만 못고치겠습니다 ㅠㅠ 어떻게 해야하나요...!
댓글 2
-
컴토피아
2013.01.26 05:21
-
Seowoooo
2013.01.26 06:14
댓글엔 긴글이 안되네요 ㅠㅠ 아래 답변에 질문드립니다 ㅠㅠ -
Seowoooo
2013.01.26 06:14
답변 감사합니다. 댓글은 긴글이 안되서 여기로 쓸게요
layout.css 파일에 있는데요
@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
/* 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 *{ margin:0; padding:0;}
#header .extension .section{ position:relative;}
#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 *{ margin:0; padding:0;}
#footer .extension .section{ position:relative;}
#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:100px;}
.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;}여기서 어떻게 변형시켜야되는지 모르겠습니다.
e1 e2 너무 여러가지로 분류되어있어서 잘 모르겠습니다 ㅠㅠ
-
Seowoooo
2013.01.26 06:15
layout.css파일 소스입니다 ㅠㅠ
흠....
우선 CSS에 대해서 알고계시나요.. 그럼 간단히 해결될 것 같아 보이는데..
CSS를 살짝 손보아서 content 와 옆의 바 lmb 간의 위치를 서로 바꾸어 주면 되는 문제입니다. xe_official_v2에서 css파일이 있으실 겁니다. 사용하시는 컬러의 css파일을 열으셔서 내려보시면 content 와 lnb의 CSS가 있습니다.
이를 서로 float:left / right 되어있는 걸 서로 위치를 바꾸어 주면 됩니다. lnb를 왼쪽으로 넘기고 content 를 오른쪽으로 수정하면 되겠지요~