javascript - Tab Bar Content Box Overhangs Bottom of Page -
the code below tab box i've created. i'm having issue content in tab box hanging on bottom of page. believe fix added in .tab-content div, can't think of besides margin isn't working. there easy fix this?
javascript:
<script> $(document).ready(function(){ var activetabindex = -1; var tabnames = ["tab1","tab2","tab3"]; $(".tab-menu > li").click(function(e){ for(var i=0;i<tabnames.length;i++) { if(e.target.id == tabnames[i]) { activetabindex = i; } else { $("#"+tabnames[i]).removeclass("active"); $("#"+tabnames[i]+"-tab").css("display", "none"); } } $("#"+tabnames[activetabindex]+"-tab").fadein(); $("#"+tabnames[activetabindex]).addclass("active"); return false; }); }); </script> css:
<style> body{ background: #fff; margin:0; } .clear{ clear: both; height: 0; visibility: hidden; display: block; } { text-decoration: none; } #tab-container{ font-family: arial, verdana, helvetica, sans-serif; font-size: 14px; line-height:16px; margin: 1em auto; width: 700px; border:0px solid #ccc; height:28px; background:#e1eff8; padding-left: 0px; padding-top:10px; padding-bottom:13px; -moz-box-shadow: inset 0 -15px 2px #dadada; -webkit-box-shadow:inset 0 -20px 2px #dadada; box-shadow: inset 0-5px 10px #dadada; border-top-left-radius:10px; border-top-right-radius:10px; } #tab-container ul{ list-style: none; width: 100%; } #tab-container ul.tab-menu li{ display: block; float: left; position: relative; font-weight: 700; padding: 10px 20px 10px 20px; background: #eee; border: 1px solid #ddc; border-bottom: none; border-width: 1px; color: #999; cursor: default; height: 14px; margin-bottom: -1px; margin-right: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } #tab-container ul.tab-menu li.active{ background: #fff; color: #0088cc; height: 15px; border-bottom: 0; background: -moz-linear-gradient(top, #ebebeb, white 10%); background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white)); } .tab-top-border { border-bottom: 1px solid #d0ccc9; } .tab-content{ margin: auto; background: #efefef; background: #fff; border: 1px solid #ddc; border-top-style: none; text-align: left; padding: 10px; padding-bottom: 20px; padding-left: 25px; padding-right: 25px; font-size: 11px; display: none; height: auto; -moz-box-shadow: inset 0 -2px 2px #dadada; -webkit-box-shadow:inset 0 -2px 2px #dadada; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } #tab-container div.active{ display: block; } .tab-content h1{ line-height: 1em; height: 28px; font-size: 22px; } html:
<html> <body> <div id="tab-container"> <ul class="tab-menu"> <li id="tab1" class="active">tab 1</li> <li id="tab2">tab 2</li> <li id="tab3">tab 3</li> </ul> <div class="clear"></div> <div class="tab-top-border"></div> <div id="tab1-tab" class="tab-content active"> <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p> </div> <div id="tab2-tab" class="tab-content"> <p>tab 2 content.</p> </div> <div id="tab3-tab" class="tab-content"> <p>tab 3 content</p> </div> </div> </body> </html> here fiddle code: https://jsfiddle.net/16orqy9c/1/
i know it's kind of hard tell fiddle, said, content hangs on bottom of page. appreciated. thanks!
Comments
Post a Comment