메인배너 어떻게 해야할까요?
본문
배너를 관리하기위에 소스를
<!-- 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="고객만족센터, *** 개인정보보호를 위한 휴대폰번호 노출방지 *** / *** 개인정보보호를 위한 휴대폰번호 노출방지 ***, 운영시간 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
실제 페이지를 링크해 주셔야 정확한 답변을 드릴수 있겠습니다.
우선은 페이지의 콘텐츠의 너비를 지정하는 영역이 있을겁니다.
그누보드5나 영카트는 content에서 이를 정하는게 기본값일텐데, 이를 수정하여 만들었다면 다른 영역의 콘텐츠 너비만큼(원하는 너비)을 배너를 감싸는 영역에 지정해주시고, 배너의 이미지너비들은 width: 100%와 같이 자신을 감싸는 외부영역의 너비를 벗어나지 않도록 지정해주시면 됩니다.
#sbn_idx 의 너비를 원하시는 크기로 강제 선언해보세요.
가령,
#sbn_idx {width: 700px !important}
이때 하위의 요소들도 너비가 위와 같은 값으로 계산되어 진다면 해결된 것이고,
그렇지 않다면 #sbn_idx의 하부요소들중에서도 너비값이 계산되어지는 부분들에도 같은 너비를 직접 지정해주세요.
#sbn_idx ul {width: 700px !important}
현재, 이런 상태네요.
먼저 레이아웃부터 CSS 제대로 잡으셔야 할 것 같아요.
슬라이드 관련 부분을 좌측 영역에서 빼서 상단쪽으로 옮겨 별도로 한줄 전체를 차지하도록 해야 할것 같아요.
그런 다음, 슬라이드 스킨에 가셔서 직접 크기 수정 작업을 하셔야 할 듯...
요소 가운데 위치는
블럭 요소 경우 해당 요소에 margin:0 auto 주시면 되고
인라인 요소 경우엔 부모 요소에 text-align:center 속성 주시면 됩니다.