zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit z-index

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2009, 14:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Unearth befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2009, 15:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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.

Geändert von regloh (22.04.2009 um 16:03 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2009, 16:39
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

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 */
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<

Geändert von ^uncool (22.04.2009 um 16:48 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 22.04.2009, 16:43
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (22.04.2009 um 16:51 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.04.2009, 16:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Zitat:
Nach "absolute" fehlt ein Semikolon.
Langsam ***** es mich an, dass ich solche simplen Fehler einfach übersehe
Mit Zitat antworten
  #6 (permalink)  
Alt 22.04.2009, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Unearth befindet sich auf einem aufstrebenden Ast
Standard merci

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

Geändert von Unearth (22.04.2009 um 18:14 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 22.04.2009, 18:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Weil #yh nicht positioniert ist. Gib ihm position absolute oder relative und einen höheren z-index als #hp.
Mit Zitat antworten
  #8 (permalink)  
Alt 22.04.2009, 20:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Unearth befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 22.04.2009, 21:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.04.2009, 00:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Unearth befindet sich auf einem aufstrebenden Ast
Standard

@ regloh: merci für den Tipp,funktioniert

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

Greez unearth
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
div reihenfolge, z-index

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:56 Uhr.