배너를 관리하기위에 소스를
<!-- S : SLIDE -->
<div class="silder">
<!-- 메인이미지 시작 { -->
<?php echo display_banner('메인', 'mainbanner.10.skin.php'); ?>
<!-- } 메인이미지 끝 -->
</div>
<!-- E : SLIDE -->
이렇게 넣었는데요.
원래는 창을 100% 가로 다 넓혔을 때는 아래와 같이 좌우배너가
정상적으로 나오는데요.

창을 우측이나 좌측으로 줄이면 아래와 같이 되네요.ㅜㅜ

창을 줄여도 정상적으로 상단 배너가 창 줄이는 방향에 따라 같이 움직이는 방법이 없을까요?
index 소스는 아래와 같습니다.
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
if(G5_COMMUNITY_USE === false) {
include_once(G5_THEME_SHOP_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<div id="container01">
<!-- S : SLIDE -->
<div class="silder">
<!-- 메인이미지 시작 { -->
<?php echo display_banner('메인', 'mainbanner.10.skin.php'); ?>
<!-- } 메인이미지 끝 -->
</div>
<!-- E : SLIDE -->
<div class="area">
<!-- S : 추천상품 -->
<div class="product_recommbox ">
<div class="img_tit"><img src="<?php echo G5_THEME_IMG_URL ?>/main/main_product_tit.png" border="0" usemap="#Map" alt="추천상품 / 방프몰이 추천하는 상품 입니다." />
<map name="Map">
<area shape="rect" coords="1142,91,1196,121" href="/shop/list.php?ca_id=10">
</map>
</div>
<div class="product_pic">
<?php
$list = new item_list();
$list->set_type(2);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_icon', true);
$list->set_view('it_price', true);
echo $list->run();
?>
</div>
</div>
<!-- E : 추천상품 -->
<br><br>
<!-- S : 사이드정보 -->
<div class="box_3rd">
<div class="notice">
<div class="tit_img"><img src="<?php echo G5_THEME_IMG_URL ?>/main/notice_bar.png" alt="공지사항" border="0" usemap="#Map2" />
<map name="Map2">
<area shape="rect" coords="320,0,374,30" href="/bbs/board.php?bo_table=notice">
</map>
</div>
<div class="left_img"><img src="<?php echo G5_THEME_IMG_URL ?>/main/notice_pic.png" />
</div>
<div class="left_bbs"><?php echo latest("theme/simple_basic", notice, 3, 10); ?></div>
</div>
<div class="product_bn">
<a href="/shop/list.php?ca_id=10"><img src="<?php echo G5_THEME_IMG_URL ?>/main/product_img.png" alt="쇼핑정보, 웰빙상품을 전문으로 취급하는 방프리뫃 웰빙상품을 소개합니다. / 쇼핑정보 바로가기" /></a>
</div>
<div class="custormer">
<a href="/bbs/board.php?bo_table=qa"><img src="<?php echo G5_THEME_IMG_URL ?>/main/customer_img.png" alt="고객만족센터, 010-8536-1473 / 010-7196-1473, 운영시간 24시간 연중무휴, 제품 Q&A 바로가기" / ></a>
</div>
<?php echo latest("theme/move", "bn",4, 25); ?>
</div>
<!-- E : 사이드정보 -->
<div class="binbox"></div>
</div>
</div>
<!-- E : CONTAINER -->
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
메인 컨테이너 css 소슨느 아래와 같습니다.
/* Main CONTAINER */
#container01 .silder { margin-top:143px; }
#container01 .area { position:relative; width:1200px; margin:0 auto; }
#container01 .area .product_recommbox { margin:0; padding:0; height:380px; }
#container01 .area .product_recommbox .img_tit{ padding-bottom:15px; }
#container01 .area .product_recommbox .product_pic{ height:274px; top:30px; }
#container01 .area .box_3rd { position:relative; margin:0; padding:0; margin:0 auto; margin-bottom:5px; }
#container01 .area .box_3rd .notice {width:379px; height:150px; }
#container01 .area .box_3rd .notice .tit_img{ position:relative; margin:0; padding:0; }
#container01 .area .box_3rd .notice .left_img{ position:absolute; top:32px; left:0;}
#container01 .area .box_3rd .notice .left_bbs{ position:absolute; top:32px; left:98px; }
#container01 .area .box_3rd .product_bn { position:absolute; top:0px; left:427px; }
#container01 .area .box_3rd .custormer { position:absolute; top:0px; left:837px; }
#container01 .area .binbox { height:23px;}
답변 3개 / 댓글 7개
실제 페이지를 링크해 주셔야 정확한 답변을 드릴수 있겠습니다.
우선은 페이지의 콘텐츠의 너비를 지정하는 영역이 있을겁니다.
그누보드5나 영카트는 content에서 이를 정하는게 기본값일텐데, 이를 수정하여 만들었다면 다른 영역의 콘텐츠 너비만큼(원하는 너비)을 배너를 감싸는 영역에 지정해주시고, 배너의 이미지너비들은 width: 100%와 같이 자신을 감싸는 외부영역의 너비를 벗어나지 않도록 지정해주시면 됩니다.
답변에 대한 댓글 1개

현재, 이런 상태네요.
먼저 레이아웃부터 CSS 제대로 잡으셔야 할 것 같아요.
슬라이드 관련 부분을 좌측 영역에서 빼서 상단쪽으로 옮겨 별도로 한줄 전체를 차지하도록 해야 할것 같아요.
그런 다음, 슬라이드 스킨에 가셔서 직접 크기 수정 작업을 하셔야 할 듯...
요소 가운데 위치는
블럭 요소 경우 해당 요소에 margin:0 auto 주시면 되고
인라인 요소 경우엔 부모 요소에 text-align:center 속성 주시면 됩니다.
답변에 대한 댓글 5개
'슬라이드 관련 부분을 좌측 영역에서 빼서 상단쪽으로 옮겨 별도로 한줄 전체를 차지하도록 해야 할것 같아요.' 이게 뭔말인지 정확히 이해안가는데 쉽게 설명이 가능한가요?
먼저 레이아웃부터 손 보시고,
그 다음에 슬라이드 스킨 들어가셔서 크기 조정 후, 가운데 위치하도록 하셔야...
저도 슬라이드 스킨의 크기를 수정할려고햤으나 어느 부분이 크기 수정이 잘 모르겠는데 혹시 어느부분이 알려주실 수 있나요?
정확히 어떤 파일 어디에서 2000을 넘게 설정한 것인지는 잘 모르겠습니다.
스타일 파일의 위치가 없는 걸로 봐서 해당 코드가 있는 위치가 아닐까 싶네요...
일단은 현재 메인배너를 관리자에서 넣은 배너가 아닌급한대로 제이쿼리로 처리한 메인 배너 소스로 처리해뒀습니다만, 관리자에서 배너 이미지 넣고 하는 방법을 알아야할 상황 입니다.
#sbn_idx 의 너비를 원하시는 크기로 강제 선언해보세요.
가령,
#sbn_idx {width: 700px !important}
이때 하위의 요소들도 너비가 위와 같은 값으로 계산되어 진다면 해결된 것이고,
그렇지 않다면 #sbn_idx의 하부요소들중에서도 너비값이 계산되어지는 부분들에도 같은 너비를 직접 지정해주세요.
#sbn_idx ul {width: 700px !important}
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.