본문 바로가기

지음빌더, 페이지 좌우 영역 폭 조절하기



지음빌더의 서브페이지는 이런 형태입니다. 위에 탑메뉴 영역이 있고 좌우로 문서와 서브메뉴 영역이 있습니다.


문서 영역, 혹은 서브메뉴 영역에 애드센스 배너를 달고자 하는데 폭이 안 맞을 때가 있습니다. 왼쪽 본문 영역에 728p x 90 사이즈의 배너를 달면 여백이 많이 생기는데 성격상 선에 딱 맞는 걸 좋아하는 사용자는 문서 폭을 조절 할 수 있습니다.


각 레이어 스킨(zm.layout/스킨이름)에 보면 style.css가 있습니다.

/* head.skin */

#wrapper { width:1000px; margin:0 auto; padding:5px 0 0 0; }

aside { width:250px; float:right; }

section { width:730px; float:left; }

파일을 열면 상단에 아래와 같은 CSS 코드가 있습니다.

/* head.skin */

#wrapper { width:1000px; margin:0 auto; padding:5px 0 0 0; }

aside { width:200px; float:right; }

section { width:798px; float:left; }

이걸 박스 안의 예시처럼 바꾸면 애드센스 배너 크기와 맞습니다. aside의 width는 우측 서브메뉴 영역 폭, section의 width는 문서 본문 영역의 폭입니다.

이렇게 수정하면 본문 영역과 서브메뉴 사이에 여백이 생기게 되는데 이것도 싫다 하시는 분은 topmenu 스킨을 하나 더 만드셔서 현재 1000px로 되어 있는 폭을 여백 만큼 줄이면 됩니다.


  • 다시 문의드리네요 ㅎ 열심히 홈페이지 구축중인데 뜻하지 않은 문제가 생겼습니다. zm.gallery 스킨이 말썽인데 기본 3개의 사진이 가로로 출력이 될 수 있도록 설정이 되어있는데

    막상 사진을 3개를 등록하면 가로줄3개로 출력이 되는데 아니라 1개의 이미지가 줄바뀜이 되어버리네요. 스킨 자체 설정에서 개당 이미지의 썸네일 크기를 줄여보아도 동일한데 스킨 에서 어떤 부분을 건드려야할지 감이 잡히지 않아 문의드려봅니다 :)

    좋은 하루되시길 바랍니다.

    • 아마도 배포된 갤러리 스킨의 썸네일 크기가 240*140일 거 같아요.
      가로 3개일 때 폭이 맞습니다.
      게시판 관리자 페이지에서 가로 이미지수가 3개로 되어 있는지 확인이 필요합니다.
      1px 단위로 딱 맞춘거라 간혹 브라우저 마다 폭이 안 맞을 수도 있는데요 한 줄에 1개씩 출력 된다면 div가 왼쪽 정렬이 아닐 수도 있겠네요.

      갤러리 스킨 style.css 파일에 보시면 윗쪽에 .image_list { ... }가 보입니다. float:left; 속성이 있는지요. 이미지의 크기보다는 여기서 div의 폭이 일단은 정렬하는데 더 중요하다고 볼 수 있습니다. div가 왼쪽으로부터 하나씩 출력 되다 폭이 다 되면 다음 줄로 밀려나는 방식입니다.

      혹은 list.skin.php 98번 라인에서
      //-- 지정한 가로 개수만큼 출력 됨
      if(!($list_col_cnt % $board[bo_gallery_cols])) echo "<div style='clear:both;'></div>";
      이 부분을 제거 하시거나 $board[bo_gallery_cols] 대신 숫자 3으로 바꿔 보시기 바랍니다.


  • 지적해주신대로 수정을 해봤는데도 3개중의 1개의 이미지가 다음열로 이동이 되어버리네요..
    말씀주신것처럼 240*140 이 맞고 게시판 변수 설정에도 3개가 가로출력이 되도록 되어있는데
    맥OS환경 safari6, crom 에서도 동일하고 윈도우7 64bit ie10 환경에서도 동일하고 이건 제가 설정을 잘못건드린건지 ㅠㅠ 거참. 혹시 직접 테스트 했을 때 갤러리 3개가 정상적으로 출력이 되셨나요? 번번히 번거롭게 해드려 죄송합니다.

    • 1px 차이로도 레이어가 밀릴 수가 있는데요 아마 해상도 영향도 있을 거 같아요.
      저도 브라우저 5개 크로스 브라우징 맞춰서 작업을 하고 있습니다.
      style.css 파일에서 .image_list { float:left; width:240px; height:220px; list-style-type:none; margin:2px; padding:5px; } 바깥 여백과 안쪽 여백이 있는데 padding을 5에서 하나씩 줄여보시겠어요? ^^;;;
      3번째 레이어마다 오른쪽 여백을 없애는 방법이 있는 데 그건 설명이 복잡해서 혹 실수라도 있을까봐 일단 여백을 조금씩 줄여보시면 어떨까 싶어요.
      폭을 240 에서 235정도로 줄여도 되는데 이럴 때는 .image_list { float:left; width:240px; height:220px; list-style-type:none; margin:2px; padding:5px; overflow:hidden; }처럼 overflow 속성을 추가하면 이미지 크기 변동 없이 레이어 폭을 줄일 수 있습니다. ^^

  • 매번마다 친절한 답변 과 조언 감사합니다. 조언주신대로 css 조정해서 문제 해결했습니다 ㅠㅠ 다른 브라우저상에서도 잘되는지 확인을 해봐야 할 듯 합니다. 감사합니다. padding-left: 5px; overflow:hidden; 을 추가해서 깔끔하게 해결했습니다 ㅠㅠ