모바일에서는 css가 동작을 하지 않습니다.
본문
pc에서는 정상 작동하는데 모바일에서는 탭 자체가 없네요..
왜 그런지 모르겠습니다.ㅜㅜ
<div id="sub_cont">
<? include ('../inc/leftmenu01.php'); ?>
<div class="cont" style="height:550px;">
<div class="stitle"><img src="<?=G5_URL?>/images/about/stitle07.gif" alt="찾아오시는길" /></div>
<div class="clear">
<div id="cont_tab">
<div class="over"><a href="../about/about_07.php" class="tab">내용</a></div>
<div class="normal"><a href="../about/about_07_01.php" class="tab">내용</a></div>
</div>
<div>
css 부분
/*서브tab*/
#cont_tab {clear:both; width:100%; height:40px; border-bottom:solid 1px #444;}
#cont_tab .over {float:left; background:#000; margin:0 2px 0 0; padding:10px;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
#cont_tab .normal {float:left; background:#666; margin:0 2px 0 0; padding:10px;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
a.tab:link, a.tab:visited {color:#fff;text-decoration:none}
a.tab:hover, a.tab:focus, a.tab:active {color:#fff;text-decoration:underline}
.hr_none {height:10px; clear:both;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}