Problem mit z-index

Unearth · #1 (**permalink**) 22.04.2009, 14:52

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

regloh · #2 (**permalink**) 22.04.2009, 15:41

Ein höherer z-Index bewirkt auch eine höhere "Ebene". Das "unten liegende" Element muss einen niedriegeren Wert bekommen.
Edit: Funktioniert nicht. Idee hab ich jetzt aber keine mehr.

^uncool · #3 (**permalink**) 22.04.2009, 16:39

Moin

kleiner Leichtsinnsfehler hat sich bei dir eingeschlichen:

Code:

#hp

{

background-image: url(images/head.gif);

position:absolute

top:0px;

width: 944px;

height: 260px;

margin: 0 auto;

z-index:1;

}

Nach "absolute" fehlt ein Semikolon. Du solltest hinzufügend noch den Tipp mit dem z-index von regloh dir zu Herzen nehmen.

Außerdem sollte dir bewusst sein, dass ein absolut positioniertes Objekt nicht per margin:0 auto horizontal zentriert werden kann.
Eine Möglichkeit wäre mit negativem margin-Wert, aber da gibt es auch noch andere Möglichkeiten:

Code:

left:50%; 
margin-left:-477px; /* Hälfte der Breite des Objektes */

hubspe · #4 (**permalink**) 22.04.2009, 16:43

Hi,

bei #hp fehlt bei position:absolute das schließende Semikolon.
Setzt man es ist die Darstellung wieder völlig anders.

Kann dir deshalb nicht helfen, weil ich nicht verstehe was du willst, bzw. wie es aussehen soll.

edit. zu langsam!

nochmaledit. du solltest unbedingt die erste zeile aus deinem Markup entfernen. Dieser XML-Prolog sorgt dafür das sich der IE im Quirksmodus befindet.
Er kann mit XML nix anfangen und erwartet in der ersten zeile den Doctype und sonst nix.

Außerdem ist bei XHTML 1.1 die ausgabe applikation/xhtml+xml und nicht text/html.
Deshalb solltest du XHTML 1.0 Strict verwenden. Wissenswertes dazu gibt es hier.

regloh · #5 (**permalink**) 22.04.2009, 16:53

Zitat:

Nach "absolute" fehlt ein Semikolon.

Langsam ***** es mich an, dass ich solche simplen Fehler einfach übersehe

Unearth · #6 (**permalink**) 22.04.2009, 18:08

danke jungs für die Tipps..
das mit den semikon war n'bissl blöde sry, aber man ist manchmal so auf den rest fixiert, dass man das nicht mehr merkt.

Das mit 50%letf und halber margin ist geil!
Aber wieso kann ich einen absolute positionierten div nicht mir margin:0 auto; horizontal zentrieren??

Die Sache mit dem z-Index funktioniert einwandfrei!! supi!

das xml zeug ist auch weg und durch html zeug ersetzt...

regloh · #7 (**permalink**) 22.04.2009, 18:12

Weil #yh nicht positioniert ist. Gib ihm position absolute oder relative und einen höheren z-index als #hp.

Unearth · #8 (**permalink**) 22.04.2009, 20:56

ok.. das hat funtioniert, jetzt steh ich allerdings vor der nächsten unerklärlicen sache...
Der Firefox macht was falsch,was der IE Richtig macht!!--> das kann doch gar nicht sein!!

Code:

body
{
font-size: 1em;
font-family:Helvetica, sans-serif;
margin: 0em;
padding: 0em;
background: #fff;
color: #000;
text-align: center;
}
div#dbg
{
z-index: 3;
}

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
{
background-image: url(images/white.gif);
width: 800px;
margin: 0px auto;
}

#it
{
width: 790px;
margin: 0px auto;
z-index:
}

#h
{
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: 11;
}

#hp
{
background-image: url(images/head.gif);
position:absolute;
left: 50%;
top: 0px;
margin-left: -472px;
width: 944px;
height: 260px;
z-index: 12;
}

#f
{
left: 0px;
bottom: 0px;
height: 101px;
width: 100%;
}

#yf
{
position: absolute;
background-image: url(images/yellowfoot.gif);
left: 0px;
margin-bottom: 0px;
height: 101px;
width: 100%;
padding: 0px;
z-index: 22;
}


#yp
{
position: absolute;
background-image: url(images/foot.gif);
left: 50%;
margin-left: -472px;
margin-bottom: 0px;
height: 101px;
width: 944px;
z-index: 23;
}

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<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">
         <div id="it">
              <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>

                 <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><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><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><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><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><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><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><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><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><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><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>


    <div id="f">
         <div id="yf">
         </div>
         <div id="yp">
         </div>
    </div>

</div>

</body></html>

Der FF macht einen ungewollten abstand oben und unten zwischenn inhalt div und h und f div., sprich die backround grafik kommt nicht genug hoch!!
der IE macht alles richtig!(bis auf das das er die grafik um 1 px verschiebt, warum auch immer)

online ist das ganze auf:
Jugendsegeln Steckborn

regloh · #9 (**permalink**) 22.04.2009, 21:14

Der FF macht das schon richtig, aber der IE nicht. Und zwar fehlt bei dir ein CSS-Prolog, der alle margins und paddings nullt.

Code:

* { margin: 0; padding: 0; }

Dadurch, dass der FF standardmäßig margin für <h1-6> hat, wird die Überschrift nach unten geschoben. Dabei treten aber Collapsing Margins auf. Der IE hat das Phänomän, dass er dieses Verhalten (Collapsing margins) ignoriert, wenn das Element Layout hat: Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

Unearth · #10 (**permalink**) 23.04.2009, 00:11

@ regloh: merci für den Tipp,funktioniert

Danke an alle für die Tipps, das Design ist mittlerweile fast fertig:
Jugendsegeln Steckborn

Greez unearth

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Z Index	Rapunzel	CSS	10	19.11.2007 23:26
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28