쿠폰적용 클릭시 쿠폰선택이 상단에 위치 되었는 부분 크기 조정 및 위치 변경을 하고 싶습니다.
본문
쿠폰적용 클릭시 쿠폰선택이 상단에 위치 되었는 걸 크기 조정 및 위치를 변경 하고 싶은데
어디를 수정 해야 될지 조언 좀 부탁 드립니다.
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;">