Float 'übereinander'

[DrMueller]

Hallo Leute,

erstmal sorry, ich weiss, dass Anfängerfragen nicht gern gesehen sind. Aber ich bin da schon den halben Morgen dran ohne eine Lösung zu finden. Entweder ich mache einen Denkfehler oder mir fehlt eine Information:

Ich mache zur Übung eine Webseite, nun möchte ich, dass bei index.php ein Bild reinfliegt (gute Jquery Übung). Dieses Bild sollte Mittig kommen.

Die Webseite ist zwei spaltig per Floats aufgebaut, also Navigation und Hauptinhalt. Per CSS setze ich Bild-Höhe und Breite auf 0 und lasse dies entsprechend per animate vergrössern.

Das klappt alles auch, aber das Bild wird immer nach den gefloateten Blöcken angezeigt. Daher es erscheint nach dem Menü und Text, und nicht darüber.

Mit meinen beschedenen Kentnissen hätte ich gesagt, dass Float ja Teile aus dem Fluss raus nimmt, daher sollte es möglich sein diese übereinander zu lagen und dem Bild einfach einen hohen Z-Index geben, damit dieses sicher als erstes angezeigt wird.

Doch nichts davon klappt, das Bild bleibt beharrlich unten.


Hat jemand eine Idee, was das sein könnte? Ich kann bei Bedarf auch HTML/CSS/JQuery hochladen.



Vielen Dank im Voraus


Müller Matthias

 

[para_noid]

Hi,

Hat jemand eine Idee, was das sein könnte? Ich kann bei Bedarf auch HTML/CSS/JQuery hochladen

Das wär echt ne Idee, weil man sonst nicht sagen kann, an welchen CSS-Eigenschaft das Problem festzumachen ist, bzw. bin ich mir nicht sicher, ob ich die Problematik überhaupt richtig erfasst habe.

Grundsätzliche Vorüberlegungen:

• damit "z-index" als Eigenschaft überhaupt greift, muss für das selbe Element zwingend die Positionsart angegeben werden, selbst wenn diese nicht von der Standardeigenschaft abweicht.
• in diesem Beispiel müsste das Bild (bzw der Container, der es beinhaltet) mindestens auf position: absolute gesetzt sein, um aus dem normalen Textfluss herausgenommen zu werden, weil es sonst immer "nach" den vorherigen Elementen platziert würde.

 

[DrMueller]

Hab mal alles Relevante hochgeladen.
Soweit ich sehe, setze ich es auf absolute und laut FireBug orientiert sich das Teil auch am Body selber.
zIndex kommt gar nicht ins Spiel, da sie untereinander angezeigt werden.


Danke auf jeden Fall schon mal.

 

[para_noid]

Sorry dass ich jetzt erst wieder ankomme.
Der letzte Stand zu dem Thema war glaub ich, dass ich bei den Dateien kein Bild dabei hatte bzw. die JS-Funktion auch gar nicht verwendet wurde, ich jedenfalls das Problem nicht sehen konnte. Ich weiß jetzt nicht ob's an mir liegt. Hast du deinen Anhang so wie er ist mal bei dir ausprobiert?

 

[DrMueller]

Hiho, Forum war down?

Habs jetzt so gelöst:

        var top = ($(window).height() / 2 ) - (200)  + "px";
        var left = ( $(window).width() / 2 ) - (200) + "px";
        $('#uconst').css({"top" : top, "left" : left});
        $("#uconst").append('<p><strong>Diese Website ist noch in Bearbeitung!</strong></p>');
        $('#uconst').animate({width: "400px", height: "400px", top: top, left: left}, 4000);

So lese ich dynamisch die Screen öhe und Breite aus, nehme die hälfte und -200, dann wird es sauber in der Mitte dargestellt.