Schule als Staat Projekt Web, Dokumente, etc.
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

130 строки
4.3KB

  1. <div id=header>
  2. <style>
  3. #logo {
  4. width: 90%;
  5. padding-left: 2%;
  6. padding-top: 2%;
  7. }
  8. .top-links {
  9. color: #929292;
  10. vertical-align: top;
  11. padding-top: 5px;
  12. text-align: center;
  13. }
  14. #logotablerow {
  15. padding-right: 2%;
  16. }
  17. #search {
  18. vertical-align: middle;
  19. }
  20. #search_icon {
  21. width: 80%;
  22. vertical-align: middle;
  23. padding-left: 0px;
  24. }
  25. table{
  26. border-collapse: collapse;
  27. border: none;
  28. }
  29. table tr{
  30. border: none;
  31. vertical-align: top;
  32. }
  33. table td{
  34. padding-left: 10px;
  35. padding-top: 2px;
  36. border: none;
  37. }
  38. .link-container {
  39. text-align: center;
  40. width: 10%;
  41. }
  42. .allcenter {
  43. vertical-align: middle;
  44. text-align: right;
  45. padding-right: 10px;
  46. }
  47. #search {
  48. font-size: 16pt;
  49. background: #D6D5D5;
  50. color: black;
  51. }
  52. #search:focus{
  53. font-size: 16pt;
  54. background: #D6D5D5;
  55. color: black;
  56. outline: none;
  57. }
  58. ul {
  59. list-style-type: none;
  60. position: relative;
  61. margin-left: 2%;
  62. margin-top: 20px;
  63. width: 96%;
  64. background: #D6D5D5;
  65. border: none;
  66. }
  67. li {
  68. float: left;
  69. width: 30%;
  70. margin-top: 0.5%;
  71. margin-bottom: 0.5%;
  72. vertical-align: middle;
  73. padding-left: 3%;
  74. color: #929292;
  75. }
  76. li a {
  77. display: block;
  78. color: #666;
  79. text-align: center;
  80. padding: 14px 16px;
  81. text-decoration: none;
  82. }
  83. .active {
  84. background: #9F2D17;
  85. color: white;
  86. }
  87. li a:hover:not(.active) {
  88. background: #929292;
  89. }
  90. </style>
  91. <table class="table">
  92. <tr>
  93. <td id ="logotablerow", width="20%">
  94. <img id="logo" src="apb_icon.jpeg" alt="logo">
  95. </td>
  96. <td class="link-container">
  97. <a class="top-links", href="www.tagesschau.de">tagesschau.de</a>
  98. </td>
  99. <td class="link-container">
  100. <a class="top-links", href="www.spiegel.de">spiegel.de</a>
  101. </td>
  102. <td class="link-container">
  103. <a class="top-links", href="www.zeit.de">zeit.de</a>
  104. </td>
  105. <td class="link-container">
  106. <a class="top-links", href="www.bpb.de">bpb.de</a>
  107. </td>
  108. <td vertical-align="middle", width="25%" class="allcenter">
  109. <input type="text" id="search" maxlength="30" placeholder="Datenbank durchsuchen">
  110. </td>
  111. <td width="5%" class="allcenter">
  112. <a href="https://www.dohiy.com/wp-content/uploads/2014/06/itsatrap.jpg"><img id="search_icon" src="search_icon.png" alt="search"></a>
  113. </td>
  114. </tr>
  115. </table>
  116. <div id="navigation">
  117. <ul>
  118. <li><a class="active" href="https://www.none.com">Gesetzesblatt</a></li>
  119. <li><a href="https://www.none.com">Datenbank</a></li>
  120. <li><a href="https://www.none.com">Mein Goethopia</a></li>
  121. </ul>
  122. </div>
  123. </div>