Does anyone have a COMPLETE set of css elements and working HTML for the UI tabs?
I have spent the last two days trying to get the CSS to work for a simple set of tabs and it just doesnt want to play (all my fault - I'm useless with CSS). My page looks like this (its basically the example page). <!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";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script src="../david/script/jquery-1.2.6.js"></script> <script src="../david/script/jquery-ui-personalized-1.5.1.packed.js"></ script> <script> $(document).ready(function(){ $("#tabsEx1 > ul").tabs(); }); </script> <style> .ui-tabs-nav { /*resets*/ font-family: Verdana, Arial, sans-serif; float: left; position: relative; z-index: 1; border-right: 1px solid #09c7f6; bottom: -1px; } .ui-tabs-nav-item { /*resets*/ float: left; border: 1px solid #09c7f6; border-right: none; } .ui-tabs-nav-item a, li { float: left; font-size: 10px; font-weight: normal; text-decoration: none; padding: .5em 1.7em; color: #555555; background-color : #e6e6e6; background-repeat : repeat-x; background-position : 0 50%; background-image : url(flat_75.gif); } .ui-tabs-nav-item a:hover { background-color : #d2dadf; background-repeat : repeat-x; background-position : 0 50%; background-image : url(glass_75.gif); outline: 0; color: #212121; } .ui-tabs-selected { border-bottom-color: #ffffff; background-color:#CC0000; outline: 0; } .ui-tabs-selected a, .ui-tabs-selected a:hover { background-color: #ffffff; background-image: url(glass_65.gif); background-repeat:repeat-x; background-position : 0 50%; color: #222222; outline: 0; } .ui-tabs-panel { font-family: Verdana, Arial, sans-serif; clear:left; border: 1px solid #09c7f6; background: #ffffff; color: #222222; padding: 1.5em 1.7em; } .ui-tabs-hide { display: none;/* for accessible hiding: position: absolute; left: -99999999px*/; } .ui-tabs-nav li { display : inline; margin : 0; padding : 0; } .ui-tabs-nav ul { list-style : none; margin : 0; padding : 10px 0px 0 0px; } </style> </head> <body> <div id="tabsEx1"> <ul style="height: 30px;"> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default</p> </div> <div id="fragment-2"> <p><b>Second tab is active</b></p><br> <p>Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p><br> <ol> <li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li> <li>Same if you use the cookie option to save the latest selected tab in.</li> <li>Last not least you can set the selected tab by attaching the selected tab class class (default: "ui-tabs-selected") to one of the <code>li</code> elements representing a single tab.</li> </ol> </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> </body> </html> /* Page End I've use the ThemeRoller to generate the CSS and that works. When I take just the tabs section from it and include it into my page, it all breaks. Please someone HELP!!!!! Thanks in advance P
