웹마스터 팁

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

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 더군요.. 그래서 안깔리나?  누구 아시는분?ㅎㅎ
----------------------------------------------------------------------------------
팁 잘쓰고 웬 질문?ㅋㅋ

전 이만..













제목 글쓴이 날짜
서브 메뉴를 항상 펼쳐있도록... [2] :맥노턴 2008.01.01
file 업로드 않될때, 메뉴생성및수정이 않될때 [2] plruto 2008.01.31
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] file plruto 2008.02.07
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] 우야노 2008.05.03
2차메뉴 롤오버 위치 변환.. [3] 봄처녀 2008.06.05
1차 메뉴에서 하위 메뉴 없을때 생기는 여백 없애는 방법 [7] 제로시오 2008.07.04
메뉴에 이미지 버튼 사용하기 팁이요~ 이미지첨부! [3] file Zzini.net 2008.07.05
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02
문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 [7] 제베 2008.08.31
메뉴 모듈 기능 조금 추가 [23] [1] file 반도체맨 2008.09.29
상단메뉴 레이어메뉴 위치 디테일하게 조정하기 [1] file HomeBox™ 2008.10.10
[초간단]회원팝업메뉴에 메뉴넣기 [1] Pw-NET 2008.11.30
제로보드 DTREE 메뉴 적용하기 ( 카테고리 선택기 흉내 냈습니다.) [5] file 조성우371 2009.01.17
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] 만쓰별(정만) 2009.01.24
Smarty 한글 메뉴얼 공개합니다. [1] 미니미 2009.03.04
페이지 및 게시판 메뉴 경로 [2] file 자반튀김 2009.04.15
관리자모드에서 메뉴 항상 펼치기 [1] file 아드레날린 2009.06.09
게시판 메뉴에 새글 알림 표시 띄우기 [13] file 보거스내친구 2009.06.21
회원 팝업메뉴에서 작성글 클릭시 다른 아이디 검색 안되게 하기 [3] 절망린 2009.07.03
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기 [5] file 엔시아- 2009.07.16