Grafik immer im Vordergrund halten, wie mach ich das?

[Nacko]

Hallo liebe Leute!

Acht, toll dasses sowas wiene CSS-Hilfecommunity gibt, die brauch
ich nämlich ganz dringend Bin heute zum ersten Mal hier und suche
bitte gleichn Tipp für die Lösung meines Problems.

Ich habe rechts unten auf meiner Seite eine Grafik eingebaut. Die sitzt
da fest, dank fixed, und scrollt auch immer schön mit, dank scroll. Aber
das Problem ist, das mann die Grafik erst sieht, wenn man ganz runter-
scrollt. Will heißen, die Grafik wird verdeckt von anderen Elementen auf
der Seite. Ich bin echt kein CSS-Crack und bin schon mächtig stolz auf
mein kleines CSS-Script, aber dieses Vordergrund-/Hintergrund-Problem
krieg ich nicht in Griff. Mein CSS-Code lautet wie folgt:

a#rechtsunten
{
bottom: 0px;
right: 0px;
position: fixed;
background-color: transparent;
background-image: URL(http://www.nackonet.de/sk/rechtsunten/test.gif);
background-repeat: no-repeat;
background-attachment: scroll;
display: block;
height: 120px;
width: 120px;
/*text-indent: -999em;*/
color: #FFFFFF;
text-decoration: none;
}

Wie kann ich das hinbekommen, bitte, dass die Grafik immer im Vorder-
grund steht und nicht von anderen Elementen meiner Seite verdeckt wird?

Was muss ich da einbasteln? Und wenn ja, was? Und wenn ja, wo?

)

Bin sehr dankbar für Hilfe!

Alles Gute
Petar

___________________
www.scheissekotzen.de

[Laus]

Am Code selbst kann ich jetzt keinen Fehler erkennen. Gut wäre entweder den ganzen Quelltext und css code oder noch besser eine URL wo man sich dies anschauen kann.

Gruß Xaver

[Nacko]

Hallo Xaver!

Besten Dank. Ich dachte, da gibts vielleicht paar Befehle
oder so, die ich einfach in den CSS-Code einfügen muss,
um die Grafik immer im Vordergrund zu halten.

Wie gesagt, der CSS-Code ist:

a#rechtsunten
{
bottom: 0px;
right: 0px;
position: fixed;
background-color: transparent;
background-image: URL(http://www.nackonet.de/sk/rechtsunten/test.gif);
background-repeat: no-repeat;
background-attachment: scroll;
display: block;
height: 120px;
width: 120px;
/*text-indent: -999em;*/
color: #FFFFFF;
text-decoration: none;
}

Entsprechend hab ich in der index.html das hier:

<a
id="rechtsunten" href="
http://www.zieladresse.de">
</a>

Anschauen kannst dir das gerne mal auf www.scheissekotzen.de,
ganz ganz runterscrollen, ganz unten rechts ist die Grafik, die aber
immer verdeckt wird beim wieder raufscrollen. Fällt dir da vielleicht
was ein?

Besten Dank
Petar

[Laus]

Du setzt die Grafik als Hintergrund für einen Link ein. Nun ist es aber vollkommen normal des der Link mit nach unten verschoben wird wenn darüber andere Elemente kommen. In deinem Fall, da ich annehme du möchtest das die Grafik auch bei den darüberliegenden Elementen als Hintergrund durchscheint, musst du diese Grafik als Hintergrundbild in die rechte Spalte einbinden und den Elementen der rechten Spalte ein Background Transparent zuweisen. Eine andere Möglichkeit ist mir bis jetzt eigentlich nicht bekannt da ein z-index auf den Hintergrund in dem Fall auch nicht geht.

Gruß Xaver

[Nacko]

Hmm, das scheint ja ne ganz vertrackte Sache zu sein...

:-S

Aber andersrum will ich das eigentlich. Die Grafik mit dem
Link drauf soll immer im Vordergrund sein, als als Vordergrund-
grafik, und die ganzen anderen Elemente sollen beim Scrollen
dahinter verschwinden.

Aus technischen Gründen kann ich den Elementen in der rechten
Spalte, abgesehen von eben dieser kleilnen Grafik, keine eigenen
Befehle zuweisen. Kann ich nicht stattdessen mit irgendeinem CSS-
Befehl dafür sorgen, dass die Grafik, auf der der Link liegt, immer
im Vordergrund erscheint?

Oje, ich dachte, das wär ne ganz einfache Sache.

Petar

[Laus]

Du könntest den Link mit Grafik in ein Div packen und dies per z-index in den Vordergrund setzen. Ob das dann auch in allen Browsern so klappt kann ich dir nicht sagen, einfach mal probieren.
Xaver

[Nacko]

Ah, sowas hab ich schomma gehört!

Reicht völlig aus, wenn das mit Firefox funktioniert.

Xaver, wie mach ich dat denn am besten?

:-S

Is vielleicht bisle arg viel verlangt, aber wie
muss mein CSS-Code bzw. mein html dann
aussehen, bitte...?

[Laus]

nimm deine Id #rechtsunten und nimm das a vorne weg und gib ihm einen höheren z-index

Code: Alles auswählen

#rechtsunten
{
bottom: 0px;
right: 0px;
position: fixed;

z-index:10;

background-color: transparent;

/*diesen Teil für lösung 2 entfernen*/
background-image: URL(http://www.nackonet.de/sk/rechtsunten/test.gif);
background-repeat: no-repeat;
background-attachment: scroll;
/*wieder für alle*/
display: block;
height: 120px;
width: 120px;
usw......

den Link setzt du in einen div container dem du die id rechtsunten gibst, also

Code: Alles auswählen

<div id="rechtsunten"><a
href="http://www.zieladresse.de">
<!--für 2 lösung einfügen
<img src="bild.gif" alt="text">
-->
</a> </div>

Lösung 2: Wenn das nicht klappt kannst du das selbe mit einem img Tag probieren wo dann das Bild nicht im Hintergrund eingebunden ist sonder einfach als <img> und dieser dann verlinkt wird ebenfalls mit z-index in den Vordergrund gesetzt

[Nacko]

Hey VIELEN VIELEN DANK, Xaver!

)

Aber das is ja echt ne tricky Sache.

Ich hab beide Lösungen ausprobiert. In beiden
Fällen wird die Grafik zwar immer noch schön an-
gezeigt, aber weiterhin von allem anderen verdeckt.

Was läuft da nur schief, unglaublich...?!

[Nacko]

Außerdem ist mir aufgefallen, dass bei dem Lösungsversuch
der Link auf der Grafik ignoriert wird. Will heißen: Die Grafik wird
zwar angezeigt, aber erstens immer noch von allem anderen verdeckt
und zweitens liegt kein Link mehr drauf, beim Drüberfahren mit der Maus
tut sich nix, kein Link.