Popup Ebene zentrieren und Hintergrund abdunkeln

peter_berg64 schrieb am 08.03.2018 um 15:03 Uhr

Hallo zusammen,

wenn ich ein Bild als Popup anlege, gibt es ja die Möglichkeit den Hintergrund abzudunkeln, wenn sich das Popup öffnet. Eine Möglichkeit des zentrierens habe ich auch hier im Forum gefunden mit Hilfe eines Platzhalters.

Jetzt möchte ich das Ganze auch gerne für eine Popup Ebene realisieren, ist das möglich. Ich benutze den Designer in der neuesten version 15.....

Über einen Tipp würde ich mich freuen.

Viele Grüße

Peter

Kommentare

BeRo schrieb am 09.03.2018 um 18:08 Uhr

[...] Jetzt möchte ich das Ganze auch gerne für eine Popup Ebene realisieren, [...]

Wenn Du schon eine funktionsfähige Lösung für ein popup Objekt gefunden hast, dann kannst Du das damit ausgestattete Objekt problemlos in eine neue (popup) Ebene verschieben, ohne dass es an Funktionalität verliert.

Oder habe ich Dein Problem falsch verstanden?

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 13.03.2018 um 21:35 Uhr

Besten Dank für die Antwort, ich war über das Wochenende weg, kann deswegen erst jetzt mehr Infos geben.

HIer sieht man das Popup-Foto mit abgedunkeltem Hintergrund, wobei das Foto auch immer zentriert zur Seite ausgerichtet ist.

Bei dem zweiten Beispiel handelt es sich um eine Popupebene:

Inhalt Rechteck mit Textinhalt.

Das möchte ich auch zentrieren und abdunkeln wie im oberen Beispiel.

Auf der Seite http://bochumtotal.de/ kann man auch so etwas sehen.

Ich hoffe ich mich mich jetzt klarer ausgdrückt, oder brauchst du noch mehr Infos?

Vielen Dank für die Hilfe.

Peter

BilderMacher schrieb am 13.03.2018 um 22:08 Uhr

Das mit dem Zentrieren hatten wir hier schon mal. Lange her. 😔🎴🕔

Hier mein damaliger Kommentar.

Abdunkeln kennt der WD nur an einer Stelle. In den Webeigenschaften und der Einstellung der Popupebene (Foto).

 

Gruß, B a lderm I cher

(Ich bin KEIN MAGIX Mitarbeiter, ich bin NICHT beim MAGIX-Support!)

-----------------------------------------------------------------------------------------

Meine Systeme: Windows 10 Home 64Bit | Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz | NVIDIA GeForce 840M, 4GB RAM | Vdl 2013/2014/2015/16 Premium (2017); Video Pro X 5 / 6 / 7 (8); Fotostory 2015/16 Deluxe | MAGIX Foto&Grafik Designer 10/11; XARA Designer Pro X 12, Web Designer 10/11 | MAGIX Video Sound Cleaning Lab 2014 | MAGIX Music Maker MX Premium, MAGIX-Music Maker/Studio 2015; Music Maker 2016 Live; MAGIX Audio & Music Lab 2016 Premium | Panasonic HDC-SD66 | Velbon CX-586 | Delamax Capa Videoschiene 60cm mit Velbon PH-358 Stativkopf | ZOOM H2n | Panasonic Lumix DMC-FZ200

peter_berg64 schrieb am 14.03.2018 um 09:35 Uhr

Den Kommentar hatte ich auch schon gesehen, aber irgenwie komme ich damit nicht weiter. Verstehe ich also richtig, nur mit Fotos als Popup kann man den Hintergrund abdunkeln?

Hier ist der Link für den ich das für die einzelnen Programmpunkte umsetzen möchte: http://www.2018.castrop-kocht-ueber.de/

Für den ersten Programmpunkt habe ich schon eine Ebene angelegt. Die sollte mittig sein mit Hintergrund abgedunkelt.

BeRo schrieb am 14.03.2018 um 16:13 Uhr

[...] habe ich schon eine Ebene angelegt. Die sollte mittig sein mit Hintergrund abgedunkelt. [...]

Dann musst Du etwas mehr tun. Die "highslide" Methode ist ja leider nur für Bilder geeignet...

Für Dein Vorhaben musst Du...:

  1. ein paar Zeilen CSS Code in den HTML Head der Seite legen
  2. den Inhalt der popup Ebene in einer Gruppe zusammenfassen
  3. der Gruppe den Namen "popup" geben
  4. "unter" der Gruppe ein halbtransparentes Rechteck in der Seitengröße anlegen, um die Seite abzudunkeln
  5. Auf der Seite einen Link anlegen, mit dem die popup Ebene angezeigt werden kann
  6. Fertig 😉

Im Detail sieht das so aus:

zu 1. Der CSS Code sieht so aus:

<style type="text/css">
  #popup {
    width:500px !important;
    height:350px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-175px 0 0 -250px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:inline;
  }
</style>

Die im Code vorhanden Werte für height/width müssen noch an die tatsächliche Größe der Gruppe auf der pu Ebene angepasst werden.
Das gilt auch für die negativen "margin" Werte, die sollten etwa 50% der Größe der Gruppe in Pixeln haben.

zu 2. 3. 4. hier die Kurzanleitung als Screenshot:

zu 5.

zu 6. 😉

Die online Demo kannst Du hier ansehen.

Die lauffähige Projektdatei, mit der ich die Demo erstellt habe, kannst Du hier herunterladen.

Viel Erfolg

 

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 14.03.2018 um 18:26 Uhr

Super, das ist genau das, was ich meine. Werde ich gerne testen und dann berichten.

Nur noch eine kurze Frage, das soll ja für mehrere Popupebenen umgesetzt werden (mehrere Programmpunkte). Füge ich dann den Code für jede Gruppe ein, #popup1, #popup2, etc??

Und nochmal vielen Dank für die Hilfe!

BeRo schrieb am 14.03.2018 um 19:06 Uhr

[...] Füge ich dann den Code für jede Gruppe ein, #popup1, #popup2, etc? [...]

Genauso sollte das gehen. 👍

Edit 16.03. - 22:37h / zusätzliche Infos
---------------------------------------------------------

Wenn alle popup Ebenen Inhalte in identischer Größe haben, musst Du den CSS Code nicht mehrfach anlegen. Es genügt völlig, wenn Du nur den ID-Selektor erweiterst.

Edit 19.03. - 23:10 h / Korrektur im CSS Code
----------------------------------------------------------

Im Klartext heißt das, dass Du die unterschiedlichen IDs einfach hintereinander, kommasepariert in den einen CSS Code schreibst.
Das kann so aussehen:

<style type="text/css">
  #popup, #popup2, #popup3, #popup4, #popup5 {
    width:500px !important;
    height:350px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-175px 0 0 -250px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:inline;
  }
</style>

Die einzelnen Gruppen in den popup Ebenen müssen dann nur noch die zu den o. a. definierten IDs korrespondierenden Namen (popup2, popup3, usw.) bekommen.

Probier's einfach.

Viel Erfolg

Zuletzt geändert von BeRo am 19.03.2018, 23:10, insgesamt 2-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 17.03.2018 um 12:38 Uhr

Leider haben alle Ebenen der Programmpunkte andere Größen, weil die Inhalte verschieden sind. Aber für die einzelnen Gastro-Popups kann ich den Tipp gut gebrauchen, Danke!!!

Im Moment bin ich bei dem abgedunkelten Hintergrund, da habe ich eine Frage zu dem transparenten Rechteck, kann man es auch seitenfüllend machen? Wenn ich die Option "ausdehnen" wähle, ist das Rechteck nicht mehr sichtbar.

BeRo schrieb am 17.03.2018 um 13:09 Uhr

[...] Frage zu dem transparenten Rechteck, kann man es auch seitenfüllend machen? [...]

Kein Problem. 🙂

Wenn Du mit "seitenfüllend" meinst, dass das Rechteck das komplette Browserfenster ausfüllen soll, dann geht das, wenn du die Größe auf z. B. 20.000 x 20.000 Px setzt und in den Webeigenschaften die Option "Auf Seitenrand beschneiden" entfernst:

Die vergleichsweise "riesige" Größe von 20.000 Px ist nötig, um sicherzustellen, dass der abgedunkelte Hintergrund auch dann noch sichtbar ist, wenn auf einem großen Monitor in der Vollbilddarstellung die niedrigste Zoomstufe im Browser gewählt wird.

Na dann, viel Erfolg und noch einen schönen Rest vom WE 😊

 

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 17.03.2018 um 13:13 Uhr

Das ist ja prompter Service, vielen Dank!

Auch noch schönes Wochenende.

peter_berg64 schrieb am 19.03.2018 um 10:39 Uhr

So jetzt habe ich versucht das umzusetzen, leider klappt das mit dem Zentrieren noch nicht.

Siehe http://www.2018.castrop-kocht-ueber.de/#xl_Xxr_v3_HeadingAnchor:58b9dUw

Programmpunkt Sonadores

Hier Schritt 1.

Dann den Code:

Kann es damit zusammenhängen, dass die Seite auch verschiedene Größenvarianten hat?

Ich wollte das erst nur für die Wide-Variante machen. Gruppe für Gruppe, dann für die anderen da ebenso mit anderen Gruppennamen etc..

Oder habe ich noch einen anderen Fehler drin?

LG

Peter

Update: Ich habe jetzt noch etwas gestestet. Kopiere ich die Ebene Info aus deinem Projekt in ein bestehendes von mir mit der Version 12, klappt alles. Mache ich das gleiche bei der Version 15 haut die Zentrierung nicht hin.

BeRo schrieb am 19.03.2018 um 23:06 Uhr

[...] Kopiere ich die Ebene Info aus deinem Projekt in ein bestehendes von mir mit der Version 12, klappt alles. [...]

Die Schlussfolgerung liegt auf der Hand: "Die Version 15 hat einen Bug"! (oder ein neues Feature 😊).

Wenn man sich näher ansieht, was der WD15 "auf den Tisch" bringt, sieht man schnell, wo's hakt...

Die IDs, die in unserem Fall mit den Namen für die Gruppen in den popup Ebenen angelegt werden, werden vom WD bei der Ausgabe der Varianten verändert. Damit wird der ID bezogene CSS Code, der für die Zentrierung sorgen soll, nicht mehr gefunden.

So sieht der "gesunde" HTML Code der Seite aus:

Das ist der vom WD "gefälschte" Code für die Smartphone Variante:

Die korrekte (Smartphone) ID sollte "popupS" sein.

Abhilfe (Workaround):
Ändere im CSS Code die Namen der IDs der Smartphone-, und der Tablet Variante, durch Voranstellen des WD eigenen Präfix "XXr_v2_", bzw. "XXr_v3_"
Ich vermute dass "v2", "v3" in der neuen ID für die Variante 2-, bzw. Variante3 steht...

So kann der neue Code aussehen:

<style>
   #popup, #popup2, #Xxr_v2_popupS, #Xxr_v2_popup2S {
    width:240px !important;
    height:387px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-193px 0 0 -120px; /* [-(height/2)px 0 0 -(width/2)px] */
    display: block;
  }
 </style>

Dann sollte es klappen 😉

Viel Erfolg

P.S.
Meine Ergänzungsinfo vom 16.03. - 22:37 h, ist leider so nicht brauchbar.
Richtig ist, dass zwar mehrere ID Selektoren hintereinander in den CSS Code geschrieben werden dürfen, sie müssen aber Komma separiert werden und jeder Selektor muss mit einem HashTag beginnen, also so:

#popup, #popup2, #Xxr_v2_popupS, #Xxr_v2_popup2S 

Sorry für die Fehlinfo 😩

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 20.03.2018 um 15:07 Uhr

Also erst mal wieder Danke!!! Ohne die Hilfe hätte ich schon aufgegeben.

Ich komme Stück für Stück weiter, aber habe immer noch nicht den ganzen Durchblick. Wo bzw. wie hast du denn den Code für das Smartphone ausgelesen? Kann ich das direkt in WD15 machen?

Jetzt habe ich die Gruppe Info nochmal in das Projekt kopiert (auf der Main-Seite). Anweisung in den Head der Seite und für diese Seite klappt es perfekt. Auch für die Wide passt es (Code angepasst), fehlt mit nur noch für das Handy, muss aber jetzt erst unterbrechen.

LG

Peter

BeRo schrieb am 20.03.2018 um 17:52 Uhr

[...] wie hast du denn den Code für das Smartphone ausgelesen? [...]

Ich habe die exportierte HTML Seite mit einem einfachen Texteditor geöffnet und nach der vergebenen ID (Namen) gesucht...

[...] Kann ich das direkt in WD15 machen? [...]

Nein, das geht leider nicht, aber der oben gezeigte Weg ist ja nur 2 Mausklicks entfernt. 😉

[...] fehlt mit nur noch für das Handy [...]

Mit der oben genannten Methode (Suche nach Namen) sollte Dir auch das gelingen. 👍

Viel Erfolg

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 22.03.2018 um 10:39 Uhr

So, ich bin wieder ein Stück weiter. Für den ersten Programmpunkt habe ich es schon hinbekommen, dabei aber auch neue Dinge entdeckt. Wenn ich z.B. eine Popupebene animiere, erscheint nur das verdunkelte Rechteck dahinter. Also wieder sofort erscheinen lassen.

Für die Handyvaraiante werde ich wohl die Zentrierung weglassen, weil der Inhalt größer ist als das Display, also muss dort gescrollt werden.

Nur wie ich die Ebenen schliesse, bin ich noch nicht richtig schlüssig. Mache ich es automatisch oder lieber mit Klick. Da befindet sich das automatisch erstellte x immer da, wo die Gruppe eigentlich ist, wenn sie nicht zentriert ist. Eine eigene Schaltfläche ist auch eine Möglichkeit, aber da zeigt er mir den Link nach dem veröffentlichen nicht an auf einer Ebene, da muss ich noch mal gucken.

Aber so langsam nimmt es Formen an, ohne die gute Unterstützung wäre ich noch nicht so weit gekommen.

Besten Dank!!!👍👍👍

BeRo schrieb am 22.03.2018 um 17:53 Uhr

[...] Nur wie ich die Ebenen schliesse, bin ich noch nicht richtig schlüssig.[...]

Normalerweise schließt jeder Klick, der irgendwo auf der Seite gemacht wird, eine geöffnete popup Ebene.

Die "hässliche" Lösung ist das Abwählen der Option "Popup automatisch schließen". Dann wird das weiße "schließen" Kreuz auf schwarzem Grund eingeblendet, was in unserem Fall ein Eigenleben hat, weil es nicht mit der Gruppe zentriert wird. 😫

Lösung:

  • Erweitere den Namen der popup Ebene mit dem Postfix " (lock)"
  • Erstell' eine neue Gruppe in der popup Ebene, die einen Button (+Text) enthält.
  • Gib der Gruppe einen Namen, z. B. "pu-Button"
  • Lege für die Gruppe einen Link an (Webeigenschaften, Link auf...) mit dem die popup Ebene geschlossen wird. Der Link muss so aussehen: "popup:close"

  • Erstell' ein neues CSS Script für die Positionierung des Buttons. Das kann so aussehen
<style>
#pu-Button, #pu-Button2 {
    width:126px !important;
    height:34px !important;
    position: fixed;
    top:50% !important;
    left:50% !important;
    margin: 130px 0 0 -63px; /* [-(height/2)px 0 0 -(width/2)px] */
    display: block;
  }
</style>

Die Pixelwerte für die tatsächliche Position musst Du experimentell ermitteln.

Fertig 😉

Jetzt kann die eingeblendete popup Ebene nur noch mit einem Klick auf den gerade angelegten Button geschlossen werden.

Viel Erfolg

Zuletzt geändert von BeRo am 22.03.2018, 18:38, insgesamt 3-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 22.03.2018 um 22:56 Uhr

Werde ich umgehend testen, nur eine Frage vorab. In den ersten beiden CSS Scripten ist display auf inline gestellt, bei den letzten beiden steht es auf block. Was ist genau der Unterschied, bzw. was bewirkt es in diesem Fall?

Ich werde weiter berichten, wie ich voran komme.😉😊

Danke für die Hilfe!

BeRo schrieb am 22.03.2018 um 23:15 Uhr

[...] In den ersten beiden CSS Scripten ist display auf inline gestellt, bei den letzten beiden steht es auf block. [...]

Für die in den popup Ebenen liegenden Objekte spielt es keine Rolle, ob Du sie mit der Display Eigenschaft "inline" oder "block" anzeigst, da sie keinen Bezug zu einem Child/Parent Element haben. Mehr Details findest Du hier

Frohes Schaffen... 😊

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

peter_berg64 schrieb am 23.03.2018 um 16:26 Uhr

Erste Schaltfläche ist erstellt, genial.

Schönes Wochenende!

peter_berg64 schrieb am 29.03.2018 um 23:53 Uhr

Ich möchte mich hier noch einmal bedanken für die gute Hilfe, ohne hätte ich es nicht geschafft.👍👍👍👍

Ein erstes Ergebnis kann man hier sehen: www.ckü.de

Die Seite ist aber noch nicht komplett fertig, es kommen noch einige Popupebenen dazu.

Und das war heute mein Problem. Auf einmal wurde das Projekt total träge beim erstellen der einzelnen Ebenen. Das Projekt besteht aus drei Seiten-Varianten (Gesamtgröße 8MB), in der Main-Variante habe ich jeweils eine Programm-Popupebene dubliziert, dann unbenannt und mit den anderen Infos gefüllt. Scripte angepasst, dann die Gruppe kopiert und in die Wide-Variante eingefügt. Und da habe ich wohl den Punkt verpasst, ab dem es nicht mehr flüssig lief, sodass ich erst mal weiter gearbeitet habe.😈👿

Als ich heute Abend weiter machen wollte, fiel es mir aber richtig auf und auch das Öffnen und Schliessen ging nur noch schleppend. Den Stand den man jetzt sieht, habe ich noch mit Mühe veröffentlichen können, dann habe ich eine Sicherheitskopie von heute Morgen geöffnet, da läuft alles super.😃😃

Nun meine Frage dazu, kann man einfach die Ebenen dublizieren und dann in die einzelnen Seiten-Varianten einfügen? Oder soll man die Ebenen besser alle neu erstellen?

Die Popupebenen auf der Wide- und Mainvariante sind gleichgroß, deswegen habe ich auch die gleichen Namen dafür genommen, um sie durch die CSS Scripte anzusprechen. Oder besser dort andere Namen? Bedeutet aber auch mehr Script Text.

Über einen Tipp würde ich mich freuen, dass ich nach Ostern durchstarten kann.

Schöne Ostertage.

Peter

 

 

marboe schrieb am 30.03.2018 um 07:24 Uhr

Hallo Peter,

Nun meine Frage dazu, kann man einfach die Ebenen dublizieren und dann in die einzelnen Seiten-Varianten einfügen? Oder soll man die Ebenen besser alle neu erstellen?

Da ich von deinem Problem einen ganzen Liederreigen singen kann ...
Meine Erfahrung ist, dass das schleppende Benutzen des WD definitiv mit Ebenen und deren Anordnung zu tun hat.
Bei meinem Projekten brachte Abhilfe darauf zu achten, dass in allen Varianten die Ebenen in der gleichen Hirarchie sind. Desweiteren, dass sich zB wiederholte oder fixierte Objekte innerhalb der Varianten und Ebenen ungefähr an gleicher Position befanden. Das ist leider sehr kompliziert zu erklären. Vermutlich ahnst du aber, was ich meine.
Gerade bei Platzhaltern mit Fremdcode kann das passieren.

Zu deiner Frage:
auch ich habe mich das gefragt. Eine verlässliche Antwort habe ich nicht.
Ich bin dazu übergegangen, die Ebenen per Hand anzulegen; die Inhalte aber soweit möglich zu kopieren.

Die Popupebenen auf der Wide- und Mainvariante sind gleichgroß, deswegen habe ich auch die gleichen Namen dafür genommen, um sie durch die CSS Scripte anzusprechen. Oder besser dort andere Namen?

Das könnte ganz sicher ein Problem sein.
Ich würde sie gesondert benennen und damit sauber trennen. Beachte: du testest wahrscheinlich nur mit deinem Browser. Das heißt noch lange nicht, dass es auf allen gleich gut funktioniert.
Gerade die Smartphonevariante will sauber erstellt werden. Sie kann aber nur gut funktionieren, wenn bei Aufruf der Seite absolut klar ist, bei welcher Größe welche Anzeige gemacht wird. Wenn du hier quasi zweimal den gleichen Code benutzt, könnte das fehleranfällig sein.

 

Erlaube mir noch abschliessend eine persönliche Anmerkung:
Mir ist in der Desktopvariante der Aufruf der PopUp-Ebenen zu klein. Ohne Zielwasser getrunken zu haben, trifft man den Pfeil nicht gleich.
Wenn man sich auf einer deiner Seiten befindet (nicht Start oder die Letzte) findet man nicht weiter, weil die Navigationsleiste nicht dauerhaft sichtbar ist. Es würde auch ein Pfeil "nach oben" reichen. So muss man die Scrollleiste des Browsers benutzen.

Frohe Ostern, viele Grüße Marboe

peter_berg64 schrieb am 30.03.2018 um 17:05 Uhr

Hallo Marboe, auch Dir Danke für die ausführliche Antwort.

ich werde dann wohl die weiteren Ebenen per Hand anlegen und den Gruppen dann einen individuellen Namen geben. Dann werde ich zwar ein paar mehr Scripte benötigen, aber egal.Ich werde dann mal genauer darauf achten, wann es nicht mehr so flüssig läuft, um dann einen Schritt zurück zugehen. Vielleicht kann ich dann den Fehler, bzw. das Problem erkennen.

Zu Deiner Frage, ich teste mit Firefox und Edge. Die Smartphonevariante mache ich eh ohne Zentrierung, weil die Popupbeben teilweise zu groß sind.

Nun zu deinen Anmerkungen, ich bin für jeden Hinweis danke der mit neutralem BLick mal daruf guckt:
Ich werde wohl den Link noch auf die Bilder legen und anstatt des kleinen Pfeiles das Wort "mehr" nehmen.

Das andere Problem habe ich auch schon im Blick, ich hatte überlegt, eventuell die Navi zu fixieren. Das mit dem Pfeil fände ich aber auch gut, dass ab einer gewissen Tiefe ein Pfeil am rechten Rand auftaucht. Nicht nur der Pfeil im Footer. Oder so ein Pfeil wie hier im Forum für beide Richtungen, hast du das auch einen Tipp auf Lager?

Weiter schöne Ostertage.

Peter

peter_berg64 schrieb am 24.04.2018 um 09:15 Uhr

Hallo marboe, Hallo BeRo,

ich wollte euch nur kurz noch eine Rückmeldung geben.

Ich habe die Seite http://castrop-kocht-ueber.de/ weiter fertig gestellt. Jede Gruppe habe ich manuell erstellt, nur Inhalte kopiert. Die Scripte habe ich ganz zum Schluss eingefügt. Hat an sich ganz gut geklappt. Nur das das Exportieren dauert ein bisschen länger, ist aber auch mehr Inhalt und sind 3 Seitenvarianten.

Für die lange Seite habe ich ein Script eingefügt, das bringt ab einer gewissen Tiefe autommatisch einen Pfeil zum hoch scrollen zum Vorschein.

Bei den einzelnen Programmpunkten habe ich zusätzlich zum Pfeil noch das Wort mehr für den Link auf die Popupebene ergänzt.

Besten Dank nochmal für Eure Hilfe!!👍👍👍👍

Jetzt fehlen mir nur noch die Gastroebenen, aber ich weiß ja nun wie es geht.😉😉

LG

Peter