hallo zusammen ich bin gerade am erstellen eines weblayouts für meine page:
ich hab ein ganz simples problem, ich möchte, dass der yh container hinter dem hp erscheint und schaff das nicht!!
habs mit allem möglichen probiert, abr nix hat gefunzt.. sogar z-index bleibt wirkungslos! bin nun seit etwa 3 stunden dran, hab alles nochmal nue aufgebaut viel gegooglet etc. aber kriegsnicht hin!
die site ist testweiseonline unter
Jugendsegeln Steckborn
folgende index.html:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Jugendsegeln Steckborn</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="dbg">
<img id="bg" src="images/blue.gif" />
</div>
<div id="rest">
<div id="h" >
<div id="yh">
</div>
<div id="hp">
</div>
</div>
<div id="inhalt">
<h1><a href="http://prinz-und-gloeckner.pytalhost.com">Der Prinz und der Gloeckner</a></h1>
<h2>Ein Märchen</h2>
<h3>von Olaf Hoffmann</h3>
<p>Einst lebte in einem kleinen Koenigreich an der Kueste eine junge
Prinzessin von so grossem Liebreiz, dass ihr die edlen Recken
des Landes und die Prinzen des ganzen Kontinents reihenweise zu
Fuessen lagen (wie sollte es auch anders sein in einer solchen
Geschichte).</p>
</div>
<div id="yf">
</div>
</div>
</body></html>
und die css:
Code:
body
{
font-size: 1em;
font-family:Helvetica, sans-serif;
margin: 0em;
padding: 0em;
background: #fff;
color: #000;
text-align: center;
}
div#dbg
{
}
img#bg
{
width:1;
height:1;
position: fixed;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
}
div#rest
{
position: absolute;
top: 0em;
left: 0em;
right: 0em;
bottom: 0em;
padding: 0em;
}
div#inhalt
{
width: 700px;
margin: 0 auto;
}
#h
{
background-color: yellow;
top: 0px;
left: 0px;
height: 260px;
width: 100%;
}
#yh
{
position:absolute;
background-image: url(images/yellowhead.gif);
top: 190px;
left: 0px;
height: 70px;
width: 100%;
z-index:2;
}
#hp
{
background-image: url(images/head.gif);
position:absolute
top:0px;
width: 944px;
height: 260px;
margin: 0 auto;
z-index:1;
}
#yf
{
background-image: url(images/yellowfoot.gif);
left: 0px;
bottom: 0px;
height: 101px;
width: 100%;
padding: 0px;
}
hat jemand von euch eine Idee wie ich das hinkriege?
Grüsse Unearth