그누 스킨 게시판처럼, 분류탭을 일정 길이로 정돈되게 쌓고 싶습니다. 정보
그누 스킨 게시판처럼, 분류탭을 일정 길이로 정돈되게 쌓고 싶습니다.
본문
현재 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>
<? } ?>
---------------------------------------------
댓글 전체
지금 정상적으로 출력되는거 같은데요?
그누보드처럼, 누락없이 위에서 아래로 분류탭이 쌓였으면 싶어서.. ㅜㅜ
현재, 제 홈페이지는 분류탭을 클릭할 때마다 모양이 뒤죽박죽 틀어져요.
현재, 제 홈페이지는 분류탭을 클릭할 때마다 모양이 뒤죽박죽 틀어져요.
근데 왜 ul 에 height:30px 은 왜 주신거죠? li 에 height 값이 있는데.
그리고 li.selected 에 속성에서 height 값은 없어도 되지 않나요? li 에서 height 속성이 이미 있으니..
ul 과 li 속성에 position: relative; 포함해보세요.
그리고 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;
}
말씀하신대로 아래처럼 넣어봤는데도, 똑같네요.
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>
<? } ?>
근데, 분류탭 전체에 링크를 걸 수 있는 방법은 없을까요?
배추베이직 분류탭 출력 코드 소스 부분입니다.
-------------------------------------
<?
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>
<? } ?>
