Buttons am rechten/linken Bildschirmrand fixiert mit Links

[Gast]

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

[Sempervivum]

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

[Gast]

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.

[arnego2]

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.

[Sempervivum]

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:

#id-des-containers {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

(ungetestet)

[daniel5959]

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

[Gast]

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?

[Gast]

@Sempervivum OK, danke ...

[daniel5959]

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.

<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

[daniel5959]

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.

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

[daniel5959]

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.

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

[Localfu]

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:

#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