Webseite - Ich finde den Fehler nicht

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Webseite - Ich finde den Fehler nicht

    Hallo,
    ich habe mal eine kleine Webseite erstellt, welche einfach nur dafür gedacht ist ein bisschen Text anzuzeigen.
    Allerdings habe ich ein Problem mit der Scrollbar.

    Dies ist die betroffene Seite http://fast-execution.de/test-bereich/

    Und hier ist mein Problem. Auf dem Bild sind die einzelnen divs Rot umrandet (Header und Footer gehen rechts über die Scrollbar. Das ist ein Fehler von mir in GIMP).
    Trotzdessen, dass die Seite hier nur so wenig content im Content div hat, wird die Scrollbar angezeigt.

    Da ich den Fehler selber nicht finde, hoffe ich, dass sich mir hier jemand helfen kann.

    [Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenanntvekpqrs6b5.png]


    Mein HTML-Code

    PHP-Quellcode

    1. ​<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Webseite</title>
    6. <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    7. </head>
    8. <body>
    9. <div id="header">
    10. <div id="headerInner">
    11. <div id="headerLogo">
    12. </div>
    13. <div id="headerHeadline">
    14. <h1>Fast-Execution</h1>
    15. </div>
    16. </div>
    17. </div>
    18. <div id="container">
    19. <div id="containerInner">
    20. <div id="MainMenu">
    21. <ul id="menu-bar">
    22. <li class="MainMenuItem" <?php if(isset($_GET['page']) && $_GET['page'] == 'Startseite'){ echo 'class="active"'; } ?>>
    23. <a href="index.php?page=startseite" title="Startseite" >
    24. Startseite
    25. </a>
    26. </li>
    27. <li class="MainMenuItem">
    28. <a href="index.php?page=test" title="Test" >
    29. Test
    30. </a>
    31. <ul>
    32. <li class="MainMenuItem"><a href="#">SubMenu Test 1</a></li>
    33. <li class="MainMenuItem"><a href="#">SubMenu Test 2</a></li>
    34. <li class="MainMenuItem"><a href="#">SubMenu Test 3</a></li>
    35. </ul>
    36. </li>
    37. </ul>
    38. </div>
    39. <div id="spacer"></div>
    40. <div id="content" class="div-box">
    41. <h2>Guten Tag</h2>
    42. <p>Dies ist eine Testseite von Fast-Execution.</p>
    43. <p>Es kann sein, dass die Seite nicht voll Funktionisfähig ist,</p>
    44. <p>weil manche Funktionen noch nicht geschrieben oder das Design noch nicht angepasst ist.</p>
    45. <p>Besuchen sie diese Seite zu einem späteren Zeitpunkt erneut.</p>
    46. <p>Vielleicht ist dann die gewünschte Funktion verfügbar.</p>
    47. </div>
    48. </div>
    49. </div>
    50. <div id="footer">
    51. <div id="footerInner">
    52. <div id="copyright">
    53. <p>Copyright 2014 <a href="http://fast-execution.de/">Fast-Execution</a></p>
    54. <p>Code and Design by <a>DestinatioN</a></p>
    55. </div>
    56. </div>
    57. </div>
    58. </body>
    59. </html>
    Alles anzeigen


    Meine CSS-Datei

    Quellcode

    1. ​body{
    2. position: absolute;
    4. height: 100%;
    5. min-height: 100%;
    6. width: 100%;
    7. min-width: 600px;
    9. top: 0px;
    10. left: 0px;
    12. background: #fff;
    14. color: #000;
    16. padding: 0px;
    17. margin: auto;
    19. font-family: Arial;
    20. font-size: 16px;
    21. line-height: 1.4em;
    22. font-weight: bold;
    23. }
    24. #header{
    25. position:fixed;
    26. height: auto;
    27. background-color: #2a5d84;
    28. color: #fff;
    29. width: 100%;
    30. z-index: 100;
    32. height: 70px;
    34. left: 0px;
    35. right: 0px;
    36. overflow:hidden;
    37. }
    38. #headerInner{
    39. width: 900px;
    40. margin: auto;
    41. }
    42. #headerLogo{
    44. }
    45. #headerHeadline{
    47. }
    48. #container{
    49. position: absolute;
    50. top: 90px;
    51. bottom: -55px;
    52. width: 100%;
    53. margin: auto;
    54. z-index: 1;
    55. overflow: auto;
    56. }
    57. #containerInner{
    58. width: 900px;
    59. margin: auto;
    60. }
    61. #menu-bar {
    62. position:relative;
    63. background: #2A5D84;
    64. height: 54px;
    65. line-height: 100%;
    66. margin: 0px;
    67. padding: 0px;
    68. z-index:100;
    69. }
    70. #menu-bar li {
    71. position: relative;
    72. margin: 0px 0px 0px 0px;
    73. padding: 0px 0px 0px 0px;
    74. float: left;
    75. list-style: none;
    76. }
    77. #menu-bar a {
    78. color: #FFFFFF;
    79. text-decoration: none;
    80. display: block;
    81. padding: 18px 20px 20px 20px;
    82. margin: 0;
    83. margin-bottom: 0px;
    85. font-weight: bolder;
    86. font-family: arial;
    87. font-style: normal;
    88. font-size: 18px;
    89. }
    90. #menu-bar li ul li a {
    91. margin: 0;
    92. }
    93. #menu-bar .active a, #menu-bar li:hover > a {
    94. background: #0399D4;
    95. color: #FFFFFF;
    96. }
    97. #menu-bar ul li:hover a, #menu-bar li:hover li a {
    98. background: none;
    99. color: #666;
    101. border: none;
    102. }
    103. #menu-bar ul a:hover {
    104. background: #0399D4 !important;
    105. color: #FFFFFF !important;
    106. }
    107. #menu-bar li:hover > ul {
    108. display: block;
    109. }
    110. #menu-bar ul {
    111. position: absolute;
    112. width: 200px;
    113. top: 54px;
    114. left: 0;
    115. background: #2A5D84;
    116. display: none;
    117. margin: 0;
    118. padding: 0;
    119. }
    120. #menu-bar ul li {
    121. float: none;
    122. margin: 0;
    123. padding: 0;
    124. }
    125. #menu-bar ul a {
    126. color:#FFFFFF !important;
    127. padding:10px 0px 10px 10px;
    129. font-size:16px;
    130. font-style:normal;
    131. font-family:arial;
    132. font-weight: normal;
    133. }
    134. #menu-bar ul li:first-child > a {
    135. margin-top: -5px;
    136. }
    137. #menu-bar ul li:last-child > a {
    139. }
    141. #menu-bar:after {
    142. display: block;
    143. content: ".";
    144. clear: both;
    145. visibility: hidden;
    146. line-height: 0;
    147. height: 0;
    148. }
    149. #menu-bar {
    150. display: inline-block;
    151. }
    152. html[xmlns] #menu-bar {
    153. display: block;
    154. }
    155. * html #menu-bar {
    156. height: 1%;
    157. }
    159. #spacer {
    160. width: 900px;
    161. height: 20px;
    162. }
    164. #content {
    165. position: relative;
    166. width: 900px;
    168. font-size: 18px;
    169. }
    171. #footer{
    172. position: fixed;
    173. height: 50px;
    174. background-color: #888;
    175. color: #fff;
    176. width: 100%;
    177. bottom: -1px;
    178. line-height: 0.8;
    179. word-wrap: break-word;
    180. font-size: 12px;
    181. overflow:hidden;
    182. }
    183. #footerInner{
    184. width: 900px;
    185. margin: auto;
    186. }
    187. #copyright{
    188. margin: auto;
    189. }
    Alles anzeigen



    Mit freundlichen Grüßen
    DestinatioN