Fixen Button immer im Vordergrund

Antworten
#1
28.11.2017 09:09
avatar  Essotiger
#1
Es
Essotiger

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

 Beitrag melden
#2
28.11.2017 15:51
avatar  make
#2
ma
make

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

 Beitrag melden
#3
28.11.2017 16:25 (zuletzt bearbeitet: 28.11.2017 17:17)
avatar  az_
#3
avatar
az_

...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 am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


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

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


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#4
29.11.2017 10:04
avatar  Essotiger
#4
Es
Essotiger

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

 Beitrag melden
#5
29.11.2017 10:58
avatar  az_
#5
avatar
az_

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 am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


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

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


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#6
30.11.2017 08:53
avatar  Essotiger
#6
Es
Essotiger

@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

 Beitrag melden
#7
01.12.2017 18:18
avatar  az_
#7
avatar
az_

...probier mal ersetzen.


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


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

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


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!