카테고리 나열 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 포인트
불량학생™
7년 전
크롬의 요소검사를 통해서 이리 저리 조절해 가면서 수정해보고 그게 맞다면 해당 css의 몇줄인지 확인하시고 수정하면됩니다.
위처럼 소스를 보여주셔도 찾아내기가 쉽지 않습니다.
아니면 url을 주시면 요소검사해서 찾아드릴 수는 있겠지요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인