허접팁~ 게시판 카테고리 g4s 처럼 가로정렬하기 정보
허접팁~ 게시판 카테고리 g4s 처럼 가로정렬하기본문
그누4 - 게시판 스킨 list.skin.php 파일
g4s 참고해서 카테고리 부분 g4s처럼 수정해봤습니다.
<style type="text/css">
#board_category_ul{list-style:none; font-size:12px;}
#board_category_ul li{float:left; text-align:center; margin-left:-1px; margin-bottom:-1px; border:1px solid #ccc;}
#board_category_ul li a{display:block; min-width:80px; padding:4px 7px; color:#454545; background-color:#fff}
#board_category_ul li a#cate_select{background-color:#454545; font-weight:bold; color:#fff}
</style>
위에처럼 스타일 넣어주시고 기존 카테고리 부분은 아래처럼 해주시면 됩니다.
<? if ($is_category) { ?>
<form name="fcategory" method="get" style="margin:0px;">
<ul id="board_category_ul">
<?
$arr = explode("|", $board[bo_category_list]);
$str = '<li><a href="'.$g4[bbs_path].'/board.php?bo_table='.$bo_table.'"';
if($sca == '') $str .= ' id="cate_select"';
$str .= '>전체</a></li>';
for ($i=0; $i<count($arr); $i++) {
$category = trim($arr[$i]);
if($category=='') continue;
$str .= '<li><a href="'.$g4[bbs_path].'/board.php?bo_table='.$bo_table.'&sca='.urlencode($category).'"';
if($sca == $category) $str .= ' id="cate_select"';
$str .= '>'.$category.'</a></li>';
}
echo $str;
?>
</ul>
</form>
<? } ?>
파폭, 크롬, ie8, ie7(ie8호환성보기 ie7표준)만 확인했습니다.
ie8 쿼크모드 에서는 깨집니다.
그동안 쓰던 기본스킨 바꿔보려고 깔짝거리다가 카테고리는 셀렉으로 하는게 좋을 거 같더군요ㅎㅎ
그냥 지우기는 아까우니 허접팁으로 올려봅니다~
g4s 참고해서 카테고리 부분 g4s처럼 수정해봤습니다.
<style type="text/css">
#board_category_ul{list-style:none; font-size:12px;}
#board_category_ul li{float:left; text-align:center; margin-left:-1px; margin-bottom:-1px; border:1px solid #ccc;}
#board_category_ul li a{display:block; min-width:80px; padding:4px 7px; color:#454545; background-color:#fff}
#board_category_ul li a#cate_select{background-color:#454545; font-weight:bold; color:#fff}
</style>
위에처럼 스타일 넣어주시고 기존 카테고리 부분은 아래처럼 해주시면 됩니다.
<? if ($is_category) { ?>
<form name="fcategory" method="get" style="margin:0px;">
<ul id="board_category_ul">
<?
$arr = explode("|", $board[bo_category_list]);
$str = '<li><a href="'.$g4[bbs_path].'/board.php?bo_table='.$bo_table.'"';
if($sca == '') $str .= ' id="cate_select"';
$str .= '>전체</a></li>';
for ($i=0; $i<count($arr); $i++) {
$category = trim($arr[$i]);
if($category=='') continue;
$str .= '<li><a href="'.$g4[bbs_path].'/board.php?bo_table='.$bo_table.'&sca='.urlencode($category).'"';
if($sca == $category) $str .= ' id="cate_select"';
$str .= '>'.$category.'</a></li>';
}
echo $str;
?>
</ul>
</form>
<? } ?>
파폭, 크롬, ie8, ie7(ie8호환성보기 ie7표준)만 확인했습니다.
ie8 쿼크모드 에서는 깨집니다.
그동안 쓰던 기본스킨 바꿔보려고 깔짝거리다가 카테고리는 셀렉으로 하는게 좋을 거 같더군요ㅎㅎ
그냥 지우기는 아까우니 허접팁으로 올려봅니다~
추천
1
1
댓글 3개
위에 이미지 처럼 깔끔하게 안되는데요
댓글에 파일 첨부 안되서 질문답변에 올려둘게요~
댓글에 파일 첨부 안되서 질문답변에 올려둘게요~
위에 이미지 보면은 카테고리 틀하고 게시판 하고 좌,우측 딱 뜰어지는데요
수정해서 해보니 카테고리 틀이 작아져요
이건 수정이 안될가요?
수정해서 해보니 카테고리 틀이 작아져요
이건 수정이 안될가요?
저도 이 팁 잘 쓰고 있습니다.
좌 우측 딱 맞게 맞추시려면 보드 넓이를 정수비로 나누신 값을
#board_category_ul li a{display:block; min-width:70px; padding:6px 7px; color:#454545; background-color:#97c142; color:#fff}
위 css중에서 min-width 값으로 정하시면 됩니다. 예로 보드의 넓이가 700px라면 70px 혹은
반대로 보드 넓이를 min-width의 정수배로 하시면 됩니다. 예로 min-width가 85px라면 보드넓이는 10배인 850px또는
9배인 765px 뭐 이런식으로 말입니다.
대신 카테고리의 길이가 너무길면 li가 늘어나므로 min-width 안에 다 들어갈 만큼 짧게 해야합니다.
저는 차라리 아래와 같이 ul을 중앙정렬로 해서 씁니다.
#board_category_ul{position:relative; display: table; margin:0px; margin-left: auto; margin-right: auto; padding:0px; list-style:none;}
좌 우측 딱 맞게 맞추시려면 보드 넓이를 정수비로 나누신 값을
#board_category_ul li a{display:block; min-width:70px; padding:6px 7px; color:#454545; background-color:#97c142; color:#fff}
위 css중에서 min-width 값으로 정하시면 됩니다. 예로 보드의 넓이가 700px라면 70px 혹은
반대로 보드 넓이를 min-width의 정수배로 하시면 됩니다. 예로 min-width가 85px라면 보드넓이는 10배인 850px또는
9배인 765px 뭐 이런식으로 말입니다.
대신 카테고리의 길이가 너무길면 li가 늘어나므로 min-width 안에 다 들어갈 만큼 짧게 해야합니다.
저는 차라리 아래와 같이 ul을 중앙정렬로 해서 씁니다.
#board_category_ul{position:relative; display: table; margin:0px; margin-left: auto; margin-right: auto; padding:0px; list-style:none;}