분류탭 전체에 링크를 걸고 싶습니다. 정보
분류탭 전체에 링크를 걸고 싶습니다.
본문
오류 주소 : http://www.homzzang.com/process/0
글자 뿐만 아니라, 칸 전체에 링크를 걸고 싶은데, 어떻게 수정해줘야 할까요?
[현재 CSS]
/* 분류탭 */
#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;
}
#fboardlist { clear:both; }
[현재 출력 소스]
<?
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>
<? } ?>
글자 뿐만 아니라, 칸 전체에 링크를 걸고 싶은데, 어떻게 수정해줘야 할까요?
[현재 CSS]
/* 분류탭 */
#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;
}
#fboardlist { clear:both; }
[현재 출력 소스]
<?
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>
<? } ?>
댓글 전체
<a href="<?=$g4[bbs_path]?>/board.php?bo_table=<?=$bo_table?>"><li <? if (!$sca) echo "class='selected'";?>><div>전체</div></li> </a>

엔즈 님, 정말 고맙습니다. ^^ 이거 ...근 3년 만에 해결하네요. ㅎㅎ

엔즈 님, 그럼, 혹시, 그누보드 우측 사이드 메뉴처럼, 현재 선택된 탭 색깔은 유지된 채, 네비게이션 메뉴처럼 움직일 때마다 색깔이 변화게 하려면 어떻게 해야 할까요?
[css마스터전략] 책에서 가져온 소스를 응용했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stirct.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pixy Rollover</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}
/* css rollover
================================== */
div
{
width: 600px;
}
a:link, a:visited {
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
/* background: #94B8E9 url(img/button.gif) no-repeat left top;*/
background-color: #94B8E9;
text-indent: 50px;
float:left;
overflow:hidden;
}
a:hover {
/* background: #369 url(img/button-over.gif) no-repeat left top;*/
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body>
<div>
<a href="#">Join Today1!</a>
<a href="#">Join Today2!</a>
<a href="#">Join Today3!</a>
<a href="#">Join Today4!</a>
<a href="#">Join Today5!</a>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stirct.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pixy Rollover</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.4em;
}
/* css rollover
================================== */
div
{
width: 600px;
}
a:link, a:visited {
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
/* background: #94B8E9 url(img/button.gif) no-repeat left top;*/
background-color: #94B8E9;
text-indent: 50px;
float:left;
overflow:hidden;
}
a:hover {
/* background: #369 url(img/button-over.gif) no-repeat left top;*/
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body>
<div>
<a href="#">Join Today1!</a>
<a href="#">Join Today2!</a>
<a href="#">Join Today3!</a>
<a href="#">Join Today4!</a>
<a href="#">Join Today5!</a>
</div>
</body>
</html>

좋은 소스 고맙습니다. 나중에 요긴하게 써먹을 수 있을 것 같네요. ^^

또치0115 님, 혹시, 위 메뉴를 가로 정렬이 아닌 세로 200px로 세로로 쭉 정렬되게 하려면 어떻게 수정해줘야 할까요?