Problem mit z-index und Positionierung der Ebenen

**inger** · 04.11.2010, 19:12

Hallo - ich habe ein Problem mit dem Aufbau einer Website, die ich gerade programmiere (bin relativer Anfänger mit Grundkenntnissen HTML, CSS, javascript):

Ich habe eine Struktur aus Ebenen, bei der anscheinend die id-stile nicht richtig angewendet werden. Ich weiß nur nach ewigem probieren und googeln nicht, woran das liegen kann???

- Das #bild "Titelfoto.gif" liegt trotz {padding-top=130;} immer am oberen Rand des Browserfensters - egal welchen z-index ich vergebe.

- diverse links im #text und #copyright können nicht angewählt werden

Vielleicht könnt ihr mir helfen? Das wäre toll! Danke im Vorraus,
Inger

Hier der Text:

HTML-Code:

<!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=utf-8" />
		<title></title>
		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
		<style type="text/css" media="screen" class="einzug"><!--
#menubar {position:absolute;padding-top:100px; z-index:5;}
#DRWF {position:absolute;padding-top:0; z-index:3}
#bild {position:absolute;padding-top:130; z-index:2}
#text {position:absolute;padding-top:410; z-index:3}
#copyright {position:absolute;padding-top:710; z-index:3}
#loeschen {position:absolute;width:880; padding-top:0px; z-index:4;}
#spaltereden {position:absolute;width:880;padding-top:130px; z-index:4; padding-left: 95px; text-decoration: none;}
#spaltekarten {position:absolute;width:880;padding-top:130px; z-index:4; padding-left: 180px; text-decoration: none;}
#spaltebeispiele {position:absolute;padding-top:130px; z-index:4; padding-left: 350px; text-decoration: none}
.weiss { color: white; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.weiss a:link { color: white; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; }
.weiss a:visited { color: white; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.weiss a:hover { color: #8e004d; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.weiss a:active { color: #8e004d; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.einzug { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; visibility: visible; padding-left: 16px; }
.basic { color: #707172; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.basic a:link { color: #707172; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.basic a:visited { color: #8e004d; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.basic a:hover { color: #8e004d; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.basic a:active { color: #8e004d; font-size: small; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.pink { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; }
.pink a:link { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.pink a:visited { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.pink a:hover { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: underline; }
.menu { color: #707172; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.menu a:link { color: #707172; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.menu a:visited { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.menu a:hover { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
.menu a:active { color: #8e004d; font-size: medium; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-decoration: none; }
--></style>
	</head>
	<body bgcolor="#00a6a3" style="text-align:center;">
		<div style="width:880px;margin:0px auto;text-align:left;">
		<div id=DRWF><img src="Kopf.gif"></div>
				
		<div id=loeschen>
		<table width="880" border="0" cellspacing="0" cellpadding="0" align="center">				
			<tr height="750"><td height="750" width="880" OnMouseOver="loeschen()"></td></td></tr></table>
		</div>
		
		<div id=menubar class="menu">
		<table width="880" border="0" cellspacing="0" cellpadding="0" align="center">
			<tr bgcolor="white" height="30">
				<td colspan="8" align="center" width="95" height="30">
					<div align="center">
						<a href="wirsind.html"OnMouseOver="loeschen()">Wir sind</a></td>
				<td colspan="8" align="center" width="85" height="30">
					<div align="center">
						<a href="reden.html" OnMouseOver="javascript:zeigemenus1()">Reden</a></td>
				<td colspan="8" align="center" width="85" height="30">
					<div align="center">
						<a href="reden.html" OnMouseOver="javascript:zeigemenus2()">Karten</a></td>
				<td colspan="8" align="center" width="85" height="30">
					<div align="center">			
						<a href="extras.html"OnMouseOver="loeschen()">Extras</a></font></td>
				<td colspan="8" align="center" width="105" height="30">
					<div align="center">
						<a href="beispiele.html" OnMouseOver="javascript:zeigemenus3()">Beispiele</a></td>
				<td colspan="8" align="center" width="105" height="30">
					<div align="center">
						<a href="stimmen.html"OnMouseOver="loeschen()">Stimmen</a></td>
				<td colspan="8" align="center" width="85" height="30">
					<div align="center">	
						<a href="kontakt.html"OnMouseOver="loeschen()">Kontakt</a></td>
				<td colspan="8" align="center" width="235" height="30"></td></tr></table>
		</div>
		
		<div id=spaltereden style="visibility:hidden" class="menu">
		<table border="0" cellspacing="0" cellpadding="0" align="center">
			<tr bgcolor="white" height="30">
				<td colspan="8" align="left" width="155" height="30">
						<a href="redenfreude.html">&nbsp;&nbsp;&nbsp;&nbsp;Freude</a></font></td>
			</tr>
			<tr bgcolor="white" height="30">
				<td colspan="8" align="left" width="155" height="30">
						<a href="redentrauer.html">&nbsp;&nbsp;&nbsp;&nbsp;Trauer/Abschied</a></font></td>
			</tr></table>
		</div>
		
		<div id=spaltekarten style="visibility:hidden" class="menu">
		<table border="0" cellspacing="0" cellpadding="0" align="center">
			<tr bgcolor="white" height="30">
				<td colspan="8" align="left" width="155" height="30">
						<a href="kartenfreude.html">&nbsp;&nbsp;&nbsp;&nbsp;Freude</a></font></td>
			</tr>
			<tr bgcolor="white" height="30">
				<td colspan="8" align="left" width="155" height="30">
						<a href="kartentrauer.html">&nbsp;&nbsp;&nbsp;&nbsp;Trauer/Abschied</a></font></td>
			</tr></table>
		</div>
		
		<div id=spaltebeispiele style="visibility:hidden" class="menu">
		<table border="0" cellspacing="0" cellpadding="0" align="center">
			<tr bgcolor="white" height="30">
				<td colspan="8" align="left" width="155" height="30">
						<a href="kartenfreude.html">&nbsp;&nbsp;&nbsp;&nbsp;Freude</a></font></td>
			</tr>
			<tr bgcolor="white" height="30">
				<td colspan="8" align="left" width="155" height="30">
						<a href="kartentrauer.html">&nbsp;&nbsp;&nbsp;&nbsp;Trauer/Abschied</a></font></td>
			</tr></table>
		</div>

	<div id=bild>
		<table width="880" border="0" cellspacing="0" cellpadding="0" align="center">
			<tr height="280">
				<td colspan="8" width="880" height="280" background="Titelfoto.gif"></td>
			</tr>
		</div>
		
	<div id=text>
		
			<tr height="300">
				<td class="einzug" colspan="6" bgcolor="white" width="460" height="300">
					<div class="einzug">
						<p><font class="einzug" color="#8e004d">In wenigen Tagen </font></p>
					</div>
				</td>
				<td colspan="2" bgcolor="white" width="400" height="300">
					<div class="basic">
						<p class="basic"><font class="basic" size="2" color="white" face="Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif"><strong><br />
								</strong>Tel.: 0177 - 6036502<br />
								<a href="mailto:..." target="_blank">E-Mail: [email]...[/email]<br />
								 target="_blank"></a></font></p>
						<p class="basic"><font class="basic" size="2" color="white" face="Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif"><strong class="basic"><br />
								</strong>Tel.: 0228 - 4226 8882<br />
								<a href="mailto:" target="_blank">E-Mail: [email]...[/email]</a><br /></font></p>
					</div>
					<div class="pink">
						<p class="pink"><font color="#8e004d"><a class="pink" title="PDF herunterladen (132 KB)" href="http://www.traum-projekt.com/forum/34-html-and-css/....pdf" target="_blank"><span class="pink">aktuelle Presseinformation</span></a></font></p>
					</div>
				</td>
			</tr>
			</div>
			
	<div id=copyright>
			<tr height="30">
				<td colspan="6" width="560" height="30">
					<div class="weiss">
						© copyright 2010 </div>
				</td>
				<td colspan="2" width="320" height="30">
					<div class="weiss" align="right">
						<a title="..."></a></div>
				</td>
			</tr>
			</div>
		</table>
		
		<script language="Javascript" type="text/javascript">
<!--

function zeigemenus1() {
document.getElementById("spaltekarten").style.visibility = "hidden";
document.getElementById("spaltebeispiele").style.visibility = "hidden";
document.getElementById("spaltereden").style.visibility = "visible";
}

function zeigemenus2() {
document.getElementById("spaltereden").style.visibility = "hidden";
document.getElementById("spaltebeispiele").style.visibility = "hidden";
document.getElementById("spaltekarten").style.visibility = "visible";
}

function zeigemenus3() {
document.getElementById("spaltereden").style.visibility = "hidden";
document.getElementById("spaltekarten").style.visibility = "hidden";
document.getElementById("spaltebeispiele").style.visibility = "visible";
}

function loeschen() {
document.getElementById("spaltereden").style.visibility = "hidden";
document.getElementById("spaltekarten").style.visibility = "hidden";
document.getElementById("spaltebeispiele").style.visibility = "hidden";
}

//-->
</script>
</div>
	</body>

</html>

**sejuma** · 04.11.2010, 19:30

Bei deinen CSS-Werten fehlen fast überall die erforderlichen Einheiten. Sind das also 130 Bratwürste, cm oder px?

Ferner:
Dein Seitenaufbau ist ein Graus. Tabellenlayout, kombiniert mit Div-Suppe und veralteten HTML-Formatierungen.
Mein Tipp: Eigne dir nochmal aktuelles Basic-Wissen an und setze die Seite nochmal komplett neu auf.

zur Startseite vom TP

Thema: Problem mit z-index und Positionierung der Ebenen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Problem mit z-index und Positionierung der Ebenen

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Problem mit Positionierung

Verständnisproblem bei Absoluter und Relativer Positionierung von Div Ebenen

Ebenen Positionierung innerhalb einer zentrierten Tabelle?

Z-Index -> 2 Ebenen :Vordergrund/Hintergrund

Positionierung von Ebenen - bei jeder Auflösung an der gleichen Stelle

Aktive Benutzer

Aktive Benutzer

Berechtigungen