탭메뉴인데 이게 문제가 좀..... 정보
탭메뉴인데 이게 문제가 좀.....
본문
근데 그럼처럼 나옵니다
css 고수분들 수정 좀 부탁드립니다.
<html>
<head>
<meta name="generator">
<title>제목 없음</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
</head>
<body>
<script type="text/javascript" src="http://www.webpeace.net/js/jquery-1.4.2.min.js"></script>
<style type="text/css">
.tab{position:relative; clear:both; width:100%;}
.tab ul{float:left; clear:both; width:100%; border-bottom:1px solid #999;}
.tab ul *{float:left; line-height:15px;}
.tab ul li{margin:0 -1px -1px 0;}
.tab ul li span{border:1px solid #c7c7c7; border-bottom:0; background:#f1f1f1;}
.tab ul li span a{padding:10px 20px 9px; color:#777; text-decoration:none;}
.tab ul li.selected span{position:relative; margin-right:1px; border:1px solid #999; border-bottom:0; background:#fff;}
.tab ul li.selected span a{border-bottom:1px solid #fff; color:#000; font-weight:bold; letter-spacing:-1px;}
/* Tab Strain */
.strain li span{margin-top:5px;}
.strain li.selected span{margin-top:0px;}
.strain li.selected span a{padding-top:15px;}
/* Layout */
.section{margin-bottom:10px;}
/* Tab Content */
.tab_content{padding:10px; border:1px solid #999; border-top:0; font-size:12px;}
.tab_content pre{font-size:12px;}
</style>
<script type="text/javascript">
$(document).ready(function(){$(".section .tab").each(function(){var target, n1, dct = new Array();$("li", $(this)).each(function(){target = $(this).parent().parent().next().children();if($(this).hasClass("selected")){dct[n1] = $(this).index();}$(this).mouseover/* click or mouseover */(function(){$("li", $(this).parent()).each(function(){$(this).removeClass();});$(this).addClass("selected");var b = $($(this).parent());b = $($(b.parent()).next().children());b.each(function(){$(this).hide();});$(b[$(this).index()]).show();});});$(target.parent()).each(function(){$($(this).children()).each(function(){$(this).hide();});$($($(this).children())[dct[n1]]).show();});});});
</script>
<div class="section">
<div class="tab">
<ul>
<li class="selected"><span><a href="#">Tab#1</a></span></li>
<li><span><a href="#">Tab#2</a></span></li>
<li><span><a href="#">Tab#3</a></span></li>
<li><span><a href="#">Tab#4</a></span></li>
</ul>
</div>
<div class="tab_content">
<div>
Tab Content#1
</div>
<div>
Tab Content#2
</div>
<div>
Tab Content#3
</div>
<div>
Tab Content#4
</div>
</div>
</div>
</body>
</html>
댓글 전체
.tab ul{float:left; clear:both; width:100%; border-bottom:1px solid #999;}
위 부분이 상위값 상속받아서 그렇습니다.마진 0추가해보세요
.tab ul{float:left; clear:both; width:100%; border-bottom:1px solid #999; margin:0;}
위 부분이 상위값 상속받아서 그렇습니다.마진 0추가해보세요
.tab ul{float:left; clear:both; width:100%; border-bottom:1px solid #999; margin:0;}
님 좀 짱~!!
감사합니다... 잘 되네요^^
근데 그렇게 하니까 마지막탭의 오른쪽 라인이 안보이는데요
근데 그렇게 하니까 마지막탭의 오른쪽 라인이 안보이는데요
저도 이렇게 답변 해드리려고 했는데
ie만 문제 해결 됩니다
편하게 탭 메뉴 다른 것 알아 보심이 ^^;;
ie만 문제 해결 됩니다
편하게 탭 메뉴 다른 것 알아 보심이 ^^;;
문서에 DTD선언하시고 css리셋부터해서 스타일잡으면 브라우저 상관없이 됩니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
dtd 4.01 선언해서 확인해 보았는데
css 많이 손보아야 할듯.
<html xmlns="http://www.w3.org/1999/xhtml">
dtd 4.01 선언해서 확인해 보았는데
css 많이 손보아야 할듯.
