테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

CSS 질문드립니다. 채택완료

만도리 1년 전 조회 1,926
답변 2
목록

이윰빌더 다운받아서 공부중입니다.

상품이미지 간격이(실선) 너무 길어서 좀 줄이고 싶습니다.

PHP소스는 좀 아는데 CSS는 아예몰라서요.

어디부분을 수정하면 저 공간을 줄일수가있나요?

조언좀 구합니다.

http://sir.kr/data/editor/2402/2943471000_1708159551.6879.jpg" width="100%" />

 

이윰빌더 파일입니다.

</strong></p>

<p><style>

.product-list-10 {margin-left:-10px;margin-right:-10px;font-size:.9375rem}

.product-list-10:after {content:"";display:block;clear:both}

.product-list-10 .item-list-wrap {padding:10px;width:25%;float:left}

.product-list-10 .item-list {position:relative;border:1px solid #e5e5e5;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}

.product-list-10 .product-img {position:relative;overflow:hidden;margin:10px;background:#fff}

.product-list-10 .product-img-in {position:relative;overflow:hidden;width:100%}

.product-list-10 .product-img-in:before {content:"";display:block;padding-top:100%;background:#fff}

.product-list-10 .product-img-in .first-img {display:block}

.product-list-10 .product-img-in .second-img {display:none}

.product-list-10 .item-list:hover {border-color:#757575}

.product-list-10 .item-list:hover .product-img-in .second-img {display:block}

.product-list-10 .product-img-in img {display:block;max-width:100%;height:auto;position:absolute;top:0;left:0;right:0;bottom:0}

.product-list-10 .product-img-in .discount-percent {position:absolute;top:-40px;left:-40px;width:80px;height:80px;padding-top:57px;text-align:center;background:#cc2300;color:#fff;font-style:italic;font-size:.75rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}

.product-list-10 .product-description .product-description-in {position:relative;overflow:hidden;padding:0 10px 10px}

.product-list-10 .product-description .product-name {position:relative;overflow:hidden;margin:10px 0 5px;font-size:1.125rem;font-weight:700;line-height:1.4;height:48px}

.product-list-10 .product-description .product-name a {color:#000}

.product-list-10 .product-description .product-name a:hover {text-decoration:underline}

.product-list-10 .product-description .title-price {font-size:1.125rem;font-weight:700;color:#cc2300}

.product-list-10 .product-description .line-through {font-size:.9375rem;color:#959595;text-decoration:line-through;margin-left:7px;font-weight:400}

.product-list-10 .product-description .product-id {color:#757575;display:block;font-size:.8125rem;margin-top:10px}

.product-list-10 .product-description .product-info {position:relative;overflow:hidden;height:38px;color:#959595;font-size:.8125rem;margin-top:10px}

.product-list-10 .product-description .product-sns {position:relative;height:30px;margin-top:10px}

.product-list-10 .product-description .product-sns ul {position:absolute;top:0;right:0;margin:0;padding:0;list-style:none}

.product-list-10 .product-description .product-sns ul:after {content:"";display:block;clear:both}

.product-list-10 .product-description .product-sns ul li {float:left;margin-left:1px}

.product-list-10 .product-description .product-sns ul li a {display:block;width:30px;height:30px;line-height:30px;text-align:center;background:#b5b5b5;color:#fff;font-size:.75rem}

.product-list-10 .product-description .product-sns ul li:hover .wish-icon {background:#cc2300}

.product-list-10 .product-description .product-sns ul li:hover .facebook-icon {background:#39558f}

.product-list-10 .product-description .product-sns ul li:hover .twitter-icon {background:#4698e0}

.product-list-10 .product-description-bottom {position:relative;overflow:hidden;padding:12px 10px;border-top:1px solid #e5e5e5}

.product-list-10 .product-description-bottom a:hover {text-decoration:underline;color:#000}

.product-list-10 .product-ratings {width:75px;margin:0;padding:0}

.product-list-10 .product-ratings li {padding:0;float:left;margin-right:0}

.product-list-10 .product-ratings li .rating {color:#a5a5a5;font-size:.8125rem;line-height:normal}

.product-list-10 .product-ratings li .rating-selected {color:#cc2300;font-size:.8125rem}

.product-list-10 .shop-rgba-red {background:#cc2300}

.product-list-10 .shop-rgba-yellow {background:#ff9500}

.product-list-10 .shop-rgba-green {background:#00897b}

.product-list-10 .shop-rgba-purple {background:#8e24aa}

.product-list-10 .shop-rgba-orange {background:#f4511e}

.product-list-10 .shop-rgba-dark {background:#3c3c3e}

.product-list-10 .shop-rgba-default {background:#A6A6A6}

.product-list-10 .rgba-banner-area {position:absolute;top:0;right:0}

.product-list-10 .rgba-banner {height:18px;width:70px;line-height:18px;color:#fff;font-size:.6875rem;text-align:center;font-weight:400;position:relative;text-transform:uppercase;margin-bottom:1px}

.product-list-10 .item-list:hover .product-name a {text-decoration:underline}

.product-type-list .product-list-10 .item-list-wrap {width:50%}

.product-type-list .product-list-10 .product-img {position:absolute;top:0;left:0;overflow:hidden;background:#fff;width:160px}

.product-type-list .product-list-10 .product-description {margin-left:175px;min-height:180px}

@media (max-width:1199px) {

    .product-list-10 {margin-left:-5px;margin-right:-5px}

    .product-list-10 .item-list-wrap {width:33.33333%;padding:5px}

}

@media (max-width:991px) {

    .product-list-10 .item-list-wrap {width:50%}

    .product-type-list .product-list-10 .item-list-wrap {width:100%;padding:10px 5px}

}

@media (max-width:767px) {

    .product-list-10 {margin-left:-2px;margin-right:-2px}

    .product-list-10 .item-list-wrap {padding:5px 2px}

    .product-type-list .product-list-10 .item-list-wrap {width:100%;padding:10px 2px}

}

@media (max-width:576px) {

    .product-list-10 .product-img {margin:5px}

    .product-list-10 .product-description .product-description-in {padding:0 5px 5px}

    .product-list-10 .product-description-bottom {padding:12px 5px}

    .product-type-list .product-list-10 .product-img {margin:10px}

    .product-type-list .product-list-10 .product-description .product-description-in {padding:0 10px 10px}

    .product-type-list .product-list-10 .product-description-bottom {padding:12px 10px}

}

@media (max-width:500px) {

    .product-type-list .product-list-10 .product-img {position:relative;top:inherit;left:inherit;overflow:hidden;background:#fff;width:inherit}

    .product-type-list .product-list-10 .product-description {margin-left:0;min-height:inherit}

}

</style></p>

<p><div class="product-list-10">

    <?php for ($i=0; $i<count((array)$list); $i++) { ?>

    <div class="item-list-wrap">

        <div class="item-list">

            <?php if ($list[$i]['href']) { ?>

            <a href="<?php echo $list[$i]['href']; ?>">

            <?php } ?>

                <div class="product-img">

                    <div class="product-img-in">

                        <div class="first-img">

                            <?php echo $list[$i]['it_image']; ?>

                        </div>

                        <?php if ($list[$i]['it_image2']) { ?>

                        <div class="second-img">

                            <?php echo $list[$i]['it_image2']; ?>

                        </div>

                        <?php } ?>

                        <?php if ($this->view_it_icon) { ?>

                        <?php echo $list[$i]['it_icon']; ?>

                        <?php } ?>

                        <?php if($list[$i]['dc_ratio']) { ?>

                        <div class="discount-percent"><?php echo $list[$i]['dc_ratio']; ?>%</div>

                        <?php } ?>

                    </div>

                </div>

            <?php if ($list[$i]['href']) { ?>

            </a>

            <?php } ?></p>

<p>            <div class="product-description">

                <div class="product-description-in">

                    <h5 class="product-name">

                        <?php if ($list[$i]['href']) { ?>

                        <a href="<?php echo $list[$i]['href']; ?>">

                        <?php } ?>

                        <?php if ($this->view_it_name) { echo stripslashes($list[$i]['it_name']); } ?>

                        <?php if ($list[$i]['href']) { ?>

                        </a>

                        <?php } ?>

                    </h5></p>

<p>                    <?php if ($this->view_it_cust_price || $this->view_it_price) { ?>

                    <div class="product-price">

                        <?php if ($this->view_it_price) { ?>

                        <span class="title-price"><?php echo $list[$i]['it_tel_inq']; ?>원</span>

                        <?php } ?>

                        <?php if ($this->view_it_cust_price && $list[$i]['it_cust_price']) { ?>

                        <span class="title-price line-through">₩ <?php echo $list[$i]['it_cust_price']; ?></span>

                        <?php } ?>

                    </div>

                    <?php } ?></p>

<p>                    <?php if ($this->view_it_id) { ?>

                    <span class="product-id"><?php echo stripslashes($list[$i]['it_id']); ?></span>

                    <?php } ?></p>

<p>                    <?php if ($this->view_it_basic) { ?>

                    <div class="product-info"><?php echo stripslashes($list[$i]['it_basic']); ?></div>

                    <?php } ?></p>

<p>                    <?php if ($this->view_sns) { ?>

                    <!--div class="product-sns">

                        <ul>

                            <li><a href="javascript:void(0);" class="wish-icon" onclick="item_wish_for_list(<?php echo $list[$i]['it_id']; ?>);" title="위시리스트"><i class="far fa-heart"></i></a></li>

                            <li><a href="<a href="https://www.facebook.com/sharer/sharer.php?u=<?php" target="_blank" rel="noopener noreferrer">https://www.facebook.com/sharer/sharer.php?u=<?php</a> echo $list[$i]['sns_url']; ?>&amp;p=<?php echo $list[$i]['sns_title']; ?>" target="_blank" class="facebook-icon" title="페이스북"><i class="fab fa-facebook-f"></i></a></li>

                            <li><a href="<a href="https://twitter.com/share?url=<?php" target="_blank" rel="noopener noreferrer">https://twitter.com/share?url=<?php</a> echo $list[$i]['sns_url']; ?>&amp;text=<?php echo $list[$i]['sns_title']; ?>" target="_blank" class="twitter-icon" title="트위터"><i class="fab fa-twitter"></i></a></li>

                        </ul>

                    </div-->

                    <?php } ?>

                </div>

            </div>

            <!--div class="clearfix"></div-->

            <!--div class="product-description-bottom">

                <a class="float-start" href="<?php echo G5_SHOP_URL; ?>/itemuselist.php?sfl=a.it_id&stx=<?php echo $list[$i]['it_id']; ?>">리뷰보기</a>

                <ul class="list-inline product-ratings float-end">

                    <li><i class="rating<?php if ($list[$i]['star_score'] > 0) { ?>-selected fas fa-star<?php } else { ?> far fa-star<?php } ?>"></i></li>

                    <li><i class="rating<?php if ($list[$i]['star_score'] > 1) { ?>-selected fas fa-star<?php } else { ?> far fa-star<?php } ?>"></i></li>

                    <li><i class="rating<?php if ($list[$i]['star_score'] > 2) { ?>-selected fas fa-star<?php } else { ?> far fa-star<?php } ?>"></i></li>

                    <li><i class="rating<?php if ($list[$i]['star_score'] > 3) { ?>-selected fas fa-star<?php } else { ?> far fa-star<?php } ?>"></i></li>

                    <li><i class="rating<?php if ($list[$i]['star_score'] > 4) { ?>-selected fas fa-star<?php } else { ?> far fa-star<?php } ?>"></i></li>

                </ul>

                <div class="clearfix"></div>

            </div-->

            <?php if ($is_admin == 'super' && !G5_IS_MOBILE) { ?>

            <div class="adm-edit-btn btn-edit-mode" style="bottom:0">

                <div class="btn-group">

                    <a href="<?php echo G5_ADMIN_URL; ?>/?dir=shop&pid=itemform&w=u&it_id=<?php echo $list[$i]['it_id']; ?>&wmode=1" onclick="eb_admset_modal(this.href); return false;" class="ae-btn-l ae-item-btn"><i class="far fa-edit"></i> 개별상품 설정</a>

                    <a href="<?php echo G5_ADMIN_URL; ?>/?dir=shop&pid=itemform&w=u&it_id=<?php echo $list[$i]['it_id']; ?>" target="_blank" class="ae-btn-r" title="새창 열기">

                        <i class="fas fa-external-link-alt"></i>

                    </a>

                </div>

            </div>

            <?php } ?>

        </div>

    </div>

    <?php } ?>

    <?php if (count((array)$list) == 0) { ?>

    <p class="text-center text-gray m-t-100 m-b-100"><i class="fa fa-exclamation-circle"></i> 등록된 상품이 없습니다.</p>

    <?php } ?>

</div></p>

<p><strong>

#영카트5
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
핑크빈
핑크빈
1년 전

설명 부분같은데

.product-info 부분 높이를 줄이시거나 하시면될거같아요. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
만도리
1년 전
감사합니다.0으로 줄이니까 줄어듭니다.
복받으실꺼에요~

댓글을 작성하려면 로그인이 필요합니다.

배
배르만
1년 전

다음 부분의 min-height 조절이 도움이 될지 모르겠습니다.

</p>

<p>.product-type-list .product-list-10 .product-description {margin-left:175px;min-height:180px}</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
만도리
1년 전
답변감사합니다.두분 말씀듣고 따라하니 핑크빈님말처럼 조정이 되었습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인