웹마스터 팁

  2. Support
  3. 웹마스터 팁

왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기

2008.02.07 02:06

plruto

전에 질문/답변에 물어봤었는데 도움이 전혀 없더군요...
다른 초보분에게 조금이나마 도움이될까하고 올립니다.

01.JPG

이런 모습을 아래처럼 만드는 팁입니다.

05.JPG

이팁은 보드옆에 또 다른 내용이나 광고를 넣을수 있는 장점이 있읍니다. 물론 페이지모드에서두 마찬가지입니다.
하지만 왼쪽메뉴가 작아지기때문에 로그인창을 없애주던가 위에부분으로 옮겨야합니다.
여러 레이아웃으로 해결가능합니다.
기본 레이아웃에 default.css을 기초로 작업하였읍니다.
예는 왼쪽은 50px를 줄이고 오른쪽은 240px 크기의 박스입니다.
적당히 자기사이트에 맞추세요.
우선 layouts/xe_official/css 에서 작업할 css를 불러옵니다.

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

#lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;}
#lnb li { padding-bottom:4px; list-style:none; }
#lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #e8e8e8; ba

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

#lnb { border-top:1px solid #dddddd; padding:4px 5px; width:140px;}
#lnb li { padding-bottom:4px; list-style:none; }
#lnb li a { padding:6px 5px 6px 6px; width:120px; display:block; border:1px solid #e8e8e8; ba

이렇게 고쳐줍니다. 근데 아래처럼 완벽하지가 않네요.

02.JPG

이럴땐 53쪽과 76쪽을 고쳐주면됩니다.
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/default/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #dddddd;}
----------------------------------------------------------------------------------------------------
/* 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;}

아래처럼 고치면됩니다. 아니면 bgContentBody.gif 를 적당히 줄이면 됩니다.

/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; border-bottom:1px solid #dddddd;}
----------------------------------------------------------------------------------------------------
/* Site Layout - Column Right */
#columnRight { width:820px; float:left; overflow:hidden;}
#visualArea { width:820px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}

03.JPG

이렇게 바뀐것을 확인할수 있을 겁니다.
이제 오른쪽에 내용을 넣을수 있는 박스를 만들겠읍니다.

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

76쪽을 아래와같이 바꿔줍니다. 그리고 #mainright로 시작되는 문구를 아래처럼 넣어줍니다.
/* Site Layout - Column Right */
#columnRight { width:580px; float:left; overflow:hidden;}
#visualArea { width:580px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}

#mainright { position:relative; float:right; margin-top:0px; width:240px; background:#f7f7f7; border:1px solid #e7e7e7;}

이제는 레이아웃을 손볼차려입니다.
레이아웃 아래쪽을 보면 
            <!-- 컨텐츠 시작 -->
            {$content}
이라는 문구밑에 아래처럼 해줍니다

            <!-- 컨텐츠 시작 -->
            {$content}
</DIV>
<DIV id="mainright">

</DIV>
위젯으로 새로운 글이나 코멘트, 광고 등등을 만드신후
<DIV id="mainright"> 바로 아래 넣으면 됩니다.

            <!-- 컨텐츠 시작 -->
            {$content}
</DIV>
<DIV id="mainright">
<img width="100%" height="100" src="http://test.com/test/tg/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="newest_document" body="" skin="cozy_simple" colorset="red" widget_cache="0" title="Test Board.01" order_target="list_order" order_type="desc" list_count="" duration_new="" subject_cut_size="32" mid_list="b10001" widget_sequence="130" />
</DIV>
이런식으로 말이죠. 그럼 아래처럼 작업이 끝나게 됩니다.

05.JPG



7.JPG



저는 레이아웃을 여러개 만들어서 각각의 페이지나 보드에 적용해 쓰고 있읍니다.
06.JPG

잘 쓰시고 여러 좋은 팁이 나왔으면 좋겠읍니다. 
--------------------------------------------
제가 지금 두군데 각기 다른 호스팅 회사를 쓰고 있는데 한쪽은 0.2.9도 문제없이 잘 되는데
한쪽은 0.2.9는 안깔리고 0.2.8만 깔립니다... 거의 같은 환경인데.. 근데 안깔리는데는
php version이 5.2.5 더군요.. 그래서 안깔리나?  누구 아시는분?ㅎㅎ
----------------------------------------------------------------------------------
팁 잘쓰고 웬 질문?ㅋㅋ

전 이만..













, , , , 이 게시물을
If you have a
dream, give it a chance to happen. Dream as if you'll live forever. Live as
if you'll die today.
좋아요(+5)
목록
제목 글쓴이 날짜
xe core 설치 화면 오류 있습니다. 이렇게 바꿔주세요. [2] 한꼬마 2015.02.18
데이타 이전 시 xml 파일 임포트 속도 높이기 ^^ forest535 2015.02.17
snoop가 안될때 curl 로 가져오기 [3] 한꼬마 2015.02.13
300기가 Zboard4->XE 이전기 [14] file forest535 2015.02.13
카카오 API로 로그인창 만들어 봤어요~~ ^^ [6] file 컴박살 2015.02.12
회원가입후 24시간 이후 글작성 가능하기 [2] 샵사이드 2015.02.09
누리고 쇼핑몰 - 배송비가 표시 안되는 경우에 [7] garnecia 2015.01.31
템플릿등에서 PHP 제어 구조(if, for, foreach)의 대체 문법 적용 [3] 총모아 2015.01.30
xe 폰갭 제작시 admob 광고 글쓰기 방해 하지 않으려면 한꼬마 2015.01.26
부트스트랩 관련 버튼안에 체크박스 돼지코구뇽 2015.01.25
DB LOCK으로 인한 사이트 마비와 사례, 조치 [2] onTrust 2015.01.24
게시판에서 태그 기준으로 검색하면 임시저장글들도 노출되는 버그 수정 sejin7940 2015.01.23
사용자정의 중 전화번호 형식을 쓰는경우 - 사이에 한칸씩 여백이 생기는 걸 없애는방법 [1] sejin7940 2015.01.23
사용자 매뉴에 회원정보와 포인트설정 바로가기 기능 삽입 [1] file 간장게장같은남자 2015.01.23
익명게시판에서 임시저장된 글을 불러와 등록하면 익명처리되지 않고 글쓴이 정보가 기록되는 버그 수정 [1] sejin7940 2015.01.23
누리고 쇼핑몰 상품취소 혹은 반품시 마일리지 자동회복하기 [6] garnecia 2015.01.21
kin 모듈 게시물 -> board로 게시물 옮기기 편법 file 꾸링 2015.01.20
사이트 종합해서 접속자 아이피 검색 file StyleRoot 2015.01.19
웹서버 php에서 한글언어 깨지거나 오류날때 방법@ 뭘봐첨봐 2015.01.19
포인트 부족 시 글 열람 금지 설정해도, 글을 볼 수 있는 버그 수정 [1] sejin7940 2015.01.18
태그 쓰기