쿠폰적용 클릭시 쿠폰선택이 상단에 위치 되었는 부분 크기 조정 및 위치 변경을 하고 싶습니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
쿠폰적용 클릭시 쿠폰선택이 상단에 위치 되었는 부분 크기 조정 및 위치 변경을 하고 싶습니다.

QA

쿠폰적용 클릭시 쿠폰선택이 상단에 위치 되었는 부분 크기 조정 및 위치 변경을 하고 싶습니다.

답변 1

본문

쿠폰적용 클릭시   쿠폰선택이  상단에 위치 되었는 걸  크기 조정 및 위치를 변경 하고 싶은데 

어디를 수정 해야 될지 조언 좀 부탁 드립니다. 

3067579370_1735562879.7553.png

3067579370_1735562774.1734.jpg

 

1. www/shop/shop/ordercoupon.php 소스이고 

 

<?php
include_once('./_common.php');

if($is_guest)
    exit;

$price = isset($_POST['price']) ? preg_replace('#[^0-9]#', '', $_POST['price']) : 0;

if($price <= 0)
    die('상품금액이 0원이므로 쿠폰을 사용할 수 없습니다.');

// 쿠폰정보
$sql = " select *
            from {$g5['g5_shop_coupon_table']}
            where mb_id IN ( '{$member['mb_id']}', '전체회원' )
              and cp_method = '2'
              and cp_start <= '".G5_TIME_YMD."'
              and cp_end >= '".G5_TIME_YMD."'
              and cp_minimum <= '$price' ";
$result = sql_query($sql);
$count = sql_num_rows($result);
?>

<!-- 쿠폰 선택 시작 { -->
<div class="od_coupon_wrap">
    <div id="od_coupon_frm" class="od_coupon">
        <h3>쿠폰 선택</h3>
        <?php if($count > 0) { ?>
        <div class="tbl_head02 tbl_wrap">
            <table> 
            <caption>쿠폰 선택</caption>
            <thead>
            <tr>
                <th scope="col">쿠폰명</th>
                <th scope="col">할인금액</th>
                <th scope="col">적용</th>
            </tr>
            </thead>
            <tbody>
            <?php
            for($i=0; $row=sql_fetch_array($result); $i++) {
                // 사용한 쿠폰인지 체크
                if(is_used_coupon($member['mb_id'], $row['cp_id']))
                    continue;

                $dc = 0;
                if($row['cp_type']) {
                    $dc = floor(($price * ($row['cp_price'] / 100)) / $row['cp_trunc']) * $row['cp_trunc'];
                } else {
                    $dc = $row['cp_price'];
                }

                if($row['cp_maximum'] && $dc > $row['cp_maximum'])
                    $dc = $row['cp_maximum'];
            ?>
            <tr>
                <td>
                    <input type="hidden" name="o_cp_id[]" value="<?php echo $row['cp_id']; ?>">
                    <input type="hidden" name="o_cp_prc[]" value="<?php echo $dc; ?>">
                    <input type="hidden" name="o_cp_subj[]" value="<?php echo $row['cp_subject']; ?>">
                    <?php echo get_text($row['cp_subject']); ?>
                </td>
                <td class="td_numbig"><?php echo number_format($dc); ?></td>
                <td class="td_mngsmall"><button type="button" class="od_cp_apply btn_frmline">적용</button></td> 
            </tr>
            <?php
            }
            ?>
            </tbody>
            </table>
        </div>
        <?php
        } else {
            echo '<p>사용할 수 있는 쿠폰이 없습니다.</p>';
        }
        ?>
        <div class="btn_confirm">
            <button type="button" id="od_coupon_close" class="btn_close"><i class="fa fa-times" aria-hidden="true"></i><span class="sound_only">닫기</span></button>
        </div>
    </div>
</div>
<!-- } 쿠폰 선택 끝 -->

 

 

2. /css/mobile_shop.css  내용입니다. 

 

 

/* 주문서 작성 */
#sod_frm .od_prd_list {background:#fff}
.od_prd_list .td_chk {border-left:0}
.od_prd_list .td_prd {border-left:0;position:relative;padding-left:90px;min-height:100px}
.od_prd_list .td_prd .sod_img {position:absolute;top:15px;left:0}
.od_prd_list .td_prd .sod_name {min-height:80px}
.od_prd_list .td_prd .prd_name {font-size:1.167em}
.od_prd_list .total_prc {color:#ff006c;font-weight:bold;font-size:1.167em}

#sod_frm_orderer {padding:10px;border-bottom:1px solid #d6d3d3}
#sod_frm_taker {padding:10px}
#sod_frm_taker h2,#sod_frm_orderer h2 {margin:10px 0;font-size:1.25em}
.odf_list li {}
.odf_list label,.odf_list strong {display:block;margin:7px 0 5px;color:#444;font-weight:normal}
.odf_list .frm_input {width:100%;margin:0 0 5px}
.odf_list .dlv_slt div {background:#f3f3f3;border:1px solid #ccc;margin:5px 0;padding:10px}
.odf_list .dlv_slt div label {display:inline-block;margin:3px 0;color:#000}
#order_address {display:inline-block;width:100px;text-align:center;border:1px solid #3e976c;color:#fff;height:30px;margin-left:10px;line-height:28px;vertical-align:baseline;background:#3e976c}
.odf_list .ad_default {display:inline-block;margin:0}
.odf_list .btn_addsch {position:absolute;top:5px;right:5px;border-radius:3px;height:30px}
.odf_list .add_num {position:relative;display:block}
.odf_list textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:70px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
#m_sod_frm_paysel {margin:10px 0}
#m_sod_frm_paysel ul {margin:0 0;background:#fff;padding:10px;border-bottom:1px solid #ccc}
#m_sod_frm_paysel ul:after {display:block;visibility:hidden;clear:both;content:""}
#m_sod_frm_paysel li {float:left;padding:5px;width:46%;height:25px}
#m_sod_frm_paysel .KPAY {background:url('../../../img/kpay.png') no-repeat;width:37px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%}
#m_sod_frm_paysel .PAYNOW {background:url('../../../img/paynow.png') no-repeat;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%}
#m_sod_frm_paysel .PAYCO {background:url('../../../img/payco.png') no-repeat 1px;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%}
#m_sod_frm_paysel .inicis_lpay {background:url('../../../img/lpay_logo.png') no-repeat;width:35px;height:12px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%}
.kakaopay_icon {background:url('../../../img/kakao.png') no-repeat;height:21px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:100%}
.samsung_pay {background:url('../../../img/samsungpay.png') no-repeat;height:12px;width:83px;display:inline-block;overflow:hidden;text-indent:-999px}

#sod_frm {font-size:0.85em}
#sod_frm .sod_ta_wr {background:#fff;padding:15px}
#sod_frm .btn_confirm {width:400px;margin:0 auto 10px}
#sod_frm .btn_submit {width:49.5%;height:45px;font-size:1em;margin:5px 0}
#sod_frm .btn_cancel,#sod_frm .btn01 {width:49.5%;line-height:45px;height:45px;font-size:1em;margin:5px 0;padding:0;border-radius:0}

#sod_frm_pay {padding:10px;border-top:1px solid #f3f3f3}
#sod_frm_pay h2 {margin:10px 0;font-size:1.25em}
#sod_frm_pay .cp_btn1,#sod_frm_pay .cp_cancel1 {margin-top:0}
.odf_tbl {position:relative}
.odf_tbl table {background:#fff;width:100%;border-collapse:collapse;border-bottom:1px solid #ccc}
.odf_tbl table th {border-top:1px solid #eceff4;padding:10px;text-align:left;width:120px;font-weight:normal}
.odf_tbl table td {border-top:1px solid #eceff4;padding:7px 10px;text-align:right}

#sod_frm_pt_alert {margin:10px 0;color:#328abd}

.sod_frm_point {padding:10px 0;clear:both}
.sod_frm_point div {background:#fff;border-bottom:1px solid #eceff4;padding:10px;text-align:right}
.sod_frm_point div:after {display:block;visibility:hidden;clear:both;content:''}
.sod_frm_point div label {float:left;line-height:30px}
.sod_frm_point div span {display:block;font-size:0.92em}
.sod_frm_point div span:after {display:block;visibility:hidden;clear:both;content:''}
.sod_frm_point .max_point_box em {font-style:normal !important}
.sod_frm_point div strong {float:left;color:#666;font-weight:normal}
.sod_frm_point #od_temp_point {height:30px;border:1px solid #ccc;text-align:right}

#settle_bank {background:#fff;border-bottom:1px solid #ccc;padding:10px;text-align:right;clear:both}
#settle_bank select {height:30px;margin:0 0 5px;width:100%}
#settle_bank #od_deposit_name {height:30px;border:1px solid #ccc;text-align:center}
#settle_bank label {float:left;line-height:30px}
#sod_frm_pt_info {border-bottom:1px solid #ccc}

/* .od_coupon {position:absolute;top:0;left:0;background:#fff;width:100%;z-index:99;border-radius:0 0 3px 3px; */ 
.od_coupon {position:absolute;top:0;left:0;background:#fff;width:70%;z-index:99;border-radius:0 0 3px 3px;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
box-shadow:1px 1px 5px rgba(0,0,0,0.4)}
.od_coupon h3 {height:45px;line-height:45px;font-size:1.167em;background:#333;color:#fff;padding:0 15px;text-align:left}
.od_coupon .tbl_head02 {}
.od_coupon .tbl_head02 .btn_frmline {background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px}
.od_coupon .tbl_head02 td {text-align:left}
.od_coupon .tbl_head02 th {width:auto !important}
.od_coupon .tbl_head02 .td_mngsmall {width:60px;text-align:center}
.od_coupon .tbl_head02 .td_numbig {width:80px;text-align:right}
.od_coupon .btn_confirm {margin:20px}
.od_coupon .btn_confirm .btn_submit {height:40px;font-size:1.167em;font-weight:bold;width:100%}
.od_coupon .btn_confirm .btn_close {position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#fff;font-size:1.25em}

.cp_btn ,.cp_btn1 {padding:0 7px;border:1px solid #38b2b9;color:#38b2b9;background:#fff;height:23px;line-height:21px;margin:10px 0 0}
.cp_apply {background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px}
.cp_cancel,.cp_cancel1 {padding:0 7px;border:1px solid #aaa;color:#666;background:#fff;height:23px;line-height:21px;margin:10px 0 0 2px}

#sod_frm_escrow {margin:10px}
#sod_frm_escrow h2 {font-size:1.25em}
#od_pay_sl h3 {font-size:1.25em}

/* 쿠폰 */
#scp_list li {position:relative;padding:0}
#scp_list .li_pd {position:relative;padding:10px}
#scp_list .li_title {font-weight:bold;font-size:1.167em}
#scp_list .pd_price {position:absolute;top:10px;right:10px}
#scp_list .pd_price strong {color:#ff006c;font-size:1.5em}
#scp_list .li_target {color:#666;margin:5px 0 0;background:#f3f3f3;border-top:1px dotted #ccc;padding:5px 10px}
#scp_list .pd_date {float:right;color:#777}
 

이 질문에 댓글 쓰기 :

답변 1

.od_coupon {position:absolute;top:0;left:0;background:#fff;width:70%;z-index:99;border-radius:0 0 3px 3px;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
box-shadow:1px 1px 5px rgba(0,0,0,0.4)}

//이자식요소를 보면 top:0;  width:70%; 되어잇습니다. 조절을 해보시기 바랍니다.

 

참고로 .od_coupon의 부모는 .od_coupon_wrap이요소이므로 다음과같이 속성이 position: relative; 되어잇어야합니다.

따라서 .od_coupon  자식의 부모인 .od_coupon_wrap 이요소가어떻게 정의되어 있는지 찾아보시기 바랍니다. 만약 없거나 못찾겟으면 직접 다음과같이 직접스타일을  적용해 보실수도있어요 참고하시기 바랍니다.

<div class="od_coupon_wrap" style="position: relative; width: 100%; height: 300px;">

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로