✔ Wie z-index anwenden?

CEZ · 5. Juni 2009

Ja ich habe den Beitrag angewendet und den main_verlaengerung gelöscht. Verlängern tut die Seite sich nun über einen Hintergrund. Aber der obere Teil des Bildes will sich einfach nicht unten ausrichten. Hab den Quelltext mal beigefügt.

CSS:

HTML:

#abstand_bildbereich{
	width:193px;
	min-height:78px;
	height:auto !important;
	height:78px;
	float:left;
	position:relative;
}
#abstand_bildbereich_bild{
	width:193px;
	height:78px;
	background-image:url(../bilder/abstand_bildbereich_unten.png);
	position:absolute;
	left:0;
	bottom:0;
}

HTML

<div id="rahmen_bildbereich">
<div id="main_bildbereich"><img src="bilder/bild_bildbereich.png" alt="Bild" /></div>
<div id="abstand_bildbereich">
<div id="abstand_bildbereich_bild"></div>
</div>
</div>

Maik · 5. Juni 2009

Wenn der obere Teil des Bildes durch #abstand_bildbereich_bild repräsentiert wird, kann ich es nicht bestätigen, dass sich dieser nicht am unteren Rand von #abstand_bildbereich ausrichtet.

mfg Maik

CEZ · 5. Juni 2009

er richtet sich leider immernoch oben aus, danke dir dann erstmal für den Tipp.
Ich versuch es weiter.

CEZ · 5. Juni 2009

z-index richtig Ausrichten bei dynamischen Content

Ich habe folgendes Problem. Ich habe bei meiner Webseite z-index angewendet und dieser funktioniert auch wunderbar. Allerdings nimmt das Bild welches über den anderen Inhalten liegt eine feste Position ein und wandert nicht mit der Seite welche einen dynamischen Content besitzt. Ich habe es bereits versucht, mit bottom: 5% und verschiedenen position Angaben. Das Bild soll immer eine feste Position auf dem Footer haben, und sich mitbewegen auf dem Footer.

Anbei noch die CSS und HTML Codes und ein Bild worauf das Problem zu sehen ist.

HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.7)" />
		<meta name="title" content="home" />
		<meta name="copyright" content="" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="robots" content="index,follow,all" />
		<link href="css/main.css" rel="stylesheet" type="text/css" />
		<title>home</title>
	</head>
	<body>
		<div id="corpus">
			<div id="wrapper">
				<div id="banner"></div>
				<div id="gesamt_gesamt">
					<div id="gesamt_links"></div>
					<div id="gesamt_mitte">
						<div id="rahmen_navi">
							<div id="abstand_navi_links"></div>
							<div id="btn_info"><a href="" title="info"><img name="info" src="bilder/info.png" alt="info" onmouseover="document.images['info'].src='bilder/info_over.png'" onmouseout="document.images['info'].src='bilder/info.png'" /></a></div>
							<div id="btn_media"><a href="" title="media"><img name="media" src="bilder/media.png" alt="media" onmouseover="document.images['media'].src='bilder/media_over.png'" onmouseout="document.images['media'].src='bilder/media.png'" /></a></div>
							<div id="btn_contact"><a href="" title="contact"><img name="contact" src="bilder/contact.png" alt="contact" onmouseover="document.images['contact'].src='bilder/contact_over.png'" onmouseout="document.images['contact'].src='bilder/contact.png'" /></a></div>
							<div id="btn_booking"><a href="" title="booking"><img name="booking" src="bilder/booking.png" alt="booking" onmouseover="document.images['booking'].src='bilder/booking_over.png'" onmouseout="document.images['booking'].src='bilder/booking.png'" /></a></div>
							<div id="login_bg">
								<div id="login_abstand_oben"></div>
								<div id="login_abstand_links"></div>
								<div class="login_ausfuellfelder"><img src="bilder/user_bg.png" alt="User" /></div>
								<div class="login_ausfuellfelder"><img src="bilder/password_bg.png" alt="Password" /></div>
								<div id="login_ok"><img src="bilder/login_bg.png" alt="Login" /></div>
							</div>
							<div id="rahmen_subnavi">
								<div id="abstand_subnavi_links"></div>
								<div class="subnavi_blanko"></div>
								<div class="subnavi_blanko"></div>
								<div class="subnavi_blanko"></div>
								<div class="subnavi_blanko"></div>
								<div class="subnavi_blanko"></div>
								<div id="subnavi_abstand_rechts"></div>
							</div>
						</div>
						<div id="abstand_horizontal_mainhead"></div>
						<div id="head_links"></div>
						<div id="head_ueberschrift"><img src="bilder/head_home.png" alt="Ueberschrift" /></div>
						<div id="abstand_head"></div>
						<div id="main_gesamt">
							<div id="main_oben"></div>
							<div id="main_links"></div>
							<div id="main_mitte">
								<div id="einspaltig">
									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br />
									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
								</div>
							</div>
							<div id="abstand_main_mitte"></div>
							<div id="rahmen_bildbereich">
								<div id="main_bildbereich"><img src="bilder/bild_bildbereich.png" alt="Bild" /></div>
								<div id="abstand_bildbereich"></div>
							</div>
							<div id="abstand_aktuelles_links"></div>
							<div id="aktuelles_bg">
								<div class="aktuelles_text">
									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
								</div>
								<div class="aktuelles_text"><br />
									<img src="bilder/next_date.png" alt="Next Date" /><br /><br />
									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
								</div>
							</div>
							<div id="abstand_aktuelles_rechts"></div>
						</div>
						<div id="footer">
							<div id="footer_navi"><a href="" title="home">home |</a><a href="" title="contact"> contact |</a><a href="" title="guestbook"> guestbook |</a><a href="" title="newsletter"> newsletter |</a><a href="" title="impress"> impress</a></div>
						</div>
					</div>
					<div id="gesamt_rechts_top"></div>
					<div id="gesamt_rechts"></div>
				</div>
			</div>
		</div>
		<div id="foto_dj"></div>
	</body>
</html>

CSS:

HTML:

@charset "utf-8";
/* CSS Document */
body{
	margin:0px 0px 0px 0px; /*oben rechts unten links*/
	padding:5px 0px 0px 0px;
	background-color:#181d20;
}
#corpus{
	width:831px;
	min-height:603px;
	height:auto !important;
	height:603px;
	margin:0px auto;
	position:relative;
}
#wrapper{
	width:831px;
	min-height:603px;
	height:auto !important;
	height:603px;
}
img {
	border:0px;
	padding:0px;
	margin:0px;
}
img a{
	border:0px;
	padding:0px;
	margin:0px;
}
a:link, a:visited{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#ffffff;
	text-decoration:none;
}
a:hover, a:active, a:focus{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#ffffff;
	text-decoration:none;
}
/*-------------------------------------------- Rahmen oben --------------------------------*/
#banner{
	width:831px;
	height:202px;
	float:left;
	background-image:url(../bilder/banner.png);
	background-repeat:no-repeat;
	z-index: 1;
}
/*------------------------------ Rahmen Gesamt ----------------------*/
#gesamt{
	width:831px;
	min-height:401px;
	height:auto !important;
	height:401px;
	float:left;
	z-index: 1;
}
#gesamt_links{
	width:21px;
	min-height:401px;
	height:auto !important;
	height:401px;
	float:left;
	z-index: 1;
}
#gesamt_mitte{
	width:772px;
	min-height:401px;
	height:auto !important;
	height:401px;
	float:left;
	z-index: 1;
}
#gesamt_rechts_top{
	width:38px;
	height:38px;
	float:left;
	background-image:url(../bilder/abstand_rechts_top.png);
	font-size:1px;
	border:0px;
	z-index: 1;
}
#gesamt_rechts{
	width:38px;
	min-height:363px;
	height:auto !important;
	height:363px;
	float:left;
	z-index: 1;
}		
/*------------------------------ Rahmen Navi ----------------------*/
#rahmen_navi{
	width:772px;
	height:53px;
	float:left;
	z-index: 1;
}
#abstand_navi_links{
	width:8px;
	height:38px;
	float:left;
	background-image:url(../bilder/abstand_navi_links.png);
	font-size:1px;
	z-index: 1;
}	
#btn_info{
	width:92px;
	height:38px;
	float:left;
	z-index: 1;
}	
#btn_media{
	width:96px;
	height:38px;
	float:left;
	z-index: 1;
}
#btn_contact{
	width:97px;
	height:38px;
	float:left;
	z-index: 1;
}
#btn_booking{
	width:99px;
	height:38px;
	float:left;
	z-index: 1;
}
#login_bg{
	width:380px;
	height:38px;
	float:left;
	background-repeat:no-repeat;
	font-size:1px;
	border:0px;
	background-image:url(../bilder/login.png);
	z-index: 1;
}
#login_abstand_links{
	width:25px;
	height:20px;
	float:left;
	z-index: 1;
}
#login_abstand_oben{
	width:380px;
	height:11px;
	float:left;
	z-index: 1;
}
.login_ausfuellfelder{
	width:141px;
	height:20px;
	float:left;
	z-index: 1;
}
#login_ok{
	width:60px;
	height:20px;
	float:left;
	z-index: 1;
}
/*--------- Subnavi ---------*/
#rahmen_subnavi{
	width:772px;
	height:15px;
	float:left;
	font-size:1px;
	z-index: 1;
}	
#abstand_subnavi_links{
	width:8px;
	height:15px;
	float:left;
	background-image:url(../bilder/abstand_subnavi_links.png);
	font-size:1px;
	z-index: 1;
}
.subnavi_blanko{
	width:96px;
	height:15px;
	float:left;
	background-color:#f0f0f0;
	font-size:1px;
	z-index: 1;
}
#subnavi_blanko_e{
	width:96px;
	height:15px;
	float:left;
	background-color:#f0f0f0;
	font-size:1px;
	z-index: 1;
}
#subnavi_abstand_rechts{
	width:284px;
	height:15px;
	font-size:1px;
	float:left;
	background-image:url(../bilder/subnavi_abstand_rechts.png);
	z-index: 1;
}
/*------------------------------------ Rahmen Main ---------------------------------------*/
#main_gesamt{
	width:772px;
	min-height:227px;
	height:auto !important;
	height:227px;
	float:left;
	background-image:url(../bilder/verlangerung_unten.png);
	background-repeat:repeat;
	z-index: 1;
	position:relative;
}
/*------------------------------------------ Textbereich ------------------------------------------*/
#abstand_horizontal_mainhead{
	width:772px;
	height:19px;
	float:left;
	background-image:url(../bilder/abstand_horizontal_mainhead.png);
	font-size:1px;
	z-index: 1;
}
#head_links{
	width:48px;
	height:35px;
	float:left;
	background-image:url(../bilder/head_links.png);
	z-index: 1;
}
#head_ueberschrift{
	width:82px;
	height:35px;
	float:left;
	z-index: 1;
}
#abstand_head{
	width:642px;
	height:35px;
	float:left;
	background-image:url(../bilder/abstand_head.png);
	background-repeat:no-repeat;
	border:0px;
	z-index: 1;
}
#main_oben{
	width:772px;
	height:15px;
	float:left;
	background-image:url(../bilder/main_oben.png);
	font-size:1px;
	z-index: 1;
}
#main_links{
	width:48px;
	height:211px;
	float:left;
	background-image:url(../bilder/main_links.png);
	z-index: 1;
}
#main_mitte{
	width:341px;
	min-height:211px;
	height:auto !important;
	height:211px;
	float:left;
	background-color:#FFFFFF;
	z-index: 1;
	position:relative;
}
#einspaltig{
	width:335px;
	min-height:200px;
	height:auto !important;
	height:200px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#333333;
	font-size:10px;
	line-height:normal;
	text-align:justify;
	margin-top:10px;
	z-index: 1;
}
#abstand_main_mitte{
	width:12px;
	height:211px;
	float:left;
	font-size:1px;
	background-image:url(../bilder/abstand_main_mitte.png);
	z-index: 1;
}
#rahmen_bildbereich{
	width:193px;
	min-height:211px;
	height:auto !important;
	height:211px;
	float:left;
	z-index: 1;
}
#main_bildbereich{
	width:193px;
	height:133px;
	float:left;
	background-image:url(../bilder/main_bildbereich.png);
	z-index: 1;
}
#abstand_bildbereich{
	width:193px;
	min-height:78px;
	height:auto !important;
	height:78px;
	float:left;
	z-index: 1;
}
#foto_dj{
	width:165px;
	height:141px;
	background-image:url(../bilder/foto_dj.png);
	z-index: 2;
	position:absolute;
	left:455px;
	bottom:10%;
}
#abstand_aktuelles_links{
	width:14px;
	height:211px;
	float:left;
	background-image:url(../bilder/abstand_aktuelles_links.png);
	z-index: 1;
}
#aktuelles_bg{
	width:133px;
	height:211px;
	float:left;
	background-color:#f0f0f0;
	z-index: 1;
}
.aktuelles_text{
	width:115px;
	min-height:100px;
	height:auto !important;
	height:100px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#333333;
	text-align:justify;
	padding-left:10px;
	z-index: 1;
}
#abstand_aktuelles_rechts{
	width:31px;
	height:211px;
	float:left;
	background-image:url(../bilder/abstand_aktuelles_rechts.png);
	z-index: 1;
}
/*------------------------------------------ Footer ------------------------------------*/
#footer{
	width:772px;
	height:70px;
	float:left;
	background-image:url(../bilder/footer.png);
	background-repeat:no-repeat;
	z-index: 2;
}
#footer_navi{
	width:762px;
	height:10px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFFFFF;
	text-align:right;
	padding-top:57px;
	z-index: 2;
}
#footer_navi a:link, a:visited{
	font-size:10px;
	color:#FFFFFF;
	text-decoration:none;
}
#footer_navi a:hover, a:active, a:focus{
	font-size:10px;
	color:#999999;
	text-decoration:none;
}

Maik · 5. Juni 2009

Ich dachte, dass wir die Frage geklärt hätten, wie sich das Bild im Footer platzieren lässt.

Mit meinem Vorschlag wandert der Footer inkl. dem darin positionierten Bild nach unten, wenn der Inhalt der Seite zunimmt.

Übrigens greift z-index nur in Verbindung mit einer Angabe zur Positionsart position - siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index - ansonsten bleibt diese Deklaration wirkungslos.

Und vermeide bitte zukünftig solche Doppelposts im Forum. Aus diesem Grund hab ich die beiden Themen zusammengeheftet.

mfg Maik

CEZ · 5. Juni 2009

Meiner Meinung nach ist das ein neues Thema deswegen hab ich es neu gepostet. Wenn du das anders siehst tut es mir leid, kommt nich mehr vor.

Ich hab das ganze nun anders geregelt.
Der Hintergrund sorgt für die Verlängerung und das Bild ist per z-index überlagert. Meine neue Frage ist nun aber folgende:

Das Bild ist außerhalb des Contents gelagert mit einem z-index 2. Habe ich die Möglichkeit das Bild so zu platzieren, dass es sich zwar immer am Footer befindet aber dynamisch mit dem Footer mitwandert ? ... Ich kann es nicht in den Footer reinbauen wie besprochen, da das Bild größer als der Footer ist und eben in einen anderen Div lagert. Der Verlängerungs Div (main_verlaengerung) existiert ja nicht mehr, da sich der Hintergrund wiederholt.

#foto_dj{
width:165px;
height:141px;
background-image:url(../bilder/foto_dj.png);
z-index: 2;
position:absolute;
left:455px;
bottom:10px;
}

Gibt es eine Möglichkeit zum Beispiel dem Bild zu sagen, "Hab immer einen Abstand zum ende des Corpus von ...px ?

Maik · 5. Juni 2009

So, ein neues Thema? :suspekt:

Ich les hier noch immer was von z-index, Footer, Bild, mitwandern, usw., seh denselben HTML-Code und das gleiche Vorschaubild, blos mit verschobenen Bild darin.

mfg Maik

CEZ · 5. Juni 2009

ok....tut mir leid !!

Derselbe Code ist es aber nicht mehr...

Gibt es denn eine Möglichkeit zum Beispiel dem Bild zu sagen, "Hab immer einen Abstand zum ende des Corpus von ...px ?

Maik · 5. Juni 2009

Da du das Bild im Footer ausrichten willst, bzw. es mit ihm nach unten wandern soll, scrollst du einfach 11 Beiträge nach oben - dort findest du die Lösung.

Ansonsten hast du noch die Möglichkeit, diese Technik in Verbindung mit #corpus anzuwenden.

mfg Maik

CEZ · 5. Juni 2009

Ich möchte das Bild nicht im Footer platzieren. Ich habe für das Bild eine neue Ebene angelegt mit z-index. Ich kann es jetzt zwar ausrichten und platzieren wo es hin soll aber wenn die contentlänge sich verändert, bleibt das Bild wo ich es hinplatziert habe. Es soll aber genau oberhalb des Footer bleiben.

Das Bild befindet sich bereits zwischen Corpus und Wrapper. Weil es ja eine Ebene drüber sein muss. Es befindet sich nun also eine Ebene über dem Rest. Nur wie sage ich Ihm dass er immer einen bestimmten Abstand zum Fuß des Rahmens einhalten soll egal wie groß dieser Bereich ist

✔ Wie z-index anwenden?

CEZ

Grünschnabel

Maik

CEZ

Grünschnabel

CEZ

Grünschnabel

Anhänge

Maik

CEZ

Grünschnabel

Maik

CEZ

Grünschnabel

Maik

CEZ

Grünschnabel

Neue Beiträge