카테고리 나열 for문 질문
본문
1차 카테고리가 8개이며 두줄로 나열이 됩니다.
문제는 6번째 2차 카테고리가 너무 많으니
위에칸까지 영향을 받아서 위에칸과 아래칸 공백이 넘 커지네요.
위에칸과 아래칸 여백을 30px 정도로 하고싶은데 어떻게 하면 될까요
category.php
<?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
#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
크롬의 요소검사를 통해서 이리 저리 조절해 가면서 수정해보고 그게 맞다면 해당 css의 몇줄인지 확인하시고 수정하면됩니다.
위처럼 소스를 보여주셔도 찾아내기가 쉽지 않습니다.
아니면 url을 주시면 요소검사해서 찾아드릴 수는 있겠지요.
답변을 작성하시기 전에 로그인 해주세요.
