메인배너 어떻게 해야할까요?

메인배너 어떻게 해야할까요?

QA

메인배너 어떻게 해야할까요?

본문



배너를 관리하기위에 소스를




 <!-- S : SLIDE -->

           <div class="silder">

               

<!-- 메인이미지 시작 { -->

<?php echo display_banner('메인', 'mainbanner.10.skin.php'); ?>

<!-- } 메인이미지 끝 -->

  

</div>

           

            <!-- E : SLIDE -->  

                


이렇게 넣었는데요.


원래는 창을 100% 가로 다 넓혔을 때는 아래와 같이 좌우배너가 

정상적으로 나오는데요.




855f042f1a60b896ae511f57c4c7ee36_1502442497_807.png


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


855f042f1a60b896ae511f57c4c7ee36_1502442607_2552.png

창을 줄여도 정상적으로 상단 배너가 창 줄이는 방향에 따라 같이 움직이는 방법이 없을까요?


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}

32faa53901c8a12e48c385ad89e59d23_1502451535_1379.png
 


현재, 이런 상태네요.

먼저 레이아웃부터 CSS 제대로 잡으셔야 할 것 같아요.

슬라이드 관련 부분을 좌측 영역에서 빼서 상단쪽으로 옮겨 별도로 한줄 전체를 차지하도록 해야 할것 같아요.


그런 다음, 슬라이드 스킨에 가셔서 직접 크기 수정 작업을 하셔야 할 듯...


요소 가운데 위치는 

블럭 요소 경우 해당 요소에 margin:0 auto 주시면 되고

인라인 요소 경우엔 부모 요소에 text-align:center 속성 주시면 됩니다.

저위에 답변주신것부터 처리하고 이번답글 주신것 처리하면되는것인가요? 답변이 2개라 헷갈리네요ㅡㅡ;;

'슬라이드 관련 부분을 좌측 영역에서 빼서 상단쪽으로 옮겨 별도로 한줄 전체를 차지하도록 해야 할것 같아요.' 이게 뭔말인지 정확히 이해안가는데 쉽게 설명이 가능한가요?

해당 슬라이드에 커서 찍고 요소보기 해보니까 px가 2000이 넘게 설정이 되어 있네요.
정확히 어떤 파일 어디에서 2000을 넘게 설정한 것인지는 잘 모르겠습니다.
스타일 파일의 위치가 없는 걸로 봐서 해당 코드가 있는 위치가 아닐까 싶네요...

혹시 메인배너스킨 파일을 수정해서 하는 해결할 수 있는 방법은 없나요? 제가 볼땐 그게 관건인듯해서요...

일단은 현재 메인배너를 관리자에서 넣은 배너가 아닌급한대로  제이쿼리로 처리한 메인 배너 소스로  처리해뒀습니다만, 관리자에서 배너 이미지 넣고 하는 방법을 알아야할 상황 입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 45
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT