css3 - CSS - Keeping Navigation Tab Move In Place or Top -


have tweaked coding found - prefer tab navigation - keep div in place , not flip top , lose placement.

so when clicking on navigation tab - pops area , puts headers/tabs above things are. keep navigation clean , stationary...

any ideas/thoughts appreciated..

<script type="text/javascript" src="addclasskillclass.js"></script> <script type="text/javascript" src="attachevent.js"></script> <script type="text/javascript" src="addcss.js"></script> <script type="text/javascript" src="tabtastic.js"></script>  <style type="text/css">     .tabset_tabs    { margin:0; padding:0; list-style-type:none; position:relative; white-space:nowrap }     .tabset_tabs li { margin-left: 1%; padding:2px; display:inline }     .tabset_tabs  {          font-family: verdana; font-size: 12pt; font-weight: normal;         color:#fff ! important;          <cfoutput>background-color:#set.fcol#; ! important; </cfoutput>         border:1px solid #99c;          text-decoration:none;          padding-left:7px;          padding-right:7px;          border-left-width:1px;          border-bottom:none      }     .tabset_tabs a:hover    { color:pink ! important; background-color:#eff ! important }     <cfoutput>         .tabset_tabs a.active   {              color:fff ! important;              background-color:#set.bcol# ! important;              border-color:black;              border-left-width:1px;              cursor:default;              border-bottom:white;              padding-left:7px;              padding-right:7px;          }     </cfoutput>      .tabset_tabs li.firstchild    { border-left-width:1px }      .tabset_content {          margin-left:1%;          margin-right:1%;          border:1px solid black;          background-color:white;          position:relative;          z-index:1;          padding:5px;          display:none }     .tabset_label   { display:none }      .tabset_content_active  {          display:block;         padding:5px;          <cfoutput>background-color:#set.fcol#; ! important; </cfoutput>     }      @media aural{     .tabset_content,     .tabset_label   { display:block }     } </style>  <ul class="tabset_tabs">     <li><a href="#sg" class="active"><b>signed up</b></a></li>     <li><a href="#r"><b>requests</b></a></li>     <li><a href="#f"><b>finance</b></a></li>     <li><a href="#s"><b>settings</b></a></li> </ul> <div id="sg" class="tabset_content">     <br>         stuff here       <br> </div> <div id="r" class="tabset_content">     <br>         other stuff here...     <br> </div> <div id="f" class="tabset_content">     <br>         more stuff       <br> </div> 


Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -