div-Layer Problem (Überlappung)

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

  • div-Layer Problem (Überlappung)

    Hallo,

    hoffe mir kann jemand helfen.
    Mein Problem ist, dass sich ein Layer (footer) über den anderen Layer (main) gelegt hat.
    Habe versucht mit z-index die Überlappung aufzuheben, funktioniert aber leider nicht so gewünscht, wie erwartet.
    Hat jemand eine Idee wie man das lösen kann? Der Footer-Layer soll einfach unter dem anderen Layer angezeigt werden, sodass die anderen div-Boxen wieder zum Vorschein kommen.

    Wäre über eine Antwort sehr dankbar.

    Gruß

    pheno

    Livedemo
    Bitte klicken

    Quellcode

    1. /*------------------- Main ----------------------- */
    2. body{
    3. background-color:#665849;
    4. background-image:url(images/headerbg.gif);
    5. background-position:top;
    6. background-repeat:repeat-x;
    7. margin:0px;
    8. width:auto;
    9. }
    11. html, body {
    12. margin: 0;
    13. padding: 0;
    14. height: 100%;
    15. }
    17. #main{
    18. margin:0px auto; /*Zentrierung sämtlicher div-Layer*/
    19. width:1000px;
    20. z-index:1;
    21. }
    22. /*------------------ Header --------------------*/
    23. #imprint {
    24. height:29px;
    25. line-height:29px;
    26. }
    27. #logo {
    28. background-image:url(images/logo.gif);
    29. background-repeat:no-repeat;
    30. height:109px;
    31. width:229px;
    32. }
    33. #navigation {
    34. height:33px;
    35. line-height:33px;
    36. }
    37. /*------------------ Content --------------------*/
    38. #comment {
    39. float:right;
    40. background-color:#EEEDE8;
    41. border: 1px solid #000000;
    42. height:auto;
    43. padding-bottom:15px;
    44. padding-left:15px;
    45. padding-right:15px;
    46. padding-top:15px;
    47. width:30%;
    48. }
    49. #commentBox{
    50. background-color:#DBDAD6;
    51. border: 1px solid #999895;
    52. padding: 8px 8px 8px 8px;
    53. }
    54. #commentEditfeld {
    55. float:right;
    56. }
    57. #commentEditfeldDescription{
    58. float:left;
    59. }
    60. #content {
    61. float:left;
    62. background-color:#EEEDE8;
    63. border: 1px solid #000000;
    64. height:auto;
    65. padding-bottom:15px;
    66. padding-left:15px;
    67. padding-right:15px;
    68. padding-top:15px;
    69. width:60%;
    70. }
    71. #contentKategorie {
    72. float:left;
    73. }
    74. #contentDatum {
    75. float:right;
    76. }
    77. #contentspacer {
    78. float:left;
    79. height:auto;
    80. width:29px;
    81. }
    82. #spacer {
    83. height:29px;
    84. width:1000px;
    85. }
    86. /*------------------ Footer ---------------------*/
    87. #footer{
    88. background-color:#665849;
    89. background-image:url(images/footerbg.gif);
    90. background-repeat:repeat-x;
    91. bottom: 0 !important;
    92. bottom: -1px;
    93. height:131px;
    94. position: absolute;
    95. width:100%;
    96. z-index:2;
    97. }
    98. /*------------------ Font -----------------------*/
    99. .comment {
    100. color:#585857;
    101. font-family: Tahoma, Arial;
    102. font-size:9pt;
    103. text-decoration:none;
    104. text-align:justify;
    105. }
    106. .commentBox {
    107. color:#333333;
    108. font-family: Tahoma, Arial;
    109. font-size:9pt;
    110. text-decoration:none;
    111. font-weight:bold;
    112. }
    113. .commentDescription {
    114. color:#333333;
    115. font-family: Tahoma, Arial;
    116. font-size:8pt;
    117. text-decoration:none;
    118. }
    119. .commentUser {
    120. color:#333333;
    121. font-family: Tahoma, Arial;
    122. font-size:8pt;
    123. text-decoration:none;
    124. font-weight:bold;
    125. }
    126. .commentMitteilung {
    127. color:#333333;
    128. font-family: Tahoma, Arial;
    129. font-size:8pt;
    130. text-decoration:none;
    131. font-weight:bold;
    132. }
    133. .commentDatum {
    134. color:#333333;
    135. font-family: Tahoma, Arial;
    136. font-size:8pt;
    137. text-decoration:none;
    138. }
    139. .content {
    140. color:#585857;
    141. font-family: Tahoma, Arial;
    142. font-size:9pt;
    143. text-decoration:none;
    144. text-align:justify;
    145. }
    146. .contentHeadline {
    147. color:#585857;
    148. font-family: Tahoma, Arial;
    149. font-size:16pt;
    150. text-decoration:none;
    151. }
    152. .contentKategorie {
    153. color:#585857;
    154. font-family: Tahoma, Arial;
    155. font-size:8pt;
    156. text-decoration:none;
    157. }
    158. .contentDatum {
    159. color:#585857;
    160. font-family: Tahoma, Arial;
    161. font-size:8pt;
    162. text-decoration:none;
    163. }
    164. .imprint {
    165. color:#A0A09B;
    166. font-family: Tahoma, Arial;
    167. font-size:10pt;
    168. text-decoration:none;
    169. text-align:center;
    170. }
    171. .imprint a:active, a:link, a:visited{
    172. color:#A0A09B;
    173. font-family: Tahoma, Arial;
    174. font-size:10pt;
    175. text-decoration:none;
    176. }
    177. .imprint a:hover {
    178. color:#E82C35;
    179. font-family: Tahoma, Arial;
    180. font-size:10pt;
    181. text-decoration:none;
    182. }
    183. .navigation {
    184. color:#A0A09B;
    185. font-family: Tahoma, Arial;
    186. font-size:10pt;
    187. text-decoration:none;
    188. text-align:center;
    189. }
    190. .navigation a:active, a:link, a:visited{
    191. color:#A0A09B;
    192. font-family: Tahoma, Arial;
    193. font-size:10pt;
    194. text-decoration:none;
    195. }
    196. .navigation a:hover {
    197. color:#E82C35;
    198. font-family: Tahoma, Arial;
    199. font-size:11pt;
    200. text-decoration:none;
    201. font-weight:bold;
    202. }
    Alles anzeigen

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. <title>Senca.de</title>
    6. <link href="css.css" rel="stylesheet" type="text/css">
    7. </head>
    9. <body>
    10. <div id="main">
    11. <div id="imprint" align="right">
    12. <span class="imprint">
    13. <a href="#">Impressum</a> | <a href="#">Kontakt</a> | <a href="#">Sitemap</a>
    14. </span>
    16. </div>
    17. <div id="logo" align="left"></div>
    18. <div id="navigation" align="left">
    19. <span class="navigation">
    20. <a href="#"><b>Login</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    21. <a href="#">Startseite</a>&nbsp;&nbsp;&nbsp;&nbsp;
    22. <a href="#">Content</a>&nbsp;&nbsp;&nbsp;&nbsp;
    24. <a href="#">Blog</a>&nbsp;&nbsp;&nbsp;&nbsp;
    25. <a href="#">G&auml;stebuch</a>
    26. </span>
    27. </div>
    28. <div id="spacer"></div>
    29. <div>
    30. <div id="content">
    31. <div>
    33. <span class="contentHeadline">
    34. Dies ist eine &Uuml;berschrift einer neuen Mitteilung
    35. </span>
    36. </div>
    37. <div>
    38. <div id="contentKategorie" align="left">
    39. <span class="contentKategorie">
    40. Kategorie: Neues von Senca.de
    41. </span>
    42. </div>
    44. <div id="contentDatum" align="right">
    45. <span class="contentDatum">
    46. Datum: 2. August 2008
    47. </span>
    48. </div>
    49. </div>
    51. <br />
    52. <hr />
    54. <div>
    56. <span class="content">
    57. C O N T E N T | LoremLorem ipsum mel ea esse paulo consulatu, dicit facilisi salutatus ut nam.
    58. Ex deleniti sadipscing nec, ex dolor atomorum per. Aeque salutatus quaerendum
    59. ei vel, has vero aliquam aliquando ea. Viderer placerat nam ne. Est et placerat
    60. definiebas, zzril dictas ut sit, sapientem comprehensam vis at. Usu cu debet
    61. phaedrum. Eos at corpora adipisci signiferumque.<br /><br />
    62. Te brute libris referrentur cum, mazim omnes eum ea, malis facete pro at.
    63. Vis eu odio singulis, sea primis latine ut, accumsan sententiae in vix. Sit ut porro
    64. idisse. Epicuri oportere ne vix, enim duis consequat vix cu. Vel ea veritus delicata,
    65. assum periculis gubergren sea ex. Cu solum euismod est, ea sit facete quaestio
    66. efficiendi. Cum id modus volumus officiis, id rebum corpora interesset quo,
    67. harum voluptua conceptam cu eum.<br /><br />
    68. Placerat inimicus adolescens ne vim, eum legimus vulputate at. Pri cu omittam i
    69. nsolens. Aperiam atomorum expetendis ea nam. Ex errem homero cotidieque
    70. nam, in augue eirmod nam.Et vitae putant sententiae pri. Cu his affert probatus
    71. voluptatum, illum oporteat vis cu. Ea quo mollis ornatus imperdiet, denique
    72. vituperatoribus id vis. Ius eu choro repudiare sententiae.
    73. </span>
    74. </div>
    75. </div>
    76. <div id="contentspacer">&nbsp;</div>
    78. <div id="comment">
    79. <div id="commentBox">
    80. <span class="commentBox">
    81. Kommentare
    82. </span>
    83. </div>
    84. <div align="center">
    85. <span class="commentDescription">
    86. Textmitteilung: 160 Zeichen, BB-Codes erlaubt.
    87. </span>
    88. </div>
    90. <hr />
    92. <div>
    93. <div align="left">
    94. <span class="commentUser">
    95. Username
    96. </span>
    97. </div>
    98. <div>
    99. <span class="comment">
    100. C O M M E N T | Lorem ipsum mel ea esse paulo consulatu, dicit facilisi salutatus ut nam.
    101. Ex deleniti sadipscing nec, ex dolor atomorum per. Aeque salutatus quaerendum
    102. ei vel, has vero aliquam aliquando ea. Viderer placerat nam ne. Est et placerat
    103. definiebas, zzril dictas ut sit, sapientem comprehensam vis at. Usu cu debet
    104. phaedrum. Eos at corpora adipisci signiferumque.<br /><br />
    105. </span>
    106. </div>
    107. <div align="right">
    108. <span class="commentDatum">
    109. 02.08.2008, 22:22
    110. </span>
    111. </div>
    112. </div>
    114. <br />
    116. <div>
    117. <div id="commentEditfeldDescription">
    118. <span class="commentUser">
    119. Name
    120. </span>
    121. </div>
    122. <div id="commentEditfeld">
    123. Editfeld einfügen
    124. </div>
    125. </div>
    127. <br />
    129. <div>
    130. <div id="commentEditfeldDescription">
    131. <span class="commentMitteilung">
    132. Mitteilung
    133. </span>
    134. </div>
    135. <div id="commentEditfeld">
    136. Editfeld II einfügen
    137. </div>
    138. </div>
    140. <br />
    142. <div>
    143. Absenden button
    144. </div>
    145. </div>
    146. </div>
    148. <br />
    150. <div id="spacer">&nbsp;</div>
    152. <br />
    154. </div>
    155. <div id="footer"></div>
    156. </body>
    157. </html>
    Alles anzeigen