✔ Wie z-index anwenden?

C

CEZ

Grünschnabel
Ich habe bereits die vorhandenen Beiträge zum z-index gelesen. Ich hab folgendes Problem, welches durch die Beiträge leider nicht beantwortet werden konnte.
Bei meiner Webseite muss ein Bild den Hintergrund überlagern, welcher sich in insgesamt 3 Div-Layern befindet. Dazu kommt noch, dass die seite einen dynamischen Content hat, sich also verlängert bei Bedarf. Dies geschieht durch einen Div-Layer im Hintergrund der sich wiederholt. Diesen Div-Layer soll das Foto ebenfalls überlagern.

Ich habe im folgenden einmal einen Screenshot der wichtigen Bereiche beigefügt und die CSS sowie den HTML Code. In den Codes habe ich zurzeit aber kein z-index angewendet.

Html Code:

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 id="main_verlaengerung"></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>
	</body>
</html>

und der CSS-Code:

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;
}
#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;
}
/*------------------------------ Rahmen Gesamt ----------------------*/
#gesamt{
	width:831px;
	min-height:401px;
	height:auto !important;
	height:401px;
	float:left;
}
#gesamt_links{
	width:21px;
	min-height:401px;
	height:auto !important;
	height:401px;
	float:left;
}
#gesamt_mitte{
	width:772px;
	min-height:401px;
	height:auto !important;
	height:401px;
	float:left;
}
#gesamt_rechts_top{
	width:38px;
	height:38px;
	float:left;
	background-image:url(../bilder/abstand_rechts_top.png);
	font-size:1px;
	border:0px;
}
#gesamt_rechts{
	width:38px;
	min-height:363px;
	height:auto !important;
	height:363px;
	float:left;
}		
/*------------------------------ Rahmen Navi ----------------------*/
#rahmen_navi{
	width:772px;
	height:53px;
	float:left;
}
#abstand_navi_links{
	width:8px;
	height:38px;
	float:left;
	background-image:url(../bilder/abstand_navi_links.png);
	font-size:1px;
}	
#btn_info{
	width:92px;
	height:38px;
	float:left;
}	
#btn_media{
	width:96px;
	height:38px;
	float:left;
}
#btn_contact{
	width:97px;
	height:38px;
	float:left;
}
#btn_booking{
	width:99px;
	height:38px;
	float:left;
}
#login_bg{
	width:380px;
	height:38px;
	float:left;
	background-repeat:no-repeat;
	font-size:1px;
	border:0px;
	background-image:url(../bilder/login.png);
}
#login_abstand_links{
	width:25px;
	height:20px;
	float:left;
}
#login_abstand_oben{
	width:380px;
	height:11px;
	float:left;
}
.login_ausfuellfelder{
	width:141px;
	height:20px;
	float:left;
}
#login_ok{
	width:60px;
	height:20px;
	float:left;
}
/*--------- Subnavi ---------*/
#rahmen_subnavi{
	width:772px;
	height:15px;
	float:left;
	font-size:1px;
}	
#abstand_subnavi_links{
	width:8px;
	height:15px;
	float:left;
	background-image:url(../bilder/abstand_subnavi_links.png);
	font-size:1px;
}
.subnavi_blanko{
	width:96px;
	height:15px;
	float:left;
	background-color:#f0f0f0;
	font-size:1px;
}
#subnavi_blanko_e{
	width:96px;
	height:15px;
	float:left;
	background-color:#f0f0f0;
	font-size:1px;
}
#subnavi_abstand_rechts{
	width:284px;
	height:15px;
	font-size:1px;
	float:left;
	background-image:url(../bilder/subnavi_abstand_rechts.png);
}
/*------------------------------------ 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;
}
/*------------------------------------------ Textbereich ------------------------------------------*/
#abstand_horizontal_mainhead{
	width:772px;
	height:19px;
	float:left;
	background-image:url(../bilder/abstand_horizontal_mainhead.png);
	font-size:1px;
}
#head_links{
	width:48px;
	height:35px;
	float:left;
	background-image:url(../bilder/head_links.png);
}
#head_ueberschrift{
	width:82px;
	height:35px;
	float:left;
}
#abstand_head{
	width:642px;
	height:35px;
	float:left;
	background-image:url(../bilder/abstand_head.png);
	background-repeat:no-repeat;
	border:0px;
}
#main_oben{
	width:772px;
	height:15px;
	float:left;
	background-image:url(../bilder/main_oben.png);
	font-size:1px;
}
#main_links{
	width:48px;
	height:211px;
	float:left;
	background-image:url(../bilder/main_links.png);
}
#main_mitte{
	width:341px;
	min-height:211px;
	height:auto !important;
	height:211px;
	float:left;
	background-color:#FFFFFF;
}
#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;
}
#abstand_main_mitte{
	width:12px;
	height:211px;
	float:left;
	font-size:1px;
	background-image:url(../bilder/abstand_main_mitte.png);
}
#rahmen_bildbereich{
	width:193px;
	height:211px;
	float:left;
}
#main_bildbereich{
	width:193px;
	height:133px;
	float:left;
	background-image:url(../bilder/main_bildbereich.png);
}
#abstand_bildbereich{
	width:193px;
	height:78px;
	float:left;
	background-color:#f0f0f0;
}
#abstand_aktuelles_links{
	width:14px;
	height:211px;
	float:left;
	background-image:url(../bilder/abstand_aktuelles_links.png);
}
#aktuelles_bg{
	width:133px;
	height:211px;

	float:left;
	background-color:#f0f0f0;
}
.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;
}
#abstand_aktuelles_rechts{
	width:31px;
	height:211px;
	float:left;
	background-image:url(../bilder/abstand_aktuelles_rechts.png);
}
#main_verlaengerung{
	width:772px;
	min-height:1px;
	height:auto !important;
	height:1px;
	float:left;
	background-repeat:repeat;
	background-image:url(../bilder/verlangerung_unten.png);
	font-size:1px;
}
/*------------------------------------------ Footer ------------------------------------*/
#footer{
	width:772px;
	height:67px;
	float:left;
	background-image:url(../bilder/footer.png);
}
#footer_navi{
	width:762px;
	height:10px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFFFFF;
	text-align:right;
	padding-top:54px;
}
#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;
}
 

Anhänge

  • Unbenannt-3.jpg
    Unbenannt-3.jpg
    399,5 KB · Aufrufe: 25
Hi,

um welchen DIV-Block handelt es sich konkret?

Soviel kann ich aber schonmal dazu sagen, dass ein schichtpositioniertes Element keinen Bezug zu dem darunterliegenden Element hat, wenn es an Inhalt zunimmt.

mfg Maik
 
das bild soll immer an der unterkante "kleben". Es soll über den Div's "footer", "abstand_bildbereich" und "verlaengerung_unten" platziert sein, mit der Unterkante auf dem Ende des Content.
 
das Problem ist ja, dass in dem Beitrag den du mir gerade geschickt hast, davon ausgegangen wird, dass es sich um einen Div handelt. Ich habe aber 3 Div's in denen sich 1 Bild befindet. Ich würde es ja als Hintergrund einfügen, aber wenn die Seite sich verlängert wird das Bild dann ja auseinandergerissen.
 
Wie darf ich mir das denn vorstellen: ein Bild in drei DIV-Blöcken?

mfg Maik
 
Auf dem Bild welches ich dem Beitrag beigefügt habe, sieht man rote Linien und den Unterteil eines Menschen. Das ist der erste Teil des Bildes um zu zeigen wo das Bild platziert werden soll. Man sieht auch, dass das Bild wenn es komplett wäre nach oben über einen sehr dünnen Div (verlaengerung_unten) und einem großen Div (abstand_bildbereich) liegt. Der dünne Div verlängert sich bei Bedarf. Das Bild ist also über 3 Divblöcken platziert, bzw soll es ;).
 
das Problem ist, dass ich durch z-index es nicht erreiche, dass das Bild so darüber liegt das es 1. an der Kante den Content klebt & 2. über den drei Div's angezeigt wird.
Meine Frage ist ja nur, wie muss ich das z-index anwenden, damit das Bild eben so platziert ist das es unten an der Kante hängt aber trotzdem über den 2 anderen Div's liegt.
 
Und welches Bild soll sich nun über diese drei DIV-Blöcke erstrecken?

Und sprichst du bei "verlaengerung_unten" von dem DIV-Block #main_verlaengerung, der eine dynamische Höhe besitzt?

Wenn ja, kannst du dein Vorhaben vergessen, da wie eingangs erwähnt, schichtpositionierte Elemente keinen Bezug zueinander besitzen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück