Button verschwindet hinter Footer
#1
Hallo zusammen,
bin die letzten Tage dabei auf meiner Jimdo-Website einen Kontaktbutton anzulegen, welcher seitlich an der Website angebracht ist. Ich habe mich dafür von einem Code aus dem Netzt bedient und diesen an meine Bedürfnisse angepasst. Sobald man auf den Kontaktbutton draufklickt sollen die Kontaktdaten angezeigt werden. Dieser Button hat die Position=fixed und bewegt sich somit beim Scrollen mit nach oben oder unten. Bisher klappt das auch alles ganz wunderbar, allerdings stehe ich nun vor einem Problem das mich mittlerweile extrem nervt: Der Button verschwindet beim runterscrollen unter dem Footer (Fußzeile).
Ich habe intensiv im Internet recherchiert aber komme zu keiner Lösung. Verschiedene "z-index-Werte" habe ich ausprobiert.....
Eine ähnliche Frage wurde schon mal in folgendem Thread in diesem Forum gestellt:
Fixen Button immer im Vordergrund
Der Nutzer hat es dort am Ende geschafft, dass sein Button über dem Footer bleibt. Wenn ich jedoch den am Schluss angegebenen Code bei mir eingebe bleibt das Problem bei mir bestehen, d.h. der Button verschwindet weiterhin unter dem Footer.
Anbei mein abgeänderter Code:
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/feedback.css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="feedback.js"></script>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
$(function() {
$("#feedback-tab").click(function() {
$("#feedback-form").toggle("slide");
});
$("#feedback-form form").on('submit', function(event) {
var $form = $(this);
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function() {
$("#feedback-form").toggle("slide").find("textarea").val('');
}
});
event.preventDefault();
});
});
-->
//]]>
</script>
<style>
/* <![CDATA[ */
#feedback{
position: fixed;
z-index: 9999999999;
left: 0;
bottom: 0;
top: 500px;
height: 250px;
margin-left: -0px;
margin-bottom: -3px;
}
#feedback-form {
float: left;
width: 300px;
height: 100%;
position: absolut;
z-index: 9999999999;
padding-left: 15px;
padding-right: 30px;
background-clip: 'padding-box';
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
#feedback-tab {
float: right;
color: #fff;
font-size: 20px;
cursor: pointer;
text-align: center;
width: 120px;
height: 35px;
background: linear-gradient(to top, #205b8c,#184467);
margin-top: 60px;
margin-left: -45px;
padding-top: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 7px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
#feedback-tab:hover {
background-color:#9cb9d1;
color:#b1b1b1;
transition: all ease 0.25s;
}
#feedback-form textarea { resize: none; }
/*]]>*/
</style>
Habt ihr eine Lösung für mich?
Bin in dem Thema ziemlicher Laie. Habe mir die grundlegenden Grundlagen 
die letzten Tage beigebracht.
Würde mich über Unterstützung sehr freuen.
Danke im Voraus.
Grüße
Thorsten
#3
#5
Es klappt 
Super, vielen Dank. Hätte echt nicht gedacht, dass es so einfach sein kann.
Danke nochmal
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
