카테고리 나열 for문 질문 채택완료

1차 카테고리가 8개이며 두줄로 나열이 됩니다.
문제는 6번째 2차 카테고리가 너무 많으니
위에칸까지 영향을 받아서 위에칸과 아래칸 공백이 넘 커지네요.

위에칸과 아래칸 여백을 30px 정도로 하고싶은데 어떻게 하면 될까요

 

category.php

Copy
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

function get_mshop_category($ca_id, $len)
{
    global $g5;

    $sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']}
                where ca_use = '1' ";
    if($ca_id)
        $sql .= " and ca_id like '$ca_id%' ";
    $sql .= " and length(ca_id) = '$len' order by ca_order, ca_id ";

    return $sql;
}
?>
<button type="button" id="menu_open">전체카테고리</button>
<div id="category">
    <div class="ct_wr">
        <?php
        $mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
        $mshop_ca_res1 = sql_query(get_mshop_category('', 2));
        for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
            if($i == 0)
                echo '<ul class="cate">'.PHP_EOL;
        ?>
            <li class="cate_li_1">
                <a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>" class="cate_li_1_a"><?php echo get_text($mshop_ca_row1['ca_name']); ?></a>
                <?php
                $mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));

                for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
                    if($j == 0)
                        echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
                ?>
                    <li class="cate_li_2">
                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>"><?php echo get_text($mshop_ca_row2['ca_name']); ?></a>
                    </li>
                <?php
                }

                if($j > 0)
                    echo '</ul>'.PHP_EOL;
                ?>
            </li>
        <?php
        }

        if($i > 0)
            echo '</ul>'.PHP_EOL;
        else
            echo '<p class="no-cate">등록된 분류가 없습니다.</p>'.PHP_EOL;
        ?>
    </div>
    <button type="button" class="close_btn">전체카테고리<span class="sound_only">닫기</span></button>
</div>

<script>
$(function (){
    var $category = $("#category");

    $("#menu_open").on("click", function() {
        $category.css("display","block");
    });

    $("#category .close_btn").on("click", function(){
        $category.css("display","none");
    });
});
$(document).mouseup(function (e){
 var container = $("#category");
 if( container.has(e.target).length === 0)
 container.hide();
});
</script>

 

style.css

Copy
#category{display:none;position:absolute;top:39px;left:0;width:1100px;border:2px solid #c92033;border-top:0;background:#fff;z-index:100;text-align:left; }
#category .ct_wr{padding:20px 20px 0px 5px;}
#category ul:after {display:block;visibility:hidden;clear:both;content:""}
#category .cate{margin-left:10px;line-height:20px;}
#category .cate_li_1{float:left;text-align:left;width:230px;min-height:200px;margin-left:30px;}
#category .cate_li_1_a{border-bottom:1px solid #aaa;margin-bottom:5px;padding-bottom:5px;display:block;font-weight:bold}
#category .cate_li_2 {width:100%;float:none;font-size:0.92em;;line-height:20px;height:20px;margin:0}
#category .cate_li_2  a {color:#6d6d6d;display:block}
#category a:hover{color:#c92033}

답변 1개

채택된 답변
+20 포인트

크롬의 요소검사를 통해서 이리 저리 조절해 가면서 수정해보고 그게 맞다면 해당 css의 몇줄인지 확인하시고 수정하면됩니다.

위처럼 소스를 보여주셔도 찾아내기가 쉽지 않습니다.

아니면 url을 주시면 요소검사해서 찾아드릴 수는 있겠지요.

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

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

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

로그인
🐛 버그신고