허접팁~ 게시판 카테고리 g4s 처럼 가로정렬하기 > 그누4 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

허접팁~ 게시판 카테고리 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.'&amp;sca='.urlencode($category).'"';
if($sca == $category) $str .= ' id="cate_select"';
$str .= '>'.$category.'</a></li>';
}

echo $str;
?>
</ul>
</form>
<? } ?>

파폭, 크롬, ie8, ie7(ie8호환성보기 ie7표준)만 확인했습니다.
ie8 쿼크모드 에서는 깨집니다.


그동안 쓰던 기본스킨 바꿔보려고 깔짝거리다가 카테고리는 셀렉으로 하는게 좋을 거 같더군요ㅎㅎ
그냥 지우기는 아까우니 허접팁으로 올려봅니다~
추천
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;}
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT