-
AuthorPosts
-
January 26, 2019 at 1:22 pm #1059121
Hallo zusammen,
wie kann ich ein Button Element mit der benutzerdefinierte CSS Klasse (kontakt-button) in einer Zelle mit der benutzerdefinierte CSS Klasse (zelle-kontakt) fixiert platzieren.In der Zelle befindet sich ein Hintergrundbild mit den Einstellungen fixiert unten links. Der Button soll unten in der Zelle über dem Hintergrund mittig nicht mitscrollend platzieren werden.
Danke
January 26, 2019 at 3:26 pm #1059142Es wäre um einiges leichter mit der entsprechenden Seite einen css code dir zu liefern.
- This reply was modified 5 years, 10 months ago by Guenni007.
January 26, 2019 at 3:54 pm #1059150Danke Guenni007,
dass Du Dir die Seite (ballettschule-laskiwitt.de) mal anschaust.
Sie ist noch im Aufbau ich schalte den Maintenance Mode aus.Bei Kontakt der (Impressum/Datenschutz)Button soll unter der Figur
fest stehen bleiben.January 26, 2019 at 6:13 pm #1059204hm – das Problem ist, das der innere Container in dem Grid oben platziert ist.
Versuche doch mal bitte das hier in der functions.php deines child-themes:add_action( 'wp_footer', 'move_impressum_button' ); function move_impressum_button() { ?> <script type="text/javascript"> (function($){ $('.avia-button-wrap.kontakt-botton').insertAfter($('.avia-button-wrap.kontakt-botton').closest('.flex_cell')); $('.avia-button-wrap.kontakt-botton').css({ "position": "absolute", "top": "75%", "left": "5%", "margin-top": "50px" }); $('.avia-button-wrap.kontakt-botton').prev('.flex_cell').css("padding-bottom", "100px") })(jQuery); </script> <?php }
- This reply was modified 5 years, 10 months ago by Guenni007.
January 26, 2019 at 6:22 pm #1059208wenn du es eingerichtet hast machen wir die Feinheiten.
January 26, 2019 at 6:57 pm #1059213ich hatte den code oben jetzt mal verändert.
Dann kannst du die linke Zelle bei mobil versteckenDu musst dann nur den Button in die Zelle rechts mit hineinsetzen. Nach unten. Denn die absolute Positionierung macht den Rest dann.
January 26, 2019 at 6:58 pm #1059214Super Danke für Deine Hilfe,
Stimmt der Inhalt für Mobile war deaktiviert habe ich umgestellt, gut das Du mich drauf hingewiesen hast.
Der Button ist jetzt unten am Footer wenn die Auflösung geändert wird wandert er nach oben, kann man Ihn noch fest positionieren und so responsive sicher machen?January 26, 2019 at 6:59 pm #1059215Bitte tausche den Code mal aus- ich habe das ganz aus dem Flex-Cell rausgenommen !
Und nimm den Impressum Button in die Rechte Zelle !
Dann kannst du auch die linke Zelle Verschwinden lassen.January 26, 2019 at 7:08 pm #1059217den Impressum Button nur in die Rechte Zelle setzen. Links aus der Zelle wegnehmen !
- This reply was modified 5 years, 10 months ago by Guenni007.
January 26, 2019 at 7:11 pm #1059218Ich habe es jetzt nach Deiner neuen Version angepasst und den Button nochmal zusätzlich rechts eingefügt.
Klasse dann muss ich die Grafik Mobile nicht anzeigen.January 26, 2019 at 7:13 pm #1059220bitte nicht zusätzlich sondern ausschließlich
dann musst du nur noch diesen Top wert von 75% anpassen
January 26, 2019 at 7:16 pm #1059221für Deine Seite denke ich wäre es gut die Werte so anzupassen:
add_action( 'wp_footer', 'move_impressum_button' ); function move_impressum_button() { ?> <script type="text/javascript"> (function($){ $('.avia-button-wrap.kontakt-botton').insertAfter($('.avia-button-wrap.kontakt-botton').closest('.flex_cell')); $('.avia-button-wrap.kontakt-botton').css({ "position": "absolute", "top": "85%", "left": "5%", "margin-top": "90px" }); $('.avia-button-wrap.kontakt-botton').prev('.flex_cell').css("padding-bottom", "100px") })(jQuery); </script> <?php }
January 26, 2019 at 7:28 pm #1059224Sorry jetzt muss ich nochmal nachfragen ich habe den Button nun einmal in der rechten Zelle bei Kontakt eingefügt.
Was meinst Du mit Top Wert von 75%.January 26, 2019 at 7:32 pm #1059225Ich habe Deine neue Version hochgeladen.
January 26, 2019 at 7:32 pm #1059226siehe einen Post vorher da stehen jetzt 85% und ein margin-top von 90px
also den einen Code mit dem anderen ersetzen.
Und bitte den Button in der linken Zelle entfernen.January 26, 2019 at 7:33 pm #1059227genau – sieht jetzt gut aus. Oder?
January 26, 2019 at 7:54 pm #1059231Jetzt sieht es gut aus und ich hab verstanden wie ich die Position des Buttons ändern kann.
Ist meine erste Webseite dauert alles ein bisschen länger…Für die responsive Auflösungen muss ich nun zum anpassen (.avia-button-wrap.kontakt-botton) in der style.css über @media only screen and (max-width: Auflösung px) usw. anpassen oder?
January 26, 2019 at 11:04 pm #1059259Also vorhin war auch der Responsive Fall für mich ok.
Jetzt sehe ich die Seite nicht mehr, da du ja wohl wieder im Wartungsmodus bistJanuary 27, 2019 at 10:31 am #1059327Nochmal Danke Guenni007 für Deine tolle Hilfe jetzt passt alles.
Viele Grüße
IngWJanuary 30, 2019 at 11:26 am #1060430Hi,
Danke dass Du Enfold verwendest und die passende Lösung gefunden hast.
Bei weiteren Fragen kannst Du gerne ein neues Topic anlegen.
Viel Freude noch mit Enfold.Danke für die Hilfe :)
Best regards,
Günter -
AuthorPosts
- The topic ‘Button Element fixiert in einer Zelle über Hintergrund mittig unten platzieren’ is closed to new replies.