Fixen Button immer im Vordergrund

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Fixen Button immer im Vordergrund

Themen-Einstellungen

Thema drucken

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Fixen Button immer im Vordergrund datum

28.11.2017 09:09

Essotiger

Informationen anzeigen

Beitr�ge:	9
Registriert seit:	06.04.2017

Hallo!

Wollte mir einen fixen Button mit Hover basteln, welcher immer im Vordergrund sein soll.

Habe dazu etwas CSS von einem anderen "Bannerbutton" abgewandelt und ein Widget mit etwas HTML erstellt.

Hier die Seite

Es klappt ja auch schon ganz gut, aber nicht perfekt!

* Wenn man runterscrollt, dann ist der Button dann doch hinter der Navigationsleiste.
* Der Text im Button ist als Link unterstrichen und ich bekomme das nicht weg.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<style type="text/css">
/*<![CDATA[*/
/* Onlinerservierung*/
 
.slideshow-banner {
 
width: 320px;
height: 150px;
overflow: hidden;
position: fixed;
top: 20px;
left: 10px;
 
}
 
.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;
-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>
 

1
2
3
4
5
 
<div class="slideshow-banner">
    <div class="banner">
        <a href="Dein Link"><span style="color: #cccccc;">Onlinereservierung</span></a>
    </div>
</div>
 

Könntet Ihr mir da bitte etwas Hilfe zukommen lassen?

Danke.

Antworten

#2 | RE: Fixen Button immer im Vordergrund datum

28.11.2017 15:51

make

Informationen anzeigen

Beitr�ge:	44
Registriert seit:	20.07.2016

Hallo Essotiger,

ich bin zwar jetzt nicht der große Spezialist, aber ich denke wenn du mit dem "z-index" arbeitest solltest du deinen Button auf den obersten Layer bekommen.
Ich weiß nicht ob es die eleganteste Lösung ist, sollte aber funktionieren. Einfach Deinen Code mit dem z-index erweitern:

1
2
3
4
5
6
7
8
9
10
 
.slideshow-banner {
 
width: 320px;
height: 150px;
overflow: hidden;
position: fixed;
top: 20px;
left: 10px;
z-index: 9999999999;
}
 

Vielleicht können die Cracks etwas dazu schreiben, ob es eine schönere Lösung gibt...

Gruß
make

www.vertraute-erde.de

Antworten

#3 | RE: Fixen Button immer im Vordergrund datum

28.11.2017 16:25 (zuletzt bearbeitet: 28.11.2017 17:17)

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

...das funktioniert leider nicht immer.

Versucht z.B. mal bei Miami, einen der SM-Knöpfe so nach oben zu kriegen:

1
2
3
4
5
6
7
 

a.cc-sharebuttons-mail {
    position: fixed !important;
    top: 0;
    left:5%;
    z-index: 9999;
}
 

..geht nicht! Du kannst den z-index hochsetzen auf 10^12, der Knopf bleibt hinter dem Header versteckt!
Das die Methode funktioniert zeigt sich, wenn Du top: 0; durch top:600px ersetzt. Dann erscheint der Knopf auf einmal unter dem header-image.

Testseite: https://designtest-miami.jimdo.com

Lösung: Du musst den Knopf per jQuery vor den Header der Seite verschieben! Google nach "jquery .prependto"!

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

Bitte sendet mir keine privaten Nachrichten über dieses Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

...hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#4 | RE: Fixen Button immer im Vordergrund datum

29.11.2017 10:04

Essotiger

Informationen anzeigen

Beitr�ge:	9
Registriert seit:	06.04.2017

Habe nun etwas weiter an meinem Button gebastelt.

Ist alles etwas anders geworden und zu meiner Verwunderung klappte es nun auch, dass der Button über der Navigationsleiste ist. Habe es ja ursprünglich auch schon mit z-index probiert und es ging nicht! Nun klappte es aber! Warum weiß ich nicht, aber das macht ja nix!
Zwischenzeitlich entschied ich mich, den Button nach unten zu setzen.

Fall es mal jemandem helfen kann, hier der Code dazu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
.Onlinebuchungbutton a {
 
z-index: 300000000000000;
height: 25px;
overflow: hidden;
position: fixed;
font-weight: 900;
color: #A4A4A4!important;
bottom: 10px;
right: 20px;    
background: #08088A;
display: block; 
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding: 10px;
width: 270px;
font-size: 26px;
text-align: center;
border-radius: 15px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
text-decoration: none!important;
text-underline: none!important;
transition-property: background-color;
transition-duration: 1s; }
   
.Onlinebuchungbutton a:hover {
 
color: #08088A!important;
background-color: #A4A4A4;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 

Auf dem Handy klappt es aber noch nicht, dass der Button fix am unteren Rand bleibt. Das ist nun wohl die nächste Herausforderung.

Antworten

#5 | RE: Fixen Button immer im Vordergrund datum

29.11.2017 10:58

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

Die Seite ist https://rs-academy.jimdo.com/ ?

...probier mal:

1
2
3
4
5
6
7
 

.Onlinebuchungbutton a {
    max-width: 320px;
    margin-left: calc(50vw - 340px / 2);
    position: fixed;
    top: calc(100vh - 50px);
}
 

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#6 | RE: Fixen Button immer im Vordergrund datum

30.11.2017 08:53

@AZ

Ja, das ist die Seite!

Danke für Deinen Input, doch weiß ich nun nicht ganz wie ich Deinen Code versuchen soll!

Als Ergänzung zu meinem Code oder die betreffenden Eigenschaften durch Deine ergänzen???

Sorry!

Antworten

#7 | RE: Fixen Button immer im Vordergrund datum

01.12.2017 18:18

...probier mal ersetzen.

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

Widget funktioniert nicht � � Slideshow - Textbalken an Bildgröße anpassen

�hnliche Themen

Antworten

Letzter Beitrag

Design des "Weiter einkaufen" Buttons ändern
Erstellt im Forum Jimdo-Shop von janickserena 1 26.03.2024 09:31
az_ • Zugriffe: 436
Neuer Cookie-Button - Google Analytics
Erstellt im Forum Bugs, Workarounds und Anregungen von Little Bird 19 26.07.2020 14:04
az_ • Zugriffe: 1944
Schatten um die Buttons in der Navigation
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von chris37170 2 10.02.2019 12:12
chris37170 • Zugriffe: 788
Jimdo Button als Anker
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Charles 7 10.09.2018 10:14
Charles • Zugriffe: 1944
Element auf jeder Seite immer am gleichen Ort
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von sgrafik 3 25.03.2018 19:11
az_ • Zugriffe: 958
Button verschwindet hinter Footer
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Thorsten1812 4 06.01.2018 11:23
Thorsten1812 • Zugriffe: 989
Warenkorb Button - Menge auswählen
Erstellt im Forum Jimdo-Shop von Steambar 2 03.01.2018 10:19
Steambar • Zugriffe: 2147
Hintergrund und Vordergrund fixieren.
Erstellt im Forum Jimdo-Elemente von Ralmon 0 05.02.2017 14:24
Ralmon • Zugriffe: 1166
Farbe der Buttons im Bestellablauf per CSS ändern
Erstellt im Forum Allgemeines von immergruen 8 30.08.2016 20:42
immergruen • Zugriffe: 2192

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an