z-index css
brainstuff
- css
- html
Hallo,
Ich habe eine Seite auf der ein html code (mit css) eine feststehende Kopfzeile erzeugt. Das läuft gut.
Aber wenn ich den gleichen Code auf einer anderen Web-Seite, die ein Video abspielt einbaue (damit auch dort diese Kopfzeile erscheint) dann wird nur ein Element angezeigt (ein scroll-balken rechts, der anscheinend in dem CSS für die Kopfleiste mit eingebaut ist), aber die Kopf-Zeile wird nicht angezeigt.
Ich gehe davon aus, dass ich da in die CSS Datei, die für das Layout von der Kopfzeile zuständig ist, irgendwo den Z-Index einbauen muss, aber ich finde nicht heraus, wo das platziert werden muss.
Kann mir bitte jemand sagen, wo ich das einbauen muss damit die Kopfzeile angezeigt wird?
Danke, brainstuff
Hi,
Kann mir bitte jemand sagen, wo ich das einbauen muss damit die Kopfzeile angezeigt wird?
dein Posting hat absolut keine verwertbare Information. Kein Code-Beispiel, kein Link auf eine Beispielseite, kein Hinweis darauf, wie du genau was realisiert hast.
Wenn du erwartest, dass wir hellsehen können, muss ich dich leider enttäuschen.
Zumindest ein Minimum an Information wäre schon nötig.
Live long and pros healthy,
Martin
@@Der Martin
Wenn du erwartest, dass wir hellsehen können, muss ich dich leider enttäuschen.
😷 LLAP
Hallo Martin,
Ich bin mir schon bewusst, dass das viel zu wenig Informationen sind. Aber es ist fast nicht möglich, Dir da den ganzen Code zu schicken, das wäre auch eine Zumutung.
Ich habe die CSS von einer anderen Seite genommen, wo in der CSS noch eine Menge Sachen drin stehen, die gar nicht gebraucht werden. Dabei hat es noch viele Sachen, die ich noch nicht rausgeschmissen habe, obwohl die sinnlos für die Seite sind, in der ich diese "Kopfleiste" brauche.
Die andere Seite wo das auch rein muss, läuft eigentlich sehr gut, aber ich habe noch nicht ganz verstanden, wieso man da diesen Code nicht davor einfügen kann:
</head>
<div>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="/" class="brand-logo" title="brains"></a>
<ul class="right hide-on-med-and-down">
<li><a href="/kontakt">Kontakt</a></li>
<li><a href="/member login">member login</a></li
</ul>
<ul class="right show-on-med-and-down hide-on-large-only">
</ul>
</div>
</nav>
</div>
danach geht es dann ganz normal weiter:
<div id="logo06"> .....
(Das ist ein Logo, was dann ganz normal angezeigt wird ..).
Hinter dem Logo läuft ein full-screen Video was offenbar als Hintergrund läuft: das Logo steht fest auf dem Video und es hat auch noch ein paar Knöpfe, die auch fest stehen. Wenn man die Seite aber herunterscrollt erscheint noch ein Kasten mit einer Info, der sich dann über die Seite schiebt, wenn man runter scrollt. Das Video, das Logo und die Knöpfe bleiben aber immer am gleichen Platz. Die Nav-Bar müsste einfach den Rand oben bilden wie hier auf meiner Test Seite, wo das läuft; https://mail2vip.com/pxtest/
Die Seite wo ich das dann auch brauche besteht dann aus 3 Niveaus:
Im Hintergrund das Video (fullscreen feststehend), dann das feststehende Logo und ein paar Buttons(auch feststehend) aber mit transparentem Hintergrund, damit das Video nicht überdeckt wird.
Darüber hat es dann noch eine Zone mit transparentem Hintergrund die, wenn man runterscrollt, einen Kasten mit Text reinschiebt. Das sind dann einfach 4 übereinanderliegende Schichten: ganz hinten das Video, dann die Nav Bar, dann das Logo und ganz oben drauf die "Scheibe" mit dem Kasten den man nur sieht wenn man runterscrollt.
Bitte wundere Dich nicht über den Layer mit diesem Kasten, das ist noch keine sehr ausgereifte Idee ... man kann damit zum Beispiel einen 2. screen in das Video ziehen,auf dem Informationen erscheinen, die irgend etwas erklären.
Aber wie gesagt ist das eine Idee, die ich ausprobieren will.
Ich hoffe einfach, dass Du mir sagst, wo (im CSS) ich das Z-index plazieren muss damit es etwas bewirkt.
Ich muss auch noch lernen, wie man unnütze Zeilen aus einem CSS entfernt, damit da keine unnötigen Anweisungen drin stehen die dann vielleicht sogar Sachen im HTML beeinflussen, die schon von einem anderen CSS gesteuert werden.
Danke
brainstuff
PS dieses Forum hat jetzt anscheinend auch gemerkt, dass die Baum-Struktur vom Datei System auch in ganz anderen Bereichen eine ganz tolle Idee ist ...
Hallo,
Ich bin mir schon bewusst, dass das viel zu wenig Informationen sind. Aber es ist fast nicht möglich, Dir da den ganzen Code zu schicken, das wäre auch eine Zumutung.
Ich habe die CSS von einer anderen Seite genommen, wo in der CSS noch eine Menge Sachen drin stehen, die gar nicht gebraucht werden. Dabei hat es noch viele Sachen, die ich noch nicht rausgeschmissen habe, obwohl die sinnlos für die Seite sind, in der ich diese "Kopfleiste" brauche.
mit anderen Worten: Du kopierst einfach verschiedene Schnipsel zusammen, ohne zu verstehen, was du da eigentlich tust. Das führt in den seltensten Fällen zum Ziel.
Die andere Seite wo das auch rein muss, läuft eigentlich sehr gut, aber ich habe noch nicht ganz verstanden, wieso man da diesen Code nicht davor einfügen kann:
</head> <div> <body> <div class="navbar-fixed"> <nav> <div class="nav-wrapper"> <a href="/" class="brand-logo" title="brains"></a> <ul class="right hide-on-med-and-down"> <li><a href="/kontakt">Kontakt</a></li> <li><a href="/member login">member login</a></li </ul> <ul class="right show-on-med-and-down hide-on-large-only"> </ul> </div> </nav> </div>
Das ist schon mal massiv kaputtes (ungültiges) HTML. Ein div-Element außerhalb von body geht gar nicht. Und das leere a-Element ist zumindest fragwürdig, meiner Ansicht nach sogar Unsinn.
danach geht es dann ganz normal weiter:
<div id="logo06"> .....
(Das ist ein Logo, was dann ganz normal angezeigt wird ..).
Dank der sehr kulanten Fehlerkorrektur der Browser, vermute ich.
Hinter dem Logo läuft ein full-screen Video was offenbar als Hintergrund läuft: das Logo steht fest auf dem Video und es hat auch noch ein paar Knöpfe, die auch fest stehen. Wenn man die Seite aber herunterscrollt erscheint noch ein Kasten mit einer Info, der sich dann über die Seite schiebt, wenn man runter scrollt. Das Video, das Logo und die Knöpfe bleiben aber immer am gleichen Platz. Die Nav-Bar müsste einfach den Rand oben bilden wie hier auf meiner Test Seite, wo das läuft; https://mail2vip.com/pxtest/
Akut fehlerhaftes, ungültiges HTML.
Ich hoffe einfach, dass Du mir sagst, wo (im CSS) ich das Z-index plazieren muss damit es etwas bewirkt.
Das kann ich nicht. Weil schon das Original so kaputt ist, dass ich nicht nachvollziehen kann, warum da überhaupt irgendwas wie gewünscht angezeigt wird.
PS dieses Forum hat jetzt anscheinend auch gemerkt, dass die Baum-Struktur vom Datei System auch in ganz anderen Bereichen eine ganz tolle Idee ist ...
Jetzt?? Diese Baumstruktur war hier schon Standard, als ich vor rund 20 Jahren auf dieses Forum aufmerksam wurde.
Live long and pros healthy,
Martin
Hallo Martin,
Und das leere a-Element ist zumindest fragwürdig, meiner Ansicht nach sogar Unsinn.
Bei der leeren Liste sollte man das noch lauter sagen. Aber da habe ich ja noch die Hypothese, dass er uns ein reduziertes HTML gegeben hat.
Bei dem leeren a mutmaße ich eine leere Box, die mit Hintergrundbild sichtbar gemacht wird. 100% unbedienbar, aber würde zum Rest passen.
Rolf
Hallo brainstuff,
Ein div vor dem body Tag?! Links und Listen ohne Inhalt?!
Was soll das? Vielleicht ist es schon das fehlplatzierte div, das alles durcheinander bringt.
Ansonsten gibt es Voraussetzungen dafür, dass z-index wirkt. Unser Wiki-Artikel dazu hat Verbesserungspotenzial, aber das wichtigste ist: z-index wirkt nur auf positionierte Elemente. Nicht auf jedes x-beliebige div.
Rolf
Hallo brainstuff,
um die Spitzen der Kollegen etwas abzufedern: Es ist nicht ohne weiteres möglich, ein CSS Konstrukt aus Webseite 1 in eine Webseite 2 zu übertragen. Sowas kann bei geschickt gewählten IDs und Selektoren gelingen, muss aber nicht.
D.h. Du musst verstehen, was der Kram tut, den Du da eingebaut hast, und auf der anderen Seite an die dortigen Gegebenheiten anpassen.
Stumpfes Copy+Paste ist keine valide Programmiertechnik.
Rolf