3 Elemtente in die richtige Reihenfolge bringen

[the_zoker_09]

Hallo zusammen,

Ich versuche mir zurzeit ein eigenes Menü zusammen zu schustern, aber leider klappt das noch nicht so wie ich mir das gedacht habe.

So soll das dann irgendwann mal ausschaun:


Mein Problem ist, dass die einzelnen Elemente nicht in der richtigen Reihenfolge (Vordergrund-Hintergrund) erscheinen.
Also z.B. das die beiden Teile links und rechts über dem mittleren liegen.

Da könnt ihr euch mal hier auf der Beispielseite anschauen:
Menuleiste Test (ist noch ohne Logo, da ich jetzt erstmal das hinbekommen will.


Ich hab mal ein Bild mit der richtigen Reihenfolge erstellt (1: ganz oben, 2: Mitte, 3: ganz unten) :


Jetzt meine Frage:
Wie schaffe ich es, aus dem vorhandenen das richtige Ergebnis zu bekommen?

Habs auch schon mit Sachen wie "z-index" probiert, hat aber leider nicht funktioniert...


Könnt ihr mir helfen?

Vielen Dank
the_zoker_09

 

[efwe]

habs nur fluechtg angeschaut: bei navleft2 und naviright2 aendere :margin-left auf zb. 90px - meinst du das?

 

[the_zoker_09]

Nein ich meine, dass "navleft2" und "navright2" vor dem "menubar2" angezeigt werden (also: "davor liegen"), sie sollen aber beide hinter dem "menubar2" liegen.

Das ist mein Problem ;)

 

[Tronjer]

Das ist auch falsch aufgebaut, float:right hat nichts mit Posionierung rechts zu tun.

Alle drei Elemente der Navigation gehören in einen gemeinsamen Wrapper und werden mit float:left positioniert. Der Wrapper wiederum wird mit margin:auto zentriert. Die Angaben für margin beim linken und rechten Element kannst du rausnehmen und das Div clear löschen.

 

[Mark]

Solange du keine absoluten Positionen definierst, liegt da überhaupt nichts vor- oder hintereinander, sondern alles nebeneinander.
Welche der Grafiken dabei zuerst angezeigt wird, liegt am Cache und der Dateigrösse, das kannst du nicht beeinflussen.
Was willst du überhaupt erreichen? Solange sich die Teile nicht überlappen ist es doch völlig egal was zuerst geladen wird, am Ende hast du immer dasselbe Ergebnis.
WENN sich bei absoluter Positionierung 2 Teile überlappen, liegt immer das Teil im Vordergrund, was im Code zuletzt steht.

 

[the_zoker_09]

Das ist auch falsch aufgebaut, float:right hat nichts mit Posionierung rechts zu tun.

Alle drei Elemente der Navigation gehören in einen gemeinsamen Wrapper und werden mit float:left positioniert. Der Wrapper wiederum wird mit margin:auto zentriert. Die Angaben für margin beim linken und rechten Element kannst du rausnehmen und das Div clear löschen.

Und wie bekomme ich dann hin, dass die beiden anderen Elemente über den Rand gehen? Weil diese beiden Elemente sollen ja Links und rechts von dem Haupteil positioniert werden...

 

[Tronjer]

Und wie bekomme ich dann hin, dass die beiden anderen Elemente über den Rand gehen? Weil diese beiden Elemente sollen ja Links und rechts von dem Haupteil positioniert werden...

In dem Fall musst du das anders aufbauen: Drei Elemente, links, mitte und rechts. Alle haben dieselbe Höhe und werden left gefloatet. Links und rechts packst du die beiden kleinen Navigationselemente hinein, in die Mitte das große und den Content. Das Ganze wird von einem Wrapper umgeben und mit margin:auto zentriert.

 

[the_zoker_09]

Und wie bekomme ich die beiden Elemente dazu, ganz links bzw. ganz rechts zu sein?

 

[threadi]

So:

<div id="links"></div>
<div id="rechts"></div>
<div id="mitte"></div>

#links { float: left;width: 200px; }
#rechts { float: right;width: 200px; }
#mitte { margin: 0 auto; }

Wenn Du das alles auch noch auf einem bestimmten Maß zentrieren willst, umgib es wie oben schon gesagt mit einem Wrapper der ebenfalls den o.g. margin-Wert hat.

 

[the_zoker_09]

Aber so hab ich doch gemacht

Also bis auf des mit dem

#mitte { margin: 0 auto; }

... is es doch genau so.

Ich hab mal die Änderungen hier übertragen:
Menuleiste Test 2

Aber das löst nicht mein Problem, dass die beiden Teile links und rechts vor dem Mittelteil angezeigt werden....

Also jetzt auf die Ebenen bezogen (also quasi was im Vordergrund und was im Hintergrund steht, das war ja mein Problem).

Vielen Dank
the_zoker_09

edit: auch, wenn ich

position: absolute

für den z-index setzte, werden die Objekte übereinander angezeigt und wenn ich dann einen "left" oder "right" setzte, wird es vom Bildschirmrand abhängig angezeigt...

 

[threadi]

Aber das löst nicht mein Problem, dass die beiden Teile links und rechts vor dem Mittelteil angezeigt werden....

Was ist bei dir das "Mittelteil"? Kannst Du nicht auch von IDs und Klassen sprechen die man in deinem Quellcode sieht? Würde es einfacher machen.

Btw. ist dein HTML-Code noch leicht unvollständig: [Invalid] Markup Validation of http://area51.crystalblood.de/Test/Menuleiste2/ - W3C Markup Validator

 

[the_zoker_09]

Also bei dem Mittelteil meine ich "menubar2".

Hab die Seite valid gemacht ;)

 

[threadi]

Ah, jetzt ahne ich was Du meinst.

Schreib dein CSS folgendermaßen um:

#navigation2 { 
    margin: auto;    position: relative;

    width: 920px

 }

#navleft2 {
    background: url("../Menuleiste/images/menu-links.png") no-repeat scroll 0 0 transparent;
    height: 83px;

    left: -91px;
    position: absolute;

    width: 91px;


}



#navright2 {
    background: url("../Menuleiste/images/menu-rechts.png") no-repeat scroll right top transparent;
    height: 83px;

    position: absolute;

    right: -91px;
    width: 91px;


}

Das klappt in meinem Firebug wunderbar so.

 

[the_zoker_09]

Ok, also vom Layout hat sich ja jetzt nichts geändert.... (oder ist das nur bei mir so?)

Kann ich jetzt die Ebenenposition mit z-index setzten? (weil das funktioniert noch nicht: die beiden Teile "navlinks2" und "navrechts2" legen sich immer noch über das "menubar2")



edit: Nur so ne Frage am Rand: bekommst du bei Firebug auch die Meldung

"NetworkError: 404 Not Found - http://area51.crystalblood.de/Test/Menuleiste2/none"

oder kommt die nur bei mir?

 

[threadi]

Nein, die Meldung kommt bei mir nicht.

z-index kannst Du jetzt natürlich ergänzen. Gib dem relativ positionierten Element die 1, den absolut positonierten jeweils 10. Dann kannst Du mit right bzw. left experimentieren und so die außen liegenden Grafiken heran rücken, wie weit auch immer du sie haben willst.

 

[the_zoker_09]

Aber ich möchte doch, dass "navleft2" und "navright2" hinter "menubar2" liegen, so wie in diesem Bild hier:

Die beiden äußeren (die abgerundenten Teile, die im Code eben "navleft2" und "navright2" heißen) liegen hinter dem dem Hauptrechteck ("menubar2") in der Mitte (denk dir das hellblau Ding ganz in der Mitte einfach mal weg). So soll es sein. Momentan werden aber die beiden äußeren noch vor dem "menubar2" angezeigt.

Ich hoffe man versteht, auf was ich hinaus will. (einfach die Grafik mit der Beispielseite vergleichen).


edit: mit der umgekehrten z-index Vergabe hab ich es jetzt geschafft

Vielen Dank

edit2: Zwar ist mein Hauptproblem gelöst, doch nach dem einfügen des Logos, lässt sich dieses trotz margin:auto nicht in die Mitte bringen...

 

[Tronjer]

Aber ich möchte doch, dass "navleft2" und "navright2" hinter "menubar2" liegen, so wie in diesem Bild hier:

edit: mit der umgekehrten z-index Vergabe hab ich es jetzt geschafft

Vielen Dank

Wollte ich gerade sagen. Ein z-index: -1 ist manchmal hilfreich. ;)

 

[Mark]

Wenn du mir jetzt noch erklärst, was das alles soll, denn ich verstehe das Problem immer noch nicht.
Ein Browser zeigt KEIN 3D an, das ist IMMER ein 2D Bild und wenn es so aussehen soll, als ob es 3D wäre, dann müssen die Bestandteile so gezeichnet sein, dass sie einen 3D Effekt erzeugen, z.B. indem das was weiter hinten liegen soll nach oben versetzt und kleiner gezeichnet wird.
Deswegen liegen im tatsächlichen Bild immer noch sämtliche Teile NEBENeinander, es sieht nur so aus, als ob da Tiefe drin wäre.
Wenn ein gewünschter 3D-Tiefen-Effekt nicht auftritt, ist entweder die Grafik falsch gezeichnet, oder die Positionierungen der Teile passen nicht.

Da kannst du Z-ordern soviel du willst, solange du die Positionen der Teile nicht änderst, ändert sich nicht das Geringste am Ergebnis.
Warum du es jetzt richtig hast ist mir ein Rätsel, ich kann mir höchstens vorstellen, dass du von Anfang an Murks in den Grössenangaben und Positionen hattest, so dass sich da irgendwas überlappt hat, was jetzt rein zufällig von irgendeiner automatischen Browser-Fehlerkorrektur behoben wurde.

 

[the_zoker_09]

Nein es ging schlicht und einfach um die Reihenfolge, wie die Bilder angezeigt werden sollten.

Also stell dir vor: Du hast "Bild1" und "Bild2", nun soll "B1" auf das "B2" draufgelegt werden, du hast also zwei Bilder, die übereinander liegen.

Mein Problem war, dass nicht "B1" auf "B2", sondern "B2" auf "B1" gelegt wurde. Also war die Reihenfolge der Bilder falsch. Das falsche Bild war im Vordergrund.

Ist es jetzt verständlich?


Ich hab noch ein anderes (kleines) Problem:
zwar ist mein Hauptproblem gelöst, doch nach dem einfügen des Logos ("logo2"), lässt sich dieses trotz margin:auto nicht in die Mitte bringen...

 

[Tronjer]

Ein Browser zeigt KEIN 3D an, das ist IMMER ein 2D Bild und wenn es so aussehen soll, als ob es 3D wäre, dann müssen die Bestandteile so gezeichnet sein, dass sie einen 3D Effekt erzeugen, z.B. indem das was weiter hinten liegen soll nach oben versetzt und kleiner gezeichnet wird.

Das stimmt aber nicht. Ein moderner Browser ist durchaus 3D-fähig. Stichwort: WebGL.