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
Post a Comment