Getting started with JQuery UI

Getting started with JQuery UI

Hi,
I have the following html code that I want to enhance with the JQuery UI. I want to make the anchor links into
buttons. The style tag was produced by Coffecup Software. 

Am I adding the JQuery UI stylesheet right?

Do I have to include a class with the anchors? 

The example I looked at included the stylesheet and js files and anchors were displayed as buttons with no further coding. So would the Coffecup styling be interfering?

I am not sure what to do with the UI functionality to reproduce this since all they seemed to do was include the stylesheet and js files and everything just worked.

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>Your Title</title>

  8. <style type="text/css" media="screen">
  9. html, body { margin: 0; padding: 0; }
  10. body { color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
  11. h2 { color: #333; }
  12. a { color: #337810; }
  13. p { margin: 0 0 18px; }
  14. #wrapper { float: left; width: 100%; }
  16. /* Header */
  17. #header { background: #fff; border-bottom: 2px solid #ddd; }
  18. #header h1   { color: #004b6f; margin: 0 0 3px; padding: 24px 18px 0; }
  19. #header p { color: #666; font-size: 11px; font-weight: bold; padding: 0 18px; }
  21. /* Content Style */
  22. #navigation { border-bottom: 1px solid #ccc; padding-left: 18px; }
  23. #navigation ul { padding: 0 18px 9px; }
  24. #content { border-bottom: 1px solid #ccc; margin: 0 18px 9px; }
  25. #extra { margin: 0 0 0 18px; }
  26. #extra small { font-size: 11px; line-height: 18px; }
  27. #content p, #extra p { padding-right: 18px; }
  29. /* Content Positioning and Size */
  30. #navigation { float: left; width: 200px; margin-left: -100%; }
  31. #content { margin-left: 243px; }
  32. #extra { clear: left; } /* Footer */
  33. #footer { background: #B26B6B; border-bottom: 2px solid #999; clear: both; width: 100%; }
  34. #footer a { color: #eee; }
  35. #footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
  36. #footer ul { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
  37. #footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
  38. </style>
  39. <!--[if IE]>
  40. <style type="text/css">
  41.    #navigation, #content, #extra { margin-top: 20px; }
  42. </style>
  43. <![endif]-->
  44. <link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
  45. <script type="text/javascript" src="lib/jquery-1.10.2.js"></script>
  46. <script type="text/javascript" src="lib/jquery-ui-1.10.4.custom.js"></script>
  47. </head><body>
  48. <div id="container">
  49. <div id="header">
  50. <div style="text-align: center;"><img  src="lane.png" width="1024" height="200" alt="" title="" /></div>
  52. </div>
  53. <div id="wrapper">
  54. <div id="content">
  55. <h2>Under Construction</h2>
  56. <img src="Under-Construction-1.gif" width="300" height="300" alt="" title="" /> 
  57. <p>Phone</p>
  58. <p>Fax</p>
  59. <p>Mobile</p>
  60. </div>
  61. </div>
  62. <div id="navigation">
  63. <ul>
  64. <li><a href="index.html" class="ui-button:a">Home</a></li>
  65.         <li><a href="Services.html">Services</a></li>
  66. <li><a href="About.html">About</a></li>
  67. <li><a href="Contact.html">Contact</a></li>
  69. </ul>
  70. </div>
  71. <div id="extra">
  74. </div>
  75. <div id="footer">
  76. <ul>    
  77. <li><a href="index.html">Home</a></li>
  78. <li><a href="Services.html">Services</a></li>
  79. <li><a href="About.html">About</a></li>
  80. <li><a href="Contact.html">Contact</a></li>
  81. </ul>
  82. </div>
  83. </div>
  84. </body>
  85. </html>