XHTMLforum - Problem mit z-index

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Problem mit z-index (http://xhtmlforum.de/showthread.php?t=56777)

Problem mit z-index

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

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.

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

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. ;)

Zitat:

Nach "absolute" fehlt ein Semikolon.

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

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

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

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

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

@ regloh: merci für den Tipp,funktioniert

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

Greez unearth