Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Abstände von Left oder Right variabel angeben

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard Abstände von Left oder Right variabel angeben

    Hallo zusammen,

    ich habe einen Top-Link Button mit (position:fixed) eingebunden und kann ihm einen seitlichen Abstand mit einem festen Wert zuweisen. Wenn man aber diesen seitlichen Abstand variabel gestalten möchte damit Viewports mit unterschiedlichen Breiten es richtig darstellen habe ich bislang noch keine Lösung gefunden.
    Gibt es eine Möglichkeit die Werte von Left oder Right abhängig von der Breite des Viewports anzugeben? Der Top-Link Button sollte beim Scrollen mitwandern. Die betreffende Webseite ist unter https://sub.musikverein-hirschzell.de/ zu finden.
    Danke!


    Gruß
    Thomas

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Gibt es eine Möglichkeit die Werte von Left oder Right abhängig von der Breite des Viewports anzugeben?
    Media-Queries sind eigentlich für so etwas gedacht oder habe ich Deine Frage vollkommen mißverstanden?
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich würde das so umsetzen:

    - damit .toplink_button immer innerhalb <main id="main"> verbleibt, würde ich:
    - .toplink_button ein position: absolute; vergeben
    - somit kannst du anstatt den via right: 15.625rem; rechts zu halten:
    - via z.B. right: 30px; immer am rechten Rand halten ... egal wie breit der Viewport ist
    - ggf. musst du dann noch den 'top'-Wert mit anpassen, da sich die absolute Position nun verändert hat
    Grüsse
    Bernhard


  4. #4
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Ich setze bereits Media-Queries ein, aber ich kann mit denen das Problem leider nicht abfangen, zumindest weiß ich nicht wie.
    Wenn ich z.B. das Media Query hernehme mit einer Breite von 1024 Pixel bis 1279 Pixel und einer festen Seitenbreite für die Webseiten von 1024 Pixel, dann würde der definierte Seitenabstand nur bei Viewports mit 1024 Pixel passen.
    In meinem Fall habe ich ein 2-Spalten Layout mit rechter Spalte bei dem der Top-Link Button 240px nach links verschoben wird, damit dieser in der Main-Spalte am rechten Rand eingeblendet wird. Bei Viewports mit mehr als 1024 Pixel bis hin zu 1279 Pixel in der Breite würde der Top-Link Button immer weiter nach rechts in die rechte Spalte hinein verschoben werden.
    Meine eigentliche Frage war, was man tun könnte damit der Top-Link Butten immer am rechten Rand der Main-Spalte eingeblendet wird unabhängig von der Breite des verwendeten Viewports. Daher kam mir die Idee mit der variablen Angabe vom rechten Seitenabstand für den Top-Link Button. Trotz meiner Recherchen konte ich hierzu nichts entsprechendes finden.
    Danke!

  5. #5
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    Ich würde das so umsetzen:

    - damit .toplink_button immer innerhalb <main id="main"> verbleibt, würde ich:
    - .toplink_button ein position: absolute; vergeben
    - somit kannst du anstatt den via right: 15.625rem; rechts zu halten:
    - via z.B. right: 30px; immer am rechten Rand halten ... egal wie breit der Viewport ist
    - ggf. musst du dann noch den 'top'-Wert mit anpassen, da sich die absolute Position nun verändert hat

    Danke, das würde prinzipiell schon funktionieren, aber dadurch wandert der Top-Link Button beim Scrollen nach unten nicht mehr mit.

  6. #6
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wenn du die x-Position an #main festmachen willst und die y-Position an body, dann wird das wahrscheinlich Javascript erfordern.

  7. #7
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Ich habe bereits ein Javascript dafür im Einsatz, damit der Button ausgeblendet wird und ein langsames hochscrollen möglich ist. Meine Versuche damit sind alle im Sand verlaufen weil CSS mit "position:fixed;" definiert ist. Anbei mein Javascript, vielleicht kann man dies so umbauen um mein Vorhaben realisieren zu können.

    Code:
    $(document).ready(function() {
      $('div.toplink_button').hide();
      $(window).scroll(function(){
        var value = 100;
        var scrolling = $(window).scrollTop();
        if (scrolling > value) {
          $('div.toplink_button').fadeIn();
        } else {
          $('div.toplink_button').fadeOut();
        }
      });
      $('div.toplink_button').click(function(){
        $('html, body').animate({scrollTop:'0px'}, 1000);
        return false;
      });
    });

  8. #8
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Warum hast Du mit Media Queries ein Problem?
    Du kannst Dir dafür doch dort Media Queries setzen, wo Du sie brauchst.
    Hier mal ein von der Positionierung her eher sinnfreies Beispiel, um zu verdeutlichen was ich meine

    Code:
    .toplink_button {
        position: fixed;
        width: 38px;
        height: 38px;
        right: 20px;
        bottom: 40px;
        z-index: 1000;
        cursor: pointer;
        border-radius: 25px;
        border: 1px solid #707070;
        background-image: url("/files/themes/musikverein/mvtheme0017-grafik-toplink-arrow.png");
    }
    @media only screen and (min-width:500px) {
      .toplink_button {
        right: 100px;
        bottom: 100px;
      }
    }
    
    @media only screen and (min-width:700px) {
      .toplink_button {
        right: 50%;
        bottom: 100px;
      }
    }
    
    @media only screen and (min-width:1200px) {
      .toplink_button {
        left: 20px;
        top: 1px;
      }
    }
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •