테스트 사이트 - 개발 중인 베타 버전입니다

그누 스킨 게시판처럼, 분류탭을 일정 길이로 정돈되게 쌓고 싶습니다.

· 11년 전 · 2755 · 6
11.jpg
사용자 지정 1.gif
그누 스킨 게시판처럼, 분류탭을 가지런히 정돈되게 쌓고 싶습니다.
현재 css 이며, http://www.homzzang.com/bbs/board.php?bo_table=process 상태와 같습니다.
css를 어떻게 수정하면 될까요? 참고로, 배추베이직 게시판입니다.

현재 css
-------------------
/* 분류탭 */
#mw_basic .category_tab {
width:728px; /*분류탭 길이 일정하게*/
margin-top:5px;
margin-bottom:0px;
padding:0px;
border-bottom:0px solid #515151;
}

#mw_basic .category_tab ul {
list-style:none;
margin:0;
padding:0;
height:30px;
border-right:0px solid #ddd;
}

#mw_basic .category_tab ul li {
margin:0;
display:block;
float:left;
width:120px; /*분류탭 길이 일정하게*/
height:29px;
padding:0px 12px 0 12px;
background-color:#f1f1f1;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
}

*html #mw_basic .category_tab ul li {

width:120px; /*분류탭 길이 일정하게*/
height:30px;
}

#mw_basic .category_tab ul li div {
margin:7px 0 0 0;
}

#mw_basic .category_tab ul li a {
color:#515151;
font-weight:bold;
text-decoration:none;
}

#mw_basic .category_tab ul li.selected {
background-color:#515151;
height:31px;
margin-left:-1px;
margin-right:-1px;
margin-top:-1px;
}

#mw_basic .category_tab ul li.selected a {
color:#fff;
}

-----------------------------------



현재 출력 코드
-----------------------------------
<?
if ($is_category && $mw_basic[cf_category_tab]) {
$category_list = explode("|", $board[bo_category_list]);
?>
<div class="category_tab">
<ul>
<? if (!$mw_basic[cf_default_category]) { ?>
<li <? if (!$sca) echo "class='selected'";?>><div><a href="<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>">전체</a></div></li>
<? } ?>
<? for ($i=0, $m=sizeof($category_list); $i<$m; $i++) { ?>
<li <? if (urldecode($sca) == $category_list[$i]) echo "class='selected'";?>><div><a
href="<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>&sca=<?=urlencode($category_list[$i])?>"><?=$category_list[$i]?></a></div></li>
<? } ?>
</ul>
</div>
<? } ?>
---------------------------------------------

댓글 작성

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

로그인하기

댓글 6개

지금 정상적으로 출력되는거 같은데요?
그누보드처럼, 누락없이 위에서 아래로 분류탭이 쌓였으면 싶어서.. ㅜㅜ

현재, 제 홈페이지는 분류탭을 클릭할 때마다 모양이 뒤죽박죽 틀어져요.
근데 왜 ul 에 height:30px 은 왜 주신거죠? li 에 height 값이 있는데.

그리고 li.selected 에 속성에서 height 값은 없어도 되지 않나요? li 에서 height 속성이 이미 있으니..

ul 과 li 속성에 position: relative; 포함해보세요.
ul 에 height:30px 값은 제가 포함시킨 게 아니라, 원래부터 있던 소스에요.

말씀하신대로 아래처럼 넣어봤는데도, 똑같네요.

http://www.funkick.net/bbs/board.php?bo_table=info 분류탭처럼 길이 일정하게해서 탭 전체에 링크를 걸고 싶은데..

어렵네요. ㅋ




--------------------------------
/* 분류탭 */
#mw_basic .category_tab {

margin-top:5px;
margin-bottom:0px;
padding:0px;
border-bottom:0px solid #515151;
}

#mw_basic .category_tab ul {
list-style:none;
margin:0;
padding:0;
*height:30px; /*분류탭 길이 일정하게*/
border-right:0px solid #ddd;
position: relative; /*분류탭 길이 일정하게*/
}

#mw_basic .category_tab ul li {
margin:0;
display:block;
float:left;
width:120px; /*분류탭 길이 일정하게*/
height:29px;
padding:0px 12px 0 12px;
background-color:#f1f1f1;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
position: relative; /*분류탭 길이 일정하게*/
}

*html #mw_basic .category_tab ul li {

width:120px; /*분류탭 길이 일정하게*/
height:30px;
}

#mw_basic .category_tab ul li div {
margin:7px 0 0 0;
}

#mw_basic .category_tab ul li a {
color:#515151;
font-weight:bold;
text-decoration:none;
}

#mw_basic .category_tab ul li.selected {
background-color:#515151;
height:31px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
}

#mw_basic .category_tab ul li.selected a {
color:#fff;
}
selected 에 있는 height:31px; 빼보시죠. 셀렉트에 height 값이 있는게...
12zeo 님 고맙습니다. 덕분에 정렬이 잘 되었네요. ^^

근데, 분류탭 전체에 링크를 걸 수 있는 방법은 없을까요?

배추베이직 분류탭 출력 코드 소스 부분입니다.

-------------------------------------

<?
if ($is_category && $mw_basic[cf_category_tab]) {
$category_list = explode("|", $board[bo_category_list]);
?>
<div class="category_tab">
<ul>
<? if (!$mw_basic[cf_default_category]) { ?>
<li <? if (!$sca) echo "class='selected'";?>><div><a href="<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>">전체</a></div></li>
<? } ?>
<? for ($i=0, $m=sizeof($category_list); $i<$m; $i++) { ?>
<li <? if (urldecode($sca) == $category_list[$i]) echo "class='selected'";?>><div><a
href="<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>&sca=<?=urlencode($category_list[$i])?>"><?=$category_list[$i]?></a></div></li>
<? } ?>
</ul>
</div>
<? } ?>

게시글 목록

번호 제목
284348
284336
284333
284332
284320
284318
284316
284313
284307
284306
284303
284298
284296
284290
284286
284280
284277
284272
284261
284259