웹마스터 팁

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

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

전 이만..













제목 글쓴이 날짜
제로보드 DTREE 메뉴 적용하기 ( 카테고리 선택기 흉내 냈습니다.) [5] file 조성우371 2009.01.17
[초간단]회원팝업메뉴에 메뉴넣기 [1] Pw-NET 2008.11.30
상단메뉴 레이어메뉴 위치 디테일하게 조정하기 [1] file HomeBox™ 2008.10.10
메뉴 모듈 기능 조금 추가 [23] [1] file 반도체맨 2008.09.29
문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 [7] 제베 2008.08.31
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] file Gnee 2008.08.02
메뉴에 이미지 버튼 사용하기 팁이요~ 이미지첨부! [3] file Zzini.net 2008.07.05
1차 메뉴에서 하위 메뉴 없을때 생기는 여백 없애는 방법 [7] 제로시오 2008.07.04
2차메뉴 롤오버 위치 변환.. [3] 봄처녀 2008.06.05
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] 우야노 2008.05.03
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] file plruto 2008.02.07
file 업로드 않될때, 메뉴생성및수정이 않될때 [2] plruto 2008.01.31
서브 메뉴를 항상 펼쳐있도록... [2] :맥노턴 2008.01.01
top 메뉴를 만들어보자 - layout에서 topmenu 항목만들기 [6] file SensePlus1 2007.12.11
메뉴에 이미지버튼 사용하기 [11] 정낙훈(xynex) 2007.11.29
MSN로그인 상태를 홈피좌측 메뉴에 삽입하는 방법 [9] 팔공산 2007.11.27
"이 게시물을..." 추천/비추천/신고 메뉴를 버튼으로 [28] file xe촙5 2007.11.08
메뉴에 마우스 갖다대면 뜨는 메뉴 만드는 방법 [25] 소마세월 2007.11.07
메뉴에 "회원 정보 보기" 걸기. [4] font 2007.11.03
메뉴에 플래시 적용하기 [7] file 지허 2007.10.23