웹마스터 팁

먼저 레이아웃 CSS에서

 /* Site Layout - Column Left */ <=기본스킨 그대로 두었읍니다.
#columnLeft { position:relative; width:201px; float:left;}
#columnLeft .mask { width:201px; height:5px; background:transparent; display:block; clear:both;}
#columnLeft .column { padding:4px 5px; position:relative; width:190px; margin:0 auto 0 auto;}

/* Site Layout - Column Right */ <=변경 합니다.
#columnRight { width:736px; float:right; padding: 10px 10px 40px 22px; background: #ffffff; overflow:hidden;}
#visualArea { width:736px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#columnRight .leftcontent { width:724px; float:left; overflow:hidden;}
#columnRight .rightcontent { position:relative; float:left; margin-top:0px; width:10px; z-index:50; right:0; top:40px; background:transparent;}


 Column Right부분을 둘로 나누어 줍니다.
그전에 본문부분을 padding으로 여백을 주어 졸졸이가 들어가도 어울리게 조정합니다.
제가 사용하는 졸졸이 이미지는 폭이 10px이하라 본문의 좌측에 10px, 우측에 22px(졸졸이가 다닐공간 포함)을 주어서 조정했읍니다.

다음 본문의 leftcontent에 본문 디자인을 해주고, rightcontent에 졸졸이 공간을 정해줍니다.


언자 , Layout에서

  <div>  <div id="columnLeft"> <=좌측메뉴가 있는 공간(아래 구문은 로그인과 메뉴 대신에 이미지와 위젯으로 내용만 바뀐 경우입니다.)
        <img src="http://lure79.com/image/tcon.jpg">
  <img src="./images/blank.gif" alt="" class="mask" />
  <div class="column">
  <iframe border="0" frameborder="0" framespacing="0" marginheight="0" marginwidth="0"  scrolling="no" src=/weather/index.html  width="170" height="220" bgcolor=#ffffff allowtransparency="true" align="center"></iframe></p>

  </div>
  </div>
  <div color=#2222ee> <= 여기에 약간의 변화가 있읍니다.
            <div class="leftcontent"> <=본문 부분
   <!-- 컨텐츠 시작 -->
            {$content}
   </div>
  
           <div class="rightcontent"> <=졸졸이 부분
       <img width="100%" height="100" src="http://lure79.com/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="alway_stalker" body="" skin="default" colorset="" widget_cache="0" addon_hold="0" addon_position="1" addon_basic="0" addon_width="980" addon_left="6" addon_top="40" addon_top_gap="40" addon_bottom="400" addon_scroll_speed="0" addon_scroll_move="10" addon_activate_speed="0" addon_textarea="" widget_sequence="10970" />
           </div>
  </div>

 </div>


적용된 페이지 예문 그림입니다.
적용 홈페이지는 관리자 전용이라 접근이 곤란 할 것입니다.
레이아웃 구성이 완료되면 전체게시판에 적용할 예정입니다. 한번 보시고 싶어한는 분들에게는 죄송합니다.

jj.jpg

아래 376번 게시물 ARTLAB님 팁을 참고하여 약간 변형 & 쫄쫄이 스토커 레이아웃에 붙이기 의 댓글에 있는 제글대로 하면 아래 그림처럼 적용됩니다(보드를 쪼그려트리고 우측에 비집고 들가기).

jjjj.jpg

둘의 차이는 배경색을 주었을때나 와이드모니터에서 엄청 큰 차이가 납니다.
위에 그림은 columnRight 배경색위에 본문과 졸졸이가 오는 경우이고
아래 그림은 별개로 노는 경우입니다. columnRight에는 게시판만 오게 되고 졸졸이는 우측에 새로운 column에 오게되는 경우이지예.
뭐, 정밀하게 색상과 PX 지정해 주면 같은 모양처럼 보이게 만들 수도 있겠지만은 여러번의 시도 끝에 위에 방법이 간단하고 편집하기도 훨씬 쉬워 보이네예.

제목 글쓴이 날짜
고도몰과 xe 회원 연동하는 키 포인트 410contents 2014.09.03
div 세로 중앙 정렬팁 Ansi™ 2014.09.01
socialXE 에서 로그인시 소셜로그인과 XE 로그인 동시 구현하기 file 큐우우 2014.08.31
XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기) 기톨닷컴 2014.08.30
카메론 플러그인 에드온이 컨텐츠(본문)을 가릴때 팁 file oscarmike 2014.08.30
Simplestrap css, js cdn에서 로드하기 [5] file Typhoon 2014.08.29
캡챠(captcha)가 안 뜰 때 Double'U' 2014.08.29
[업데이트] [Easy Tip] [XE 1.7] XE 코어 js, css파일 jsdelivr CDN사용하기 [13] file Typhoon 2014.08.28
XE를 앱으로, 티타늄 및 폰갭(Cordova) 사용기 [1] AJKJ 2014.08.28
관리자 게시판 목록에서 브라우저 제목 클릭시 새창으로 뜨도록 수정 [2] sejin7940 2014.08.26
애드온 개발중에 이상한 버그가 생길경우 [2] 銀童 2014.08.26
관리자페이지의 '서버정보출력'에 '절대경로' 가 출력되게 하는 방법 [3] sejin7940 2014.08.26
홈페이지 제작 시, 개인정보관련/회원가입약관 처리에 대해서 [1] 양파F 2014.08.23
CafeXE (homepage 모듈) 메뉴노출 권한오류 수정안. Xiso 2014.08.22
사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(2) [5] Reminisce 2014.08.22
게시판의 오늘 올라온 새글의 갯수를 알아내는 방법 [8] garnecia 2014.08.22
사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(1) [6] Reminisce 2014.08.22
스케치북 게시판 메뉴얼 [1] socialskyo 2014.08.21
jquery 이미지 이펙트 플러그인 Ansi™ 2014.08.19
게시판의 관리자가 최고관리자의 글을 지울 수 없도록 하기 [1] file BJ람보 2014.08.18