묻고답하기

  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 남기남
시라이 카운터 애드온을 켜면 댓글 달린 게시물이 깨집니다.  
vassily 임시도메인에서 XE설치후 [2] 2010.05.12 by 박문호756
ㅊㅊㅋ 이거 뭐라고 적혀 있느건가요?  
김사과 [초보] 메뉴가 안보여요 [2] 2010.05.12 by 김사과
녹색고양이 게시판 EX 기본 스킨, 탭페이지+겔러리 지정시 왼쪽 메뉴 없어지는 현상 file  
하나둘셋p 게시판 새글 작성시 기본으로 댓글1개가 달리는것  
crecendo 관리자 로그인시 unexpected error occured  
주하니 콘텐츠 위젯 갤러리에서 썸네일(태그) 깨짐문제 [1] file 2010.05.12 by crecendo
똑똑한여자 관리자모드가 안들어가집니다ㅡㅡ file  
purunbada 레이아웃 스킨과 html로 레이아웃 만들어서 링크하는거랑 차이점이 뭔가요? [1] 2010.05.12 by 현원
이름이름 개인인타넷방송에 관하여... file  
ZAUZA http://www.xpressengine.com 과 동일하게 첫페이지를 만들려고 합니다.  
김시기 뉴스티커 로그인 후 정상 동작 ! 로그아웃 후 멈춤 ?  
육백 회원가입시 두개의 테이블로 뿌려주기  
클라티에 xe다운받고서 fpt업로드 했는데 관리자모드 안들어가지네요.ㅠㅠ [1] 2010.05.12 by 별따기
김사과 관리자모드화면이 이상해요, 메뉴설정이 안돼요 [1] file 2010.05.12 by 앙띠2
beatnot www. 을 붙이면 접속이 안돼요 ㅜㅜ [1] 2010.05.13 by 앙띠2
육백 XE의 회원정보를 저장하고 불러오는 명령이있는곳? [1] 2010.05.13 by 앙띠2
무비클립 shopXE 에러 문의 드립니다 [1] 2010.05.13 by 영록
초코우유 XE의 스마트폰 기능 작동중... 글 내용이 보이지 않습니다. file  
H754 카테고리 옆에 나타나는 괄호와 숫자 없애는 법  
후무　 레이아웃/웹폰트 짤림현상;;ㅠ [1] 2010.05.13 by 현원
김신열 xe_official_v2의 상단 로그인을 제가만든 홈페이지에도 넣고 싶어요~  
H754 게시물 작성시 기본 내용 보여주기 [1] 2010.05.13 by 땡땡이별나라
최영석222 이 위젯은? [1] file 2010.05.13 by 땡땡이별나라
박성훈662 인기문서 출력 위젯에서 제목 길이를 조절하면 "..." 이 나오는데 삭제하는 방법좀...  
이학희173 xe통합버젼이 있었는데 없어졌네요?  
구가 게시판 하단 검색부분 폰트가 바뀌질 않습니다 [2] 2010.05.13 by 구가
최문식128 제로보드 설치 설정 문제 [4] file 2010.05.13 by 현원
교자 게시판글삭제시...  
태그 쓰기