jQuery Tabs backgroundcolor issue

jQuery Tabs backgroundcolor issue

Hi jQuery community

I’m having trouble changing the color of the background behind the jQuery Tabs. As you see in the screenshot, I managed to change it into blue, but the problem is the white area in the middle. I can’t figure out where this belongs to in order to modify it.

Hopefully you guys can help me out here.

Thanks in advance


HTML file:

  1. <body>
  2. <div id="toolbar">
  3. Toolbar
  4. </div>
  5. <div id="tabs">
  6. <ul>
  7. <li><a href="#tabs-1">Benutzerverwaltung</a></li>
  8. <li><a href="#tabs-2">Beitragsverwaltung</a></li>
  9. <li><a href="#tabs-3">Datenbankeinstellungen</a></li>
  10. <li><a href="#tabs-4">Wartungsmodus</a></li>
  11. </ul>
  12. <div id="tabs-1">
  13. <div id="tabs-1-left">
  14. <label>Username:</label>
  15. <br>
  16. <input type="text" id="new_user_name" style="font-size: 14px" value=""></input>
  17. <br>
  18. <label>Password:</label>
  19. <br>
  20. <input type="password" id="new_user_pw1" style="font-size: 14px"></input>
  21. <br>
  22. <label>Password:</label>
  23. <br>
  24. <input type="password" id="new_user_pw2" style="font-size: 14px"></input>
  25. <br>
  26. <br>
  27. <button type="submit" onclick="createUser()" style="font-size:14px; width:100%;">Benutzer anlegen</button>
  28. </div>
  29. <div id="tabs-1-middle">
  30. <ol id="user"></ol>
  31. </div>
  32. <div id="tabs-1-right" style="display:none;">
  33. <label>Username:</label>
  34. <label id="selected_user_name" style="font-size: 14px"></label>
  35. <br>
  36. <label>User ID:</label>
  37. <label id="selected_user_id" style="font-size: 14px"></label>
  38. <br>
  39. <label>Last login:</label>
  40. <label id="selected_user_lastlogin" style="font-size: 14px"></label>
  41. <br>
  42. <br>
  43. <button type="submit" style="font-size:14px; width:150px;">Edit Username</button>
  44. <br>
  45. <button type="submit" style="font-size:14px; width:150px;">Reset Password</button>
  46. <br>
  47. <button type="submit" id="delete_user" style="font-size:14px; width:150px;">Delete User</button>
  48. </div>
  49. </div>
  50. <div id="tabs-2">
  51. TabContainer 2
  52. </div>
  53. <div id="tabs-3">
  54. TabContainer 3
  55. </div>
  56. <div id="tabs-4">
  57. TabContainer 4
  58. </div>
  59. <footer>
  60. Copyright...
  61. </footer>
  62. <p style="margin-top:440px; color:white;">***Here ends the tabs div***</p>
  63. </div>
  64. <div id="dialog_remove_user" title="Benutzer löschen?" style="display:none;">
  65. <p>
  66. <span class="ui-icon ui-icon-alert" style="float:left; margin-top: 5px; margin-right: 5px;"></span>
  67. <font size="2"> Sind Sie sicher dass Sie diesen Benutzer löschen möchten? Dieser Vorgang kann nicht rückgängig gemacht werden.</font>
  68. </p>
  69. </div>
  70. </body>



CSS file:

  1. body {
  2. background-color: rgba(43,43,43,1);
  3. }

  4. #toolbar {
  5. background-color: gray;
  6. width: 98%;
  7. border: solid;
  8. border-width: 1px;
  9. border-radius: 5px;
  10. border-color: black;
  11. }

  12. #tabs-1-left {
  13. width: 18%;
  14. float: left;
  15. margin-top: 20px;
  16. padding: 20px;
  17. border: solid;
  18. border-width: 2px;
  19. }

  20. #tabs-1-middle {
  21. width: 20%;
  22. float: left;
  23. margin-top: 20px;
  24. margin-left: 15%;
  25. }

  26. #tabs-1-right {
  27. float: left;
  28. margin-top: 20px;
  29. margin-left: 5%;
  30. }

  31. footer {
  32. background-color: gray;
  33. }

  34. /* TABS */
  35. .ui-tabs{
  36. background-color: blue;
  37. height: 850px;
  38. overflow: auto;
  39. }

  40. .ui-tabs .ui-tabs-panel {
  41. background-color: orange;
  42. overflow: auto;
  43. }


  44. /* SELECTABLES */
  45. #feedback {
  46. font-size: 1.4em;
  47. }
  48. #user .ui-selecting {
  49. background: #FECA40;
  50. }
  51. #user .ui-selected {
  52. background: #F39814;
  53. color: white;
  54. }
  55. #user {
  56. list-style-type: none;
  57. margin: 0;
  58. padding: 0;
  59. width: 60%;
  60. }
  61. #user li {
  62. margin: 3px;
  63. padding: 0.4em;
  64. font-size: 14px;
  65. height: 18px;
  66. }


Screenshot: