"z-index" zeigt keine Funktion

[CroneKorkN]

Hallo Community,

ich bastle gerade an dem Header einer Seite: Wenn man über einen Button fährt (:hover) soll darunter ein Text/Menü erscheinen. Dieses versteckt sich nun aber leider hinter anderen Elementen, trotz "position: absolute" und "z-index: 99" ("1", "20" funktionieren auch nicht).

sublimity.de

Es wäre sehr nett, wenn da mal kurz jemand drüberschauen konnte. Imho habe ich die nötige Bedingung, das "display: absolute", erfüllt; folglich soltle das Menü ganz zu sehen sein.
Ist es aber nicht :)

Danke schonmal!

Gruß,
CroneKorkN

[CroneKorkN]

Nachtrag: es geht um die dunklen Buttons, rechts im Header. Einfach mit der Maus drüber gehen und ihr seht das Problem.

[ChrisB]

Hi,

Imho habe ich die nötige Bedingung, das "display: absolute", erfüllt

Erstens meinst du position:absolute,
und zweitens hast du eine absolut notwendige Bedingung für das sinnvolle Arbeiten mit CSS nicht erfüllt, nämlich die, zunächst fehlerfreien HTML-Code herzustellen.
Du hast DIV-Elemente in ein A-Element gesteckt, die dort aber nicht vorkommen dürfen.
Fehler beseitigen, dann weiter sehen.

MfG ChrisB

[cronekorkn]

Hallo ChrisB und danke für deine Antwort!

Du hast DIV-Elemente in ein A-Element gesteckt, die dort aber nicht vorkommen dürfen.

Ok, habe das verbessert, ohne dass sich etwas am Ergebnis ändert.
Der Validator hat mir übrigens schon geholfen den Rest des Designs valide zu halten.

Gruß,
CroneKorkN

[ChrisB]

Hi,

Du hast DIV-Elemente in ein A-Element gesteckt, die dort aber nicht vorkommen dürfen.
Ok, habe das verbessert, ohne dass sich etwas am Ergebnis ändert.

<div id="functions">  
  <div style="...">  
    <div class="function_hover">Tools<br>Hhuhuhu! hehe.<br>Hahah.<br>Test<br>Blalalalalalal<br>Zeile</div>  
  </div>

z-index wirkt immer nur „lokal“.
Du hast dem DIV mit der Klasse "function_hover" zwar einen z-index verpasst, dass darum liegende hat aber keinen. Und da letzteres nun mal unterhalb des nachfolgenden Inhalts liegt, kannst du dem darin liegenden z-index verpassen, bis du schwarz wirst - das wird nichts ändern.
Gebe dem äusseren der beiden einen Wert für z-index.

Der Validator hat mir übrigens schon geholfen den Rest des Designs valide zu halten.

Das ist fein - sinnvoll ist der Code deshalb aber noch lange nicht.
Bspw. dieses kleine Menü solltest du sinnvoll als Liste umsetzen - statt DIV-Suppe zu kochen. (Allein die Startseite enthält 200 DIV-Elemente.)

MfG ChrisB

[cronekorkn]

z-index wirkt immer nur „lokal“.

Danke, habs raus :) Wieder etwas dazugelernt.

Das ist fein - sinnvoll ist der Code deshalb aber noch lange nicht.
Bspw. dieses kleine Menü solltest du sinnvoll als Liste umsetzen - statt DIV-Suppe zu kochen. (Allein die Startseite enthält 200 DIV-Elemente.)

Das standard Tabellenlayout der Forensoftware ist sogar noch um 5.000 Zeichen fetter. Klar, das heißt nicht, dass ich damit jetzt verschwenderisch umgehen muss.

Aber ob ich nun

<ul>  
  <li></li>  
  <li></li>  
</ul>

oder

<div>  
  <div></div>  
  <div></div>  
</div>

verwende ist doch nun auch kein gewaltiger unterschied.

Danke jedenfalls für deine Hilfe.

Gruß,
Martin

[Gunnar Bittersmann]

@@cronekorkn:

nuqneH

Aber ob ich nun

<ul>

<li></li>
  <li></li>
</ul>

> oder  
> ~~~html

<div>  

>   <div></div>  
>   <div></div>  
> </div>

verwende ist doch nun auch kein gewaltiger unterschied.

Am CSS Naked Day ist es ein gewaltiger. Und auf manchen Ausgabegeräten jeden Tag. Denke an nicht visuelle Ausgabegeräte, die die Struktur einer Webseite anders wiedergeben, bspw. vorlesen.

Qapla'

[TomD]

Aber ob ich nun

<ul>

<li></li>
  <li></li>
</ul>

> oder  
> ~~~html

<div>  

>   <div></div>  
>   <div></div>  
> </div>

verwende ist doch nun auch kein gewaltiger unterschied.

Das denkst du, weil du dich auf die von dir definierte visuelle Formatierung verlässt. Die ist aber nicht jedem zugänglich (vielen Menschen und einigen Maschinen wie Google z.B.).