묻고답하기

  2. Support
  3. 묻고답하기

레이아웃에서 좌측 메뉴 사이즈 줄이는 방법

2009.08.23 10:04

궁굼해서..

꾸벅. 부탁드립니다

 

아래 소스는 레이아웃 소스입니다. 여기서...  좌측메뉴 width를  201pxdptj  130으로 수정하는게 목표입니다

제가 해본것들 :  아래 소스중 빨간색 부분을 130으로 줄이고, content부분을 770에서 830으로 변경했습니다.

 

이래저래 수정을 해봐도 레이아웃이 틀어지더라구요.

그래서,,   

 

제가 수정을 어디어디를 더 해야하는지...  알려주시면 정말 감사하겠습니다.

맨 아래 레이아웃 전체 소스도 첩부했습니다.

 

* Site Layout - Column Left */
#columnLeft { position:relative; width:201px; float:left;}
#columnLeft .mask { width:201px; height:5px; background:#ffffff; display:block; clear:both;}

#lnbWrap {margin:0px 0 0 0; padding:0;}
#lnbWrap img {display: block;}
#lnbWrap .sub_title  { background:url(../images/default/lnb_bg_t.gif) no-repeat; height:46px; }
#lnbWrap .sub_title h1 { margin:0; padding:16px 0 0 20px; width:160px; font-weight:bold; font-family:Tahoma; font-size:13px; color:#545452; }
#lnb {padding:0 15px; width:170px; background:url(../images/default/lnb_bg.gif) repeat-y; font-size:.9em;}
#lnb li {list-style:none;}
#lnb li a {font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; position:relative; z-index:99; display:block;  padding:5px 10px 5px 15px; width:143px; border-bottom:1px solid #eeeeee; background:url(../images/default/smBul.gif) 5px 9px no-repeat; color:#333; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus {background-color:#fff; color:#6066F2;}
#lnb li.on a {background:#fff url(../images/default/smBulon.gif) 5px 9px no-repeat; color:#6066F2; font-weight:bold; letter-spacing:-1px;}
#lnb li.on a:hover,
#lnb li.on a:focus {color:#6066F2;}
#lnb li ul {display:block; position:relative; padding:0; width:170px;}
#lnb li.on ul {display:block;}
#lnb li ul li {position:relative; top:0;}
#lnb li ul li a {font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; width:136px; background:#F7F7F7 url(../images/default/submenulist.gif ) 12px 11px no-repeat !important; padding:5px 10px 5px 22px; color:#333 !important; font-weight:normal !important; letter-spacing:normal !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus {color:#6066F2 !important;}
#lnb li.on ul li.on a {color:#6066F2 !important; font-weight:bold !important;}

 

/* Site Layout - Column Right */
#columnRight { width:770px; float:right; overflow:hidden;}
#visualArea { width:770px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}


 

 

@charset "utf-8";
/*
NHN UIT Lab. WebStandardization Team (http://html.nhndesign.com/)
Jeong, Chan Myeong 070601~070630
*/

/* Default Skin - Start */
#selectLang { margin:0; padding:0; }
#gnb { margin:0; padding:0; }
#lnb { margin:0; padding:0; }
#lnb ul { margin:0; padding:0; }

/* Site Layout - Body Wrap */
* {margin:0; padding:0;}
body {background:#fff;}
#bodyWrap {position:relative; width:980px; margin:0 auto; padding:0; border:0; }

/* 메뉴바 */
#header {position:relative; width:980px; height:135px; background:url(../images/default/bgHeader.gif) repeat-x center bottom; margin-bottom:10px; z-index:99;}
#header .menuz {position:relative; height:135px; background:url(../images/default/menuz.gif) 0 100% no-repeat; }
#header .menuy {position:relative; height:135px; background:url(../images/default/menuy.gif) 100% 100% no-repeat; }


/* 상단메뉴 */
#language { position:absolute; border-top:2px solid #DEDEDE; top:0px; right:0; height:20px; overflow:hidden; white-space:nowrap; padding-right:60px; }
#language li { float:left; list-style:none; background:url(../images/default/bgGnbVr2.gif) no-repeat right center; padding-left:2px; position:relative; left:0px; white-space:nowrap;}
#language li a { display:block; float:left; padding:4px 6px 0px 6px; height:18px; color:#61646E; white-space:nowrap; text-decoration:none; font:12px tahoma;}
#language li a:hover,
#language li a:focus { color:#61646E; text-decoration:underline;}

/* 더보기 위치 */
#ejqhrl {position:absolute; width:100px; height:100%; white-space:nowrap; top:6px; right:0px;}
#ejqhrl a {color:#61646E; float:right; text-decoration:none; font:12px tahoma;}

/* 공지 자리 */
#gongzi {position:absolute; top:107px; right:8px; width:229px; height:26px; overflow:hidden; white-space:nowrap; background:url(../images/default/gongg.gif) no-repeat;}
#gongzi li { float:left; list-style:none; background:url(../images/default/bgGnbVr3.gif) no-repeat left center; position:relative; left:-2px; white-space:nowrap;}
#gongzi li a { display:block; float:left; padding:6px 8px 0 8px; height:18px; color:#61646E; white-space:nowrap; text-decoration:none; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#gongzi li a:hover,
#gongzi li a:focus { color:#61646E; text-decoration:underline;}

/* 2차 메뉴 */
#gnb {position:absolute; top:66px; left:0px; height:36px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li {background:url(../images/default/bgGnbn.gif) 100% 100% no-repeat; display:inline; list-style:none; float:left; position:relative; left:0px; white-space:nowrap;}
#gnb li a {display:block; float:left; padding:13px 15px 0px 15px; height:19px;  white-space:nowrap; text-decoration:none; color:#676767; padding-bottom:0px;  letter-spacing:-1px; }
#gnb li a:hover,
#gnb li a:focus {color:#444;}
#gnb li.on { background:url(../images/default/bgGnbOn.gif) 100% 100% no-repeat;}
#gnb li.on a {font-weight:bold; color:#fff; padding-bottom:4px; background:url(../images/default/bgGnbOn2.gif) 0 100% no-repeat; letter-spacing:-0px;}
#gnb li.on a:hover {font-weight:bold; color:#fff; }

#gnb2 {position:absolute; top:105px; left:0px; height:20px; padding:0 10px; white-space:nowrap; }
#gnb2 li { float:left; list-style:none; background:url(../images/default/bgGnb2Vr.gif) no-repeat left center; padding-bottom:0px; position:relative; left:1px; white-space:nowrap;}
#gnb2 li a {display:block; float:left; padding:7px 8px 0px 8px; height:17px; color:#fff; font-size:12px; white-space:nowrap; text-decoration:none; font:12px  Dotum, Gulim, AppleGothic, Sans-serif; letter-spacing:-1px;}
#gnb2 li a:hover,
#gnb2 li a:focus {color:#fff;}
#gnb2 li.on {background:url(../images/default/bgGnbn4.gif) 100% 100% no-repeat;}
#gnb2 li.on a {font-weight:bold; color:#fff;  background:url(../images/default/bgGnbn3.gif) 0 100% no-repeat; letter-spacing:-1px;}
#gnb2 li.on a:hover {font-weight:bold; color:#fff;}

#isSearch { position:absolute; top:74px; right:10px; width:250px; text-align:right;}
#isSearch .searchOrder { display:none;}
#isSearch .checked { position:absolute; left:0; top:0; text-align:left; display:block; padding:5px 0 0 5px; width:64px; height:14px; background:url(../images/default/bgSearchTerm.gif) no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#ffffff; line-height:normal;}
*:first-child+html #isSearch .checked { top:1px; }
#isSearch .inputText { vertical-align:middle; position:relative; top:0; _top:-1px; left:1px; padding:3px 3px 2px 3px; width:175px; height:13px; color:#666; border:1px solid #9FACDB; background-color:#fff; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { border:1px solid #9FACDB; background-color:#fff; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}

/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; /*background:url(../images/default/bgContentBody.gif) repeat-y left top; */ }

/* Site Layout - Column Left */
#columnLeft { position:relative; width:201px; float:left;}
#columnLeft .mask { width:201px; height:5px; background:#ffffff; display:block; clear:both;}

#lnbWrap {margin:0px 0 0 0; padding:0;}
#lnbWrap img {display: block;}
#lnbWrap .sub_title  { background:url(../images/default/lnb_bg_t.gif) no-repeat; height:46px; }
#lnbWrap .sub_title h1 { margin:0; padding:16px 0 0 20px; width:160px; font-weight:bold; font-family:Tahoma; font-size:13px; color:#545452; }
#lnb {padding:0 15px; width:170px; background:url(../images/default/lnb_bg.gif) repeat-y; font-size:.9em;}
#lnb li {list-style:none;}
#lnb li a {font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; position:relative; z-index:99; display:block;  padding:5px 10px 5px 15px; width:143px; border-bottom:1px solid #eeeeee; background:url(../images/default/smBul.gif) 5px 9px no-repeat; color:#333; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus {background-color:#fff; color:#6066F2;}
#lnb li.on a {background:#fff url(../images/default/smBulon.gif) 5px 9px no-repeat; color:#6066F2; font-weight:bold; letter-spacing:-1px;}
#lnb li.on a:hover,
#lnb li.on a:focus {color:#6066F2;}
#lnb li ul {display:block; position:relative; padding:0; width:170px;}
#lnb li.on ul {display:block;}
#lnb li ul li {position:relative; top:0;}
#lnb li ul li a {font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; width:136px; background:#F7F7F7 url(../images/default/submenulist.gif ) 12px 11px no-repeat !important; padding:5px 10px 5px 22px; color:#333 !important; font-weight:normal !important; letter-spacing:normal !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus {color:#6066F2 !important;}
#lnb li.on ul li.on a {color:#6066F2 !important; font-weight:bold !important;}

/* Site Layout - Column Right */
#columnRight { width:770px; float:right; overflow:hidden;}
#visualArea { width:770px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}

/* Site Layout - Footer */
#footer { margin:0; padding:0; height:25px; background-color:#FAFAFA; border-top:2px solid #636870; border-bottom:1px solid #EBEBEB; text-align:center; padding:7px 0 0px; clear:both;}
#footer li { display:inline; padding:0 .6em 0 1em; background:url(../images/default/vrType1.gif) no-repeat left center;}
#footer li a { text-decoration:none; color:#636870; font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#footercoolla {color:#888; font:10px tahoma; font-weight:bold; height:20px; border-bottom:1px solid #EBEBEB; text-align:center; padding:7px 0 0px;}
#footercoolla a {font:10px tahoma; font-weight:bold; text-decoration:none; color:#6066F2;}
/* Default Skin - End */


/*더보기 메뉴*/
#svcmore {position:absolute;  white-space:nowrap; *width:70px; width:90px; top:15px; right:0px; z-index:100; background:#FFFFFF;border:1px solid #B8B8B8; font-weight:normal}
#svcmore li { float:left; list-style:none; background:url(../images/default/bulletD0.gif) no-repeat left center; width:100%; padding-left:2px; overflow:hidden; position:relative; left:5px; white-space:nowrap;}
#svcmore li a { display:block; float:left; padding:4px 6px 0px 6px; height:18px; color:#61646E; white-space:nowrap; text-decoration:none; font:12px tahoma;}
#svcmore li a:hover,
#svcmore li a:focus { color:#61646E; text-decoration:underline;}


이 게시물을
수정 삭제
좋아요
목록
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
복고열전 어느순간부터 작성글보기가 2개씩 뜨네요 ㅠㅠ file  
복고열전 xe 공식홈피에 레이아웃은 포인트를 어떻게 보는방법이 없나요??ㅠㅠ  
phocana 초보입니다. 레이아웃 만들기 질문이에요. [3] 2009.08.24 by phocana
궁중요리전문가 첨부파일명 대신 일괄적인 이름(예:다운로드)으로 변경하기.  
위키 위키 계층보기에 목록이 안나와요 [2] 2009.08.24 by 구름은 흘러가고
왕초짜 엑소버드(음악플레이어)를 상단 아닌 하단에 위치시키고 싶은데요 [2] 2009.08.24 by 왕초짜
phpize XE는 왜 SSL 환경에 유연하지 못할까요.... [1] 2009.08.24 by 백성찬
bebe 자료실 게시판 첨부 파일용량 문의입니다. [1] 2009.08.24 by 백성찬
린스레인 기존 만들어진 스킨에서 스크롤바 수정방법  
하이그림 도와주세요~ Fatal error: Call to undefined function: setmodule() 에러라고 뜹니다 [3] file 2009.08.23 by 하이그림
제이호 DB백업, 도와주세요!~~~~(스샷첨부) [1] file 2009.08.23 by Habile
pjk xe홈페이지 최근글 출력 위젯에 대하여 file  
우냠냠 로그인 풀림현상에대해서..  
우냠냠 글씨크기 조절은 어떻게하나요?? [4] 2009.08.23 by 우냠냠
룰루룽 파일첨부 오류 해결좀 부탁드립니다..100%에서 사라짐 [2] 2009.08.23 by 러빈
송지하 v2 공식 레이아웃 편집시.. [1] 2009.08.23 by 일인자
궁굼해서.. 레이아웃에서 좌측 메뉴 사이즈 줄이는 방법 [4] 2009.08.23 by 일인자
일인자 그룹이미지를 출력시키고 싶습니다.  
임성욱706 로긴창 정렬과 최근이미지 질문. [2] file 2009.08.23 by 뮤직맨
최기태 이미지 링크 클릭시 테두리 안생기게 하는 방법요 [2] 2009.08.28 by 최기태
최준규 초보입니다. 답변부탁드려요 ㅠㅠ 레이아웃생성만되고 편집이안되요  
혼돈의별 대용량 첨부파일 php.ini 수정후 관리자모드 수정한상태에서 첨부파일 100%에서 사라짐현상 [2] file 2009.08.23 by 러빈
최기태 v2 레이아웃적용 게시판 상단에 로그인 사용시 로그인 풀림 문제  
채리네 <극초보의 질문>게시판의 폰트사이즈는 어디서 조정하나요? [3] file 2009.08.23 by 백성찬
지식창고★ 웹툰 이런 비슷한 형태 어떡해 만드나요?  
지식창고★ 갤러리 가 이상하게 나와요^^ [2] file 2009.08.23 by 지식창고★
pdx 아이콘이 엑박 뜰때가..  
왕초짜 게시판 줄 간격(높이) 조정하는 방법 좀 알려주세요 [4] 2009.08.23 by 왕초짜
알려주세용 제로님 배너 사이즈 줄이는 방법  
미녀코코 svn 저장소 변경 방법 좀 알려주세요 [6] 2009.08.23 by 미녀코코
태그 쓰기