tinkertron Posted January 25, 2010 Share Posted January 25, 2010 I got the CSS layout from a website, but I want to add tabs to it. I don't know the first thing about CSS, but i'm learning. Can someone add these tabs to the header for me? Tabs: Database - index.html TechStats - techstats.html PendStats - pendstats.html OfficerStats - officerstats.html CourtDates - courtdates.html HearingDates - hearingdates.html Cont.Supv - contsupv.html ISF/SAFP - isfsafp.html Revoke - revoke.html I'm not looking for anything fancy, simple box tabs would do just fine. The only thing that I would like to see is if the client is on a page one of those page that the tab is a off set color from the rest, that way they would know what they are looking at. Your help is greatly appricated! Oh here's the CSS layout that I want to uses: <!--Force IE6 into quirks mode with this comment tag--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Dynamic Drive: CSS Top Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; top: 0; left: 0; width: 100%; height: 100px; /*Height of frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color: navy; color: white; } #maincontent{ position: fixed; top: 100px; /*Set top value to HeightOfFrameDiv*/ left: 0; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ } * html body{ /*IE6 hack*/ padding: 100px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/ } * html #maincontent{ /*IE6 hack*/ height: 100%; width: 100%; } </style> <script type="text/javascript"> /*** Temporary text filler function. Remove when deploying template. ***/ var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"] function filltext(words){ for (var i=0; i<words; i++) document.write(gibberish[Math.floor(Math.random()*3)]+" ") } </script> </head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Top Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <h1>Dynamic Drive CSS Library</h1> <p><script type="text/javascript">filltext(255)</script></p> <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p> </div> </div> </body> </html> Note: I did notice one issue with this CSS, once I remove the <script type="text/javascript"> /*** Temporary text filler function. Remove when deploying template. ***/ var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"] function filltext(words){ for (var i=0; i<words; i++) document.write(gibberish[Math.floor(Math.random()*3)]+" ") } </script> and put my own content in (a datagrid that is long) the scroll bars disappear. I need to be able to scroll up and down and left to right in the main content area only. The header stays in place. Can anyone help me on this too? Quote Link to comment https://forums.phpfreaks.com/topic/189701-adding-tabs-to-headers/ Share on other sites More sharing options...
haku Posted January 25, 2010 Share Posted January 25, 2010 I'll do it if you come mow my lawn and clean my toilet. Quote Link to comment https://forums.phpfreaks.com/topic/189701-adding-tabs-to-headers/#findComment-1001169 Share on other sites More sharing options...
tinkertron Posted January 25, 2010 Author Share Posted January 25, 2010 You got a deal, I hope you live near Dallas, Texas. I will do alittle shame work to get something back that would benefit me in the long run! Peace! Quote Link to comment https://forums.phpfreaks.com/topic/189701-adding-tabs-to-headers/#findComment-1001171 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.