You are not logged in.

  • Login

div-Layer Problem (Überlappung)

pheno

Trainee

  • "pheno" started this thread

Posts: 9

  • Send private message

1

Tuesday, August 5th 2008, 7:08pm

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

Cascading Style Sheets

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

/*------------------- Main ----------------------- */
body{
background-color:#665849;
background-image:url(images/headerbg.gif);
background-position:top;
background-repeat:repeat-x;
margin:0px;
width:auto;
}
 
html, body {
margin: 0;
padding: 0;
height: 100%;
}
 
#main{
margin:0px auto; /*Zentrierung sämtlicher div-Layer*/
width:1000px;
z-index:1;
}
/*------------------ Header --------------------*/
#imprint {
height:29px;
line-height:29px;
}
#logo {
background-image:url(images/logo.gif);
background-repeat:no-repeat;
height:109px;
width:229px;
}
#navigation {
height:33px;
line-height:33px;
}
/*------------------ Content --------------------*/
#comment {
float:right;
background-color:#EEEDE8;
border: 1px solid #000000;
height:auto;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
padding-top:15px;
width:30%;
}
#commentBox{
background-color:#DBDAD6;
border: 1px solid #999895;
padding: 8px 8px 8px 8px;
}
#commentEditfeld {
float:right;
}
#commentEditfeldDescription{
float:left;
}
#content {
float:left;
background-color:#EEEDE8;
border: 1px solid #000000;
height:auto;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
padding-top:15px;
width:60%;
}
#contentKategorie {
float:left;
}
#contentDatum {
float:right;
}
#contentspacer {
float:left;
height:auto;
width:29px;
}
#spacer {
height:29px;
width:1000px;
}
/*------------------ Footer ---------------------*/
#footer{
background-color:#665849;
background-image:url(images/footerbg.gif);
background-repeat:repeat-x;
bottom: 0 !important;
bottom: -1px;
height:131px;
position: absolute;
width:100%;
z-index:2;
}
/*------------------ Font -----------------------*/
.comment {
color:#585857;
font-family: Tahoma, Arial;
font-size:9pt;
text-decoration:none;
text-align:justify;
}
.commentBox {
color:#333333;
font-family: Tahoma, Arial;
font-size:9pt;
text-decoration:none;
font-weight:bold;
}
.commentDescription {
color:#333333;
font-family: Tahoma, Arial;
font-size:8pt;
text-decoration:none;
}
.commentUser {
color:#333333;
font-family: Tahoma, Arial;
font-size:8pt;
text-decoration:none;
font-weight:bold;
}
.commentMitteilung {
color:#333333;
font-family: Tahoma, Arial;
font-size:8pt;
text-decoration:none;
font-weight:bold;
}
.commentDatum {
color:#333333;
font-family: Tahoma, Arial;
font-size:8pt;
text-decoration:none;
}
.content {
color:#585857;
font-family: Tahoma, Arial;
font-size:9pt;
text-decoration:none;
text-align:justify;
}
.contentHeadline {
color:#585857;
font-family: Tahoma, Arial;
font-size:16pt;
text-decoration:none;
}
.contentKategorie {
color:#585857;
font-family: Tahoma, Arial;
font-size:8pt;
text-decoration:none;
}
.contentDatum {
color:#585857;
font-family: Tahoma, Arial;
font-size:8pt;
text-decoration:none;
}
.imprint {
color:#A0A09B;
font-family: Tahoma, Arial;
font-size:10pt;
text-decoration:none;
text-align:center;
}
.imprint a:active, a:link, a:visited{
color:#A0A09B;
font-family: Tahoma, Arial;
font-size:10pt;
text-decoration:none;
}
.imprint a:hover {
color:#E82C35;
font-family: Tahoma, Arial;
font-size:10pt;
text-decoration:none;
}
.navigation {
color:#A0A09B;
font-family: Tahoma, Arial;
font-size:10pt;
text-decoration:none;
text-align:center;
}
.navigation a:active, a:link, a:visited{
color:#A0A09B;
font-family: Tahoma, Arial;
font-size:10pt;
text-decoration:none;
}
.navigation a:hover {
color:#E82C35;
font-family: Tahoma, Arial;
font-size:11pt;
text-decoration:none;
font-weight:bold;
}

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Senca.de</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="main">
	<div id="imprint" align="right">
		<span class="imprint">
			<a href="#">Impressum</a> | <a href="#">Kontakt</a> | <a href="#">Sitemap</a>	
		</span>
 
	</div>
	<div id="logo" align="left"></div>
	<div id="navigation" align="left">
		<span class="navigation">
			<a href="#"><b>Login</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#">Startseite</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#">Content</a>&nbsp;&nbsp;&nbsp;&nbsp;
 
			<a href="#">Blog</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#">G&auml;stebuch</a>			
		</span>
	</div>
	<div id="spacer"></div>
	<div>
		<div id="content">
			<div>
 
				<span class="contentHeadline">
					Dies ist eine &Uuml;berschrift einer neuen Mitteilung
				</span>
			</div>	
			<div>
				<div id="contentKategorie" align="left">
					<span class="contentKategorie">
						Kategorie: Neues von Senca.de
					</span>
				</div>
 
				<div id="contentDatum" align="right">
					<span class="contentDatum">
						Datum: 2. August 2008
					</span>
				</div>
			</div>
 
			<br />
			<hr />
 
			<div>
 
				<span class="content">
					C O N T E N T | LoremLorem ipsum mel ea esse paulo consulatu, dicit facilisi salutatus ut nam.
					Ex deleniti sadipscing nec, ex dolor atomorum per. Aeque salutatus quaerendum 
					ei vel, has vero aliquam aliquando ea. Viderer placerat nam ne. Est et placerat 
					definiebas, zzril dictas ut sit, sapientem comprehensam vis at. Usu cu debet 
					phaedrum. Eos at corpora adipisci signiferumque.<br /><br />
					Te brute libris referrentur cum, mazim omnes eum ea, malis facete pro at. 
					Vis eu odio singulis, sea primis latine ut, accumsan sententiae in vix. Sit ut porro 
					idisse. Epicuri oportere ne vix, enim duis consequat vix cu. Vel ea veritus delicata,
					assum periculis gubergren sea ex. Cu solum euismod est, ea sit facete quaestio 
					efficiendi. Cum id modus volumus officiis, id rebum corpora interesset quo, 
					harum voluptua conceptam cu eum.<br /><br />
					Placerat inimicus adolescens ne vim, eum legimus vulputate at. Pri cu omittam i
					nsolens. Aperiam atomorum expetendis ea nam. Ex errem homero cotidieque
					nam, in augue eirmod nam.Et vitae putant sententiae pri. Cu his affert probatus 
					voluptatum, illum oporteat vis cu. Ea quo mollis ornatus imperdiet, denique 
					vituperatoribus id vis. Ius eu choro repudiare sententiae.
				</span>
			</div>
		</div>
		<div id="contentspacer">&nbsp;</div>
 
		<div id="comment">
			<div id="commentBox">
					<span class="commentBox">
						Kommentare
					</span>
			</div>
			<div align="center">
					<span class="commentDescription">
						Textmitteilung: 160 Zeichen, BB-Codes erlaubt.
					</span>				
			</div>
 
			<hr />
 
			<div>
				<div align="left">
					<span class="commentUser">
						Username
					</span>
				</div>
				<div>
					<span class="comment">
						C O M M E N T | Lorem ipsum mel ea esse paulo consulatu, dicit facilisi salutatus ut nam.
						Ex deleniti sadipscing nec, ex dolor atomorum per. Aeque salutatus quaerendum 
						ei vel, has vero aliquam aliquando ea. Viderer placerat nam ne. Est et placerat 
						definiebas, zzril dictas ut sit, sapientem comprehensam vis at. Usu cu debet 
						phaedrum. Eos at corpora adipisci signiferumque.<br /><br />
					</span>
				</div>
				<div align="right">
					<span class="commentDatum">
						02.08.2008, 22:22
					</span>
				</div>				
			</div>
 
			<br />
 
			<div>
				<div id="commentEditfeldDescription">
					<span class="commentUser">
						Name
					</span>
				</div>
				<div id="commentEditfeld">
					Editfeld einfügen
				</div>
			</div>
 
			<br />
 
			<div>
				<div id="commentEditfeldDescription">
					<span class="commentMitteilung">
						Mitteilung
					</span>
				</div>
				<div id="commentEditfeld">
					Editfeld II einfügen
				</div>
			</div>
 
			<br />
 
			<div>
				Absenden button
			</div>
		</div>
	</div>
 
	<br />
 
	<div id="spacer">&nbsp;</div>
 
	<br />
 
</div>
<div id="footer"></div>
</body>
</html>

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

2

Tuesday, August 5th 2008, 10:11pm

Du warst schon an der richtigen Stelle.

Cascading Style Sheets

 
1

z-index:-1
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

pheno

Trainee

  • "pheno" started this thread

Posts: 9

  • Send private message

3

Wednesday, August 6th 2008, 6:27pm

Perfekt.
Funktioniert, danke.

Similar threads

Tagging

Social bookmarks