웹마스터 팁

먼저 레이아웃 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 지정해 주면 같은 모양처럼 보이게 만들 수도 있겠지만은 여러번의 시도 끝에 위에 방법이 간단하고 편집하기도 훨씬 쉬워 보이네예.

제목 글쓴이 날짜
1.7.5에서 추가된 게시물당 최신댓글 불러오기 스킨에서 활용법 [2] file mAKEkr 2014.05.20
Draggable Captcha System for XE1.7.5 Member Module (QapTcha) [7] file 우진홈 2014.05.21
메뉴가 많을때 레이아웃 쉽게 변경하기 웹빌드ver2 2014.05.23
사용자정의에서 날짜형의 경우, 달력의 년수 선택범위를 늘리는 방법 sejin7940 2014.05.24
윈도에서 버츄얼박스 실행 시에 작업표시줄에 보이지 않게 하기 hyun 2014.05.26
유저가 자신의 회원정보 전체를 공개/비공개 설정하게 하는 방법 [2] sejin7940 2014.05.27
홈페이지에 접속한 장치의 너비 구하기 [3] CosignStudio 2014.05.28
게시판 comment 스타일 수정 웹빌드ver2 2014.05.30
[1초팁] Google Fonts의 폰트파일이 XE템플릿 문법으로 불러와지지 않을때 mAKEkr 2014.05.31
PHP에서 Socket.IO 서버로 요청 보내기 [3] 이즈야 2014.06.01
마이피플봇을 이용한 마이피플 알리미 (푸시서비스) 이용하기 [4] garnecia 2014.06.01
회원정보에서 '서명' 수정이 반영되지 않을 경우 Novelic 2014.06.03
에디터에서 나눔고딕 웹폰트, 기본글꼴로 적용하기(구글API이용) [6] file 애니즌 2014.06.06
XHTML 과 CSS 오류검사를 해주는 사이트 입니다. 디테일 2014.06.07
윈도우7/8에서네임서버 운영 POSTZI 2014.06.08
Google Public DNS 강제 Flush Cache 하기 AJKJ 2014.06.08
이거 어디다 올려야 될 지 몰라 여기다 올립니다. 프로그래머님들 읽어보세요. [2] 유샤인 2014.06.10
레이아웃에 배경이미지 업로드 하고 적용시키기 [1] 웹빌드ver2 2014.06.10
익명게시판에서 관리자가 글 수정시 글의 권한이 넘어가지 않도록 하기. [5] 소시덕분에힘받아요 2014.06.11
htm과 html의 차이는 ? 디테일 2014.06.17