웹마스터 팁

  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가 갑자기 느려져서 확인해봤더니 [1] jy1664 2009.10.27
[수정] 최근 이미지 추출에 new 이미지 등이 나타나게 하기... [5] 비나무 2007.12.09
UCC솔루션에 대한 조사입니다~^^ [2] 내다 2009.01.08
하나의 게시물을 각각 다르게 보이도록 만드는 방법 [5] 얼터1.0 2009.10.24
호스팅 하시는 분들 서버사용량 줄이세요.. [8] ☆쫑 2008.09.19
제로보드XE 외부출석부 [1] file noirzo 2009.01.18
[초보] 본문 하단에 구글 애드센스 삽입방법 [2] BigSeong 2009.10.10
오늘 게시된 글은 날짜 대신 today 그림으로 대치 (왕초보용 초간단팁) file jsuimage 2009.10.21
방명록 스킨을 통한 글 작성시 임시저장 가능케 하기(수정) 라르게덴 2008.07.08
1.0.3 버전 이상부터 본문 내 이미지 자동 리사이징이 안되는 경우 [1] kirrie 2008.08.01
가입시 웹마스터에게 가입했다는 메일 보내기. [4] file dhseo 2008.06.02
DB 이전시 오류 해결,,,하하하하...끝네 해결 했음.... file Crazyhouse.cn 2009.10.16
레이아웃에서 배경이미지를 좌-아래에 넣을 경우 오스카 2009.10.10
www가 붙는 도메인과 그렇지 않은 도메인 하나로 처리하기 [8] 똑디 2008.01.18
첨부 파일 용량 문제 - 이것도 저것도 않될때 [4] file DeJavu346 2009.01.22
인터넷 익스플로러 vs 파이어 폭스 속도 차이 [3] Jiwoon Kim 2009.01.25
레이아웃에 위젯 넣을때 위젯 사이즈 조절 [4] mojo9 2008.11.07
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] file plruto 2008.02.07
최근게시물의 캐시파일을 일반문서에 불러들이기 [2] 고진감래 2009.10.09
제로보드의 아이콘을 내 맘대로 변경하기...(1) [3] file winter548 2009.03.23
태그 쓰기