Ankündigung

Einklappen
Keine Ankündigung bisher.

Buttons am rechten/linken Bildschirmrand fixiert mit Links

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Buttons am rechten/linken Bildschirmrand fixiert mit Links

    Hallo, ich such nach einer Möglichkeit Buttons am rechten/linken Bildschirmrand fixiert mit Links zu positionieren.
    Eine Website mit meiner "Wunschvorstellung" habe ich gefunden
    https://www.webdesign-markersdorf.at/adventure/
    Hat das schon jemand realisiert?

    Ein schönes Wochenende
    Franz

  • #2
    Hallo Franz, der Begriff "fixiert" geht schon in die richtige Richtung: Du kannst die Buttons an Bildschirmrand anheften mit "position: fixed;":
    https://wiki.selfhtml.org/wiki/CSS/T...osition:_fixed
    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

    Kommentar


    • #3
      Hallo Sempervivum, den Befehl "fixed" kenne ich, damit habe ich u. A. meinen Header bearbeitet. Was ich suche ist ja 2-3 Buttons, genauso wie auf:

      https://www.webdesign-markersdorf.at/adventure/

      mit Links auf interne Sites auf/in meinen Shop zu integrieren.

      Da ich in dieser Beziehung noch Anfänger bin, hoffte ich, dass es HIER JEMANDEN gibt, der das schon realisiert hat und einige Tipps (ideal wäre die Komplettlösung ) für mich hat.

      Kommentar


      • #4
        Kannst du dir keine Domain leisten die Tourismus etwas näher steht als webdesignerxxxx ???
        Man kann webseiten auch überladen. Gerade bei Tourismus sind die Leute sehr oberflächlich.
        https://arnego2.com <Webseiten, Umbau ab €80, SEO ab €105 im Monat>

        Virenbereinigung < Server Umzüge, Virenbereinigung

        Kommentar


        • #5
          Hallo , gemacht habe ich so etwas schon, auch mit Ein- und Ausfahren beim Hover.
          Du brauchst deine drei Buttons nur in einen Container zu packen, z. B. ein div und dann
          1. diese Container am rechten Rand anzuheften und vertikal zu zentrieren und
          2. die Buttons im Container unter einander anzuordnen.
          Dieses CSS sollte es tun:
          Code:
          #id-des-containers {
              position: fixed;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              flex-direction: column;
          }
          (ungetestet)
          Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
          (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

          Kommentar


          • #6
            Hallo,

            da die eigene Website wie auch die verlinkte mit dem PC-Programm WebSite X5 erstellt wurden, wäre die Frage besser bei ...

            >> https://helpcenter.websitex5.com/de/community

            ... aufgehoben, da diese Funktion vermutlich auch mit dem PC-Programm WebSite X5 in die Website eingebaut werden soll.

            Oder es müsste ein WebSite X5 Template genutzt werden, das diese Buttons bereits enthält.

            daniel5959
            Zuletzt geändert von daniel5959; 31.07.2022, 18:21.
            FindeLinks.de - Kurzinfos mit Linkempfehlung
            Homepage-FAQs.de - seit Ende 2020 offline

            Kommentar


            • #7
              arnego2 Was ich mir leisten kann, steht doch hier wohl nicht zur Debatte! Zumal, wenn man(n) genau hinschaut sieht, dass diese Seite nicht von mir ist, sondern nur eine "Musterseite" -von wem auch immer- auf die ich per Zufall gestoßen bin.
              UND:
              Tourismusseiten schaue ich mir nur zur Urlaubsplanung an. FAZIT. Was hat diese Antwort mit meiner Anfrage zu tun?

              Kommentar


              • #8
                @Sempervivum OK, danke ...

                Kommentar


                • #9
                  Hallo,

                  bei WebSite X5 müsste man wohl ein Templates nehmen, das diese Funktion schon hat oder mit dem HTML-Symbol den HTML-Code inkl. CSS auf die entsprechenden Seiten setzen.

                  Den Code von Sempervivum habe ich als style-Anweisung in einem DIV verwendet und mit WebSite X5 getestet, es geht, zumindest als fixierte unbewegliche Buttons bzw. Text, aber irgendwelche Effekte sehe ich da keine.

                  HTML-Code:
                  <div style=" position: fixed;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  display: flex;
                  flex-direction: column;">
                  Button1<br>
                  Button2<br>
                  Button3
                  <div>
                  Da ich kein CSS-Profi bin, kann ich das Ganze auch nicht als fertigen HTML-Block für das Einfügen in WebSite X5 mit alles drum und dran zur Verfügung stellen, aber vielleicht finden sich ja jemand, der das machen will.

                  Jetzt müsste noch der ganze HTML-Code inkl. den CSS-Anweisungen für die Buttons (Farben, Form usw.) und das Ein- und Ausfahren sowie der Href-Tag für die Linkadresse dort untergebraucht werden, dann könnte man das so in WebSite X5 innerhalb des HTML-Symbols verwenden.

                  Auslagern des CSS-Teil wäre wohl auch möglich, aber dann müsste man wohl die CSS-Datei in den Headbereich der entsprechenden HTML-Dateien manuell einbinden und bei jede Aktualisierung der Website diesen Vorgang wiederholen. Ich wüsste jetzt nicht wo man das bei WebSite X5 direkt machen könnte.

                  daniel5959
                  Zuletzt geändert von daniel5959; 31.07.2022, 23:02.
                  FindeLinks.de - Kurzinfos mit Linkempfehlung
                  Homepage-FAQs.de - seit Ende 2020 offline

                  Kommentar


                  • #10
                    Nachtrag:

                    Habe im Internet einen Code gefunden und etwas angepasst, so dass er bei meinem alten, konvertierten Template von WebSite X5 evo13 (alte Version des Programms) als auch bei einem Templates aus der neuen Version von WebSite X5 evo funktioniert und am rechten Rand fixiert ist.

                    HTML-Code:
                    <style type="text/css">
                    
                    .slideshow-banner {
                    
                    width: 320px;
                    height: 150px;
                    overflow: hidden;
                    position: fixed;
                    top: 40%;
                    right: -110px;
                    
                    }
                    
                    .slideshow-banner2 { top: 50%; }
                    .slideshow-banner3 { top: 60%; }
                    
                    .banner {
                    
                    font: 20px Arial;
                    font-weight: 700;
                    color: green;
                    text-align: center;
                    text-indent: 0px;
                    /*text-shadow: rgba(0,0,0,0.5) 0px 5px 0px;*/
                    position: absolute;
                    padding: 8px 0;
                    left: 0px;
                    top: 30px;
                    width: 210px;
                    background-color: #32CD32;
                    border-radius: 50px 0px 0px 50px;
                    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
                    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
                    box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
                    
                    }
                    
                    .banner a {
                    
                    text-decoration: none;
                    color: #aaaaaa;
                    
                    }
                    
                    .banner:hover {
                    background: #08a63a;
                    text-decoration: none;
                    }
                    
                    </style>
                    
                    <div class="slideshow-banner">
                    <div class="banner">
                    <a href="Dein Link"><span style="color: #cccccc;">Onlinereservierung 1</span></a>
                    </div>
                    </div>
                    
                    <div class="slideshow-banner slideshow-banner2">
                    <div class="banner">
                    <a href="Dein Link"><span style="color: #cccccc;">Onlinereservierung 2</span></a>
                    </div>
                    </div>
                    
                    <div class="slideshow-banner slideshow-banner3">
                    <div class="banner">
                    <a href="Dein Link"><span style="color: #cccccc;">Onlinereservierung 3</span></a>
                    </div>
                    </div>
                    Dieser Code wird dann in WebSite X5 unter dem Punkt "3 Sitemap" bei einer, mehreren oder allen vorhandenen Seiten in einem HTML-Symbol untergebracht, das auf das Raster gezogen wird, dieses kann auch ganz am Ende des Raster eingefügt werden, evtl. das Raster nach unten erweitern.

                    Statt des Textes, wie im Beispiel "Onlinereservierung", können auch (transparente) Bilder, Logos u.ä. verwendet werden.

                    Die CSS-Profis können noch Änderungen vornehmen, falls der Code veraltet ist oder einfacher geschrieben werden könnte.
                    FindeLinks.de - Kurzinfos mit Linkempfehlung
                    Homepage-FAQs.de - seit Ende 2020 offline

                    Kommentar


                    • #11
                      Nachtrag 2:

                      Habe weitere Codeteile aus dem Internet hinzugefügt - geänderter Code jetzt mit sanftem Ausfahren beim Mouseover.

                      Getestet mit WebSite X5, dürfte auch auf anderen Websites funktionieren.

                      Diese beiden Angaben beziehen sich auf das Verstecken und Ausfahren des Banners am rechten Rand:

                      A) Abschnitt ".slideshow-banner" der Wert bei "right: -260px;"

                      B) Abschnitt ".banner:hover" der Wert bei "transform: translateX(-220px);"

                      Auch hier sollten die CSS-Profis nochmals drüberschauen.

                      HTML-Code:
                      <style type="text/css">
                      
                      .slideshow-banner {
                      
                      width: 320px;
                      height: 150px;
                      display: inline-block
                      overflow: hidden;
                      position: fixed;
                      top: 40%;
                      right: -260px;
                      
                      }
                      
                      .slideshow-banner2 { top: 50%; }
                      .slideshow-banner3 { top: 60%; }
                      
                      .banner {
                      
                      font: 20px Arial;
                      font-weight: 700;
                      color: green;
                      text-align: left;
                      text-indent: 0px;
                      /*text-shadow: rgba(0,0,0,0.5) 0px 5px 0px;*/
                      position: absolute;
                      padding: 15px 15px;
                      left: 0px;
                      top: 30px;
                      width: 310px;
                      background-color: #32CD32;
                      border-radius: 50px 0px 0px 50px;
                      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
                      -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
                      box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
                      
                      }
                      
                      .banner a {
                      
                      text-decoration: none;
                      color: #aaaaaa;
                      
                      }
                      
                      .banner:hover {
                      background: #08a63a;
                      text-decoration: none;
                      transform: translateX(-220px);
                      transition: all ease-in-out 0.5s;
                      }
                      
                      </style>
                      
                      <div class="slideshow-banner">
                      <div class="banner">
                      <a href="Dein Link"><span style="color: #cccccc;">[ F ] Facebook Banner 1</span></a>
                      </div>
                      </div>
                      
                      <div class="slideshow-banner slideshow-banner2">
                      <div class="banner">
                      <a href="Dein Link"><span style="color: #cccccc;">[ T ] Twitter Banner 2 </span></a>
                      </div>
                      </div>
                      
                      <div class="slideshow-banner slideshow-banner3">
                      <div class="banner">
                      <a href="Dein Link"><span style="color: #cccccc;">[ P ] Pinterest Banner 3</span></a>
                      </div>
                      </div>
                      FindeLinks.de - Kurzinfos mit Linkempfehlung
                      Homepage-FAQs.de - seit Ende 2020 offline

                      Kommentar


                      • #12
                        Moin FranzK,
                        das ist ganz einfach. Du erstellst mit einem div-Element einen Container. Dieser Container bekommt den display-Wert: fixed und dann noch right: und top: angeben. Fertig.

                        Jetzt möchtest du das die Schaltflächen sich beim hovern nach links bewegen. Das machst du dann so:
                        Code:
                        #container {
                        display: fixrd;
                        top: 50%;
                        right: -110px;
                        }
                        
                        #container .container-item {
                        transition-property: all;
                        transition-duration: 0.5s;
                        transition-timing-function: ease;
                        transition-delay: 0s;
                        }
                        #container .container-item:hover {
                        margin-left: -110px;
                        }
                        Viel Erfolg!

                        Localfu
                        PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

                        Kommentar

                        homepage-forum.de - Hilfe für Webmaster! Statistiken

                        Einklappen

                        Themen: 57.111   Beiträge: 432.331   Mitglieder: 29.315   Aktive Mitglieder: 42
                        Willkommen an unser neuestes Mitglied, Olaf Berg Nielsen.

                        Online-Benutzer

                        Einklappen

                        209 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 209.

                        Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                        Die neuesten Themen

                        Einklappen

                        Die neuesten Beiträge

                        Einklappen

                        Lädt...
                        X