Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #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

    #1059142

    Es 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.
    #1059150

    Danke 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.

    #1059204

    hm – 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.
    #1059208

    wenn du es eingerichtet hast machen wir die Feinheiten.

    #1059213

    ich hatte den code oben jetzt mal verändert.
    Dann kannst du die linke Zelle bei mobil verstecken

    Du musst dann nur den Button in die Zelle rechts mit hineinsetzen. Nach unten. Denn die absolute Positionierung macht den Rest dann.

    #1059214

    Super 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?

    #1059215

    Bitte 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.

    #1059217

    den Impressum Button nur in die Rechte Zelle setzen. Links aus der Zelle wegnehmen !

    anklicken zum vergrößern:

    • This reply was modified 5 years, 10 months ago by Guenni007.
    #1059218

    Ich 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.

    #1059220

    bitte nicht zusätzlich sondern ausschließlich

    dann musst du nur noch diesen Top wert von 75% anpassen

    #1059221

    fü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
    }
    #1059224

    Sorry 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%.

    #1059225

    Ich habe Deine neue Version hochgeladen.

    #1059226

    siehe 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.

    #1059227

    genau – sieht jetzt gut aus. Oder?

    #1059231

    Jetzt 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?

    #1059259

    Also vorhin war auch der Responsive Fall für mich ok.
    Jetzt sehe ich die Seite nicht mehr, da du ja wohl wieder im Wartungsmodus bist

    #1059327

    Nochmal Danke Guenni007 für Deine tolle Hilfe jetzt passt alles.

    Viele Grüße
    IngW

    #1060430

    Hi,


    @IngW

    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.


    @Guenni007

    Danke für die Hilfe :)

    Best regards,
    Günter

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Button Element fixiert in einer Zelle über Hintergrund mittig unten platzieren’ is closed to new replies.