Div mit Position:fixed in den Hintergrund

[Philipp16]

Hallo,
ich habe ein neues Problem bei dem mir Google wieder nicht helfen konnte:

Ich möchte einen Div mit position:fixed; in den Hintergrund bekommen, aber der möchte nicht.

http://test.battlesoft.de/show.php?s=programme
(Bitte in Firefox anschauen, wenn möglich.)
Der rote Div (div#bottomgradient) ist gemeint. Der soll hinter den content (table#main). Dass div#bottom ganz vorne ist ist auch beabsichtigt, ist ja das Menü. Der große Farbverlauf soll aber nur außen (also nicht über dem Content) zu sehen sein.

http://test.battlesoft.de/test2/show.php?s=home
Da sieht man den Verlauf der später das rote ersetzt.

Ich habe schon z-index versucht, hat nicht funktioniert. Habe ein !important dahintergesetzt und immer schön position:-Angaben gemacht, weil das laut der Referenz hier nicht wirkt: Nix gebracht.

Noch zu erwähnen: Sowohl div#bottom als auch div#bottomgradient, also die die nicht mitscrollen, werden so etwas seltsam definiert:

div#bottomgradient{position:absolute; width:100%; bottom:0px; height:212px; z-index:2; background-color:#CC0000;}

#bottomgradient[id]{position:fixed; z-index:2;}

Das ist ein Workaround, funktioniert 1a mit IE, Firefox und Opera, aber leider nur ganz im Vordergrund...

Stylesheet: http://test.battlesoft.de/styles.css

Danke für eure Hilfe.
Viele Grüße
Philipp

[Cheatah]

Hi,

Ich möchte einen Div mit position:fixed; in den Hintergrund bekommen, aber der möchte nicht.

damit etwas im Hintergrund sein kann, muss es einen Vordergrund geben. Diesen hast Du jedoch nicht.

Ich habe schon z-index versucht, hat nicht funktioniert.

The z-index-property applies to positioned elements.

Habe ein !important dahintergesetzt und immer schön position:-Angaben gemacht,

Ja, Du hast die position-Eigenschaft auf den Wert gesetzt, den sie schon besaß. Ein Element wird nicht dadurch positioniert, dass man "position" in den CSS-Code schreibt - jedes Element besitzt ohnehin zu jedem Zeitpunkt über jede CSS-Eigenschaft, also auch über position.

Noch zu erwähnen: Sowohl div#bottom als auch div#bottomgradient, also die die nicht mitscrollen, werden so etwas seltsam definiert:

A propos seltsam: Du hast ein inhaltsleeres Element sowie eine Tabelle, ohne dass tabellarische Daten erkennbar wären. Warum machst Du sowas?

Stylesheet: http://test.battlesoft.de/styles.css

Das hast Du übrigens mehrmals eingebunden. Dein Code ist invalide.

Cheatah

[Philipp16]

Hi Cheatah,

damit etwas im Hintergrund sein kann, muss es einen Vordergrund geben. Diesen hast Du jedoch nicht.

Gedacht wars so:

• Ganz hinten der blaue Farbverlauf, der ja zum body gehört.
• davor der große rote div, bottomgradient
• dann die Tabelle mit dem Inhalt in der mittleren Spalte
• und ganz vorne dann das Menü (unten und zentriert).

Tut schon fast, nur muss bottomgradient eben noch eins nach hinten, hinter den content.

The z-index-property applies to positioned elements.

Ja, Du hast die position-Eigenschaft auf den Wert gesetzt, den sie schon besaß. Ein Element wird nicht dadurch positioniert, dass man "position" in den CSS-Code schreibt - jedes Element besitzt ohnehin zu jedem Zeitpunkt über jede CSS-Eigenschaft, also auch über position.

Ein Element mit position:static; gilt also nicht als positioned?
==> Er rendert erst alle scrollbaren und dann alle festen?
(Oder zumindest so ähnlich?) Sowas hatte ich mir nämlich mal gedacht, daher  auch der Threadtitel "Div mit _position:fixed_ ...".
Wenns so ist, kann mans ändern?

A propos seltsam: Du hast ein inhaltsleeres Element sowie eine Tabelle, ohne dass tabellarische Daten erkennbar wären. Warum machst Du sowas?

Inhaltsleer => da unten soll ein Farbverlauf hin, das ghört halt so.
Tabelle => Ich hätte gerne eine Spalte mit Content drin, die links und rechts so nen Farbverlauf hat. Geht wunderbar mit ner Tabelle :-)
Wenn ichs anders machen soll, sag Bescheid wie...

Das hast Du übrigens mehrmals eingebunden. Dein Code ist invalide.

Wenn das der einzige Grund dafür ist, dass er invalide ist, bin ich ja froh. Das liegt einfach daran dass die Dateien, die included werden auch ohne PHP schon nach was aussehen, drum binden die das genauso ein wie die PHP. Sobald die Seite mal tut, mach ichs raus, extra für dich. Weil funktionieren tut die Seite auch mit wunderbar in sehr viele Browsern: http://www.battlesoft.de/

Danke für jegliche weitere Lösung
Viele Grüße
Philipp

[Philipp16]

Hallo nochmal,

The z-index-property applies to positioned elements.

Ja, Du hast die position-Eigenschaft auf den Wert gesetzt, den sie schon besaß. Ein Element wird nicht dadurch positioniert, dass man "position" in den CSS-Code schreibt - jedes Element besitzt ohnehin zu jedem Zeitpunkt über jede CSS-Eigenschaft, also auch über position.

Dieser grammatikalisch etwas seltsame Satz war die Lösung, hier stehts nochmal im Klartext:
Ein Element wird dann als positioniert bezeichnet, wenn diese Eigenschaft einen anderen Wert als static hat.
http://www.thestyleworks.de/ref/position.shtml

==> Ein position:static (Blödsinn) zu position:absolute geändert, und das ganze funktioniert wie erwartet sogar ohne jegliche z-index-Angaben.

Danke und viele Grüße
Philipp

[Cyx23]

Hallo,

Ich möchte einen Div mit position:fixed; in den Hintergrund bekommen, aber der möchte nicht.

den mit dem roten Hintergund?

Der verschwindet offfenbar -FF2- so:

  
#menucontainer{z-index:-1!important;}  

Also alle z-index abstimmen, vielleicht fehlt auch beim Text-Div noch ein position.

Grüsse aus Düsseldorf

Cyx23

[Philipp16]

Hallo Cyx23,
danke für deine Antwort!

Ich habe jetzt zum menucontainer das mit dem z-index dazu. Allerdings hätten die meiner Meinung nach davor auch schon gestimmt. (Es ist doch richtig, dass ich das rote, was ja nach hinten soll, den niedrigsten Index bekommt, oder?)

Und warum der Textdiv noch ein position verstehe ich genausowenig wie das z-index beim Menucontainer, denn die sind ja alle verschachtelt - wie folgt:
-bottomgradient
-bottom:
....menucontainer
-main (ein table)
....und dann das textteil

Wobei das textding eigentlich garkein div ist? Meintest du etwas anderes?

Viele Grüße
Philipp