Mit CSS ein Object in den Hintergrund legen

  • Hallo zusammen,

    ich programmiere gerade eine Intranet-Website für unser Unternehmen. Und eigentlich bin ich auch schon fertig nur ein Bug stört mich sehr.

    Problem: Ich habe ein Dropdown-Menü was top funktioniert und responsiv ist. Öffne ich in Chrome oder Firefox mein Object bei dem eine PDF mit eingebettet ist, so kann das DropDown Menü ganz normal aufgemacht werden und man sieht alle unterpunkte. Mach ich das gleiche im IE11 so wird das gesamte Dropdown in den Hintergrund gelegt und ich kann keinen Punkt anklicken.


    So sieht der Quellcode aus.


    Natürlich habe ich mich informiert und schon seit Wochen auf der Fehlersuche aber leider wird überall nur gesagt das man den "z-index" anpassen sollte.

    Das habe ich schon alles probiert aber leider ohne Erfolg. Man sieht nur das kleine Dreieck vom Dropdown im IE11 (siehe Dateianhänge) mehr aber auch nicht. ;(


    Ich hoffe mir kann irgendjemand helfen.


    Mit freundlichen Grüßen

    Diima

    Dateien

  • Leider geht aus deinem Code das HTML des Menüs nicht hervor, weil es includiert wird. Poste besser den generierten Text aus der Quellcode-Ansicht des Browsers. Außerdem das CSS aus style.css.

  • Sorry hast recht. Wer ich hiermit tun. Ich habe nur vorhin mit einem geredet der gemeint hat das liegt am IE11 das er irgendwie die zindex nicht richtig verarbeiten kann.


    Trotzdem hier Code:


    Vielleicht hat jemand eine Idee sonst werde ich mal umstrukturieren müssen.


    Danke und Gruß

    Diima

  • Hier noch CSS (Musste einige Sachen wegschneiden damit ich das Posten kann):

  • Ich werde es mal heute Abend ausprobieren.

    Sieht aber echt mega komisch aus und wieso das so geht, geht mir gerade noch nicht in mein Kopf.


    Danke aber trotzdem schon mal :)

  • Ein wunderschönen guten Morgen,

    ich habe jetzt das ganze Mal getestet.

    Code: CSS - 1
    1. .SupportPDF{
    2. background: url(#);
    3. }

    Code: CSS - 2
    1. .SupportPDF{
    2. background: url(../Cross/Support.pdf);
    3. }

    Ich habe beide Möglichkeiten getestet. Bei der ersten passiert gar nichts, alles bleibt wie es war.

    Bei der zweiten erscheint einfach gar nichts nur mein Header und Footer...


    Hab ich das falsch verstanden?


    Ich habe mir auch den Beitrag angeschaut in dem Forum auf englisch... Dort steht ja man soll einen Transparenten Hintergrund drauf legen... Aber irgendwie klappt das auch nicht wirklich.


    Gruß Diima

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Diima ()

  • Stimmt die Klasse? In deinem ersten Posting lautet sie einfach "Support". Ich hatte es getestet, indem ich eine Testseite mit deinem HTML und CSS angelegt habe und es hatte funktioniert.

  • Hey,

    ja das stimmt ich habe es nur für Tests umbenannt gehabt und habe es dann hier eingetragen...

    Das DropDown ist leider noch immer unter dem Object PDF. X(


    Da wir aber im Betrieb fast nur IE11 nutzen sollte es da funktionieren...||

  • Der HTML Teil ist genau gleich geblieben...

    Und mein CSS-Teil habe ich so erweitert:

    Code: CSS
    1. .Support{
    2. padding: 1% 1% 1% 1%;
    3. background-image: url(#);
    4. }
  • Die Aussage, dass es bei mir funktioniert, muss ich zurück ziehen. Ich habe da wohl etwas mit den Browsern durcheinander gebracht, das mit dem background funktioniert bei mir auch nicht.


    Ich habe jedoch dieses gefunden:

    http://jsfiddle.net/Jordan/gDuCE/

    und versucht, in deine Seite einzubauen. Funktioniert im Prinzip aber noch nicht perfekt. Vielleicht kannst Du mit CSS die Animation auf das .cover abbilden, so dass man auf die zyklische Bearbeitung verzichten kann.


    HTML:

    CSS

  • Guten Abend,

    ich habe das mal probiert. Leider klappt es nicht wirklich. Sobald ich eine vorhanden PDF anzeigen lasse wird weiterhin das ganze unter die PDF gemacht.

    Da ich das ganze nicht hinkriege werde ich es jetzt einfach als Download anzeigen dann öffnet es sich immer alles lokal auf den PCs.

    Werde aber weiter dran arbeiten vielleicht finde ich noch irgendwie eine Lösung.


    Danke für deine Unterstützung. Wenn ich es hinkriege werde ich mal das hier reinstellen.


    Gruß Diima

  • Eine Alternative ist, das PDF nicht in einem object-Element anzuzeigen sondern als Grafik mit pdf.js.

    Dieses konnte ich relativ schnell recherchieren und es funktioniert im IE:

  • Wuhu es geht :D Richtig cool!!!


    Jetzt ist das Problem das es nur einseitige PDFs zu einem Bild macht. Habe gedacht ich kann das so lösen indem ich eine Variable anlege und diese durch eine While-Schleife jage und die hochzähle leider ist das glaub ich nicht richtig gewesen der Gedanke :D


  • Der Gedanke ist sicher nicht falsch. Das Problem ist nur, dass die aktuelle Seite immer in das selbe Canvas gerendert wird. Ich erwarte, dass dann dort nur die letzte Seite zu sehen ist. Man müsste also für jede Seite ein neues Canvas anlegen.

    Alternativ eine Funktion zum Blättern anlegen: Pfeiltasten für vor und zurück und zusätzlich ein Eingabefeld wo die Seitennummer angezeigt wird und man sie ändern kann. Wenn ich mich richtig erinnere, macht es so der Betrachter des Browsers für ein object-Tag.

  • Könnte dann so aussehen:

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • Funktioniert einfach nur unglaublich gut!

    Ich danke dir einfach unglaublich sehr! Und vor allem mein vollsten Respekt!


    :thumbup::thumbup::thumbup::thumbup::thumbup::thumbup::thumbup::thumbup:


    Gruß Dima