|
|
|
| Latest News |
Latest Threads |
|
|
 |
| 55.080 Posts & 4.945 Themen in 78 Foren |
|
|
|
|
 |
Forensuche |
|
Suchbegriff |
Benutzerauswahl |
Ergebnisse anzeigen |
|
 |
HILFE - Image Slider zu sehr im Vordergrund
7 Beiträge in diesem Thema |
|
|
|
|
|
 |
08.09.2014 - 18:22 Uhr |
|
|
|
|
ich habe ein menü und ein imageslider auf meiner seite installiert.
der image slider ist zu sehr im vordergrund und sollte "eine ebene nach hinten", damit man die menüunterpunkte sieht.
kann mir jemand sagen, wie ich das machen kann?
|
|
|
| |
|
|
|
|
|
|
|
|
09.09.2014 - 16:03 Uhr |
|
|
|
|
So ohne Quellcode kann man nur anhand des Bildes sagen.
Bspw. der Image-Slider einfach per CSS-Code:
| | Quellcode Z-Index: 100; | |
Und für die Navigation dann z.B.: so
| | Quellcode Z-Index: 50; | |
|
|
|
| |
|
|
|
|
|
|
|
|
09.09.2014 - 18:04 Uhr |
|
|
|
|
hier der css-code
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
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| | Quellcode /* http://www.menucool.com */
#sliderFrame
{
position:relative;
width:1208px;
margin:0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:1208px;height:200px;/* Must be the same size as the slider images */
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* image wrapper */
#slider a.imgLink, #slider div.video {
z-index:2;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:10px 0;/* 10px will increase the height.*/
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
#slider div.mc-caption-bg
{
/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
background:Black;/* or any other colors such as White, or: background:none; */
}
#slider div.mc-caption-bg2 {
background:none;
}
#slider div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
text-align:center;
background:none;
}
#slider div.mc-caption a {
color:#FB0;
}
#slider div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
#slider div.navBulletsWrapper {
top:215px;/* Its position is relative to the #slider */
text-align:center;
background:none;
position:relative;
z-index:5;
}
/* each bullet */
#slider div.navBulletsWrapper div
{
width:11px; height:11px;
font-size:0;color:White;/*hide the index number in the bullet element*/
background:transparent url(bullet.png) no-repeat 0 0;
display:inline-block; *display:inline; zoom:1;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
}
#slider div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider div.loading
{
width:100%; height:100%;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;} | | |
|
|
|
| |
|
|
|
|
|
|
|
|
09.09.2014 - 18:15 Uhr |
|
|
|
|
das heißt, die kleinere z-index zahl steht vorne?
je höher um so tiefer in der ebene?
|
|
|
| |
|
|
|
|
|
|
|
|
09.09.2014 - 19:33 Uhr |
|
|
|
|
Genau, der kleinere Z-Index ist die oberste Ebene.
Sprich;
0 wäre ganz oben,
1 unterhalb von 0,
2 unterhalb von 1,
9999 unterhalb von 2,
etc.
Dummerweise steht das bei CSS4You irgendwie falsch da ^^"
Ich denke, wenn du den Z-Index bei #sliderFrame oder #slider rein packst (z.B.: Z-Index: 100;) sollte es damit getan sein
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
|
09.09.2014 - 19:52 Uhr |
|
|
|
|
Zitat
Original geschrieben von k!r!ka
Ich denke, wenn du den Z-Index bei #sliderFrame oder #slider rein packst (z.B.: Z-Index: 100;) sollte es damit getan sein |
So? Als Code-Beispiel:
Alter Code ( #sliderFrame):
| | Quellcode #sliderFrame
{
position:relative;
width:1208px;
margin:0 auto; /*center-aligned*/
} | |
Neuer Code:
| | Quellcode #sliderFrame
{
position:relative;
width:1208px;
margin:0 auto; /*center-aligned*/
Z-Index: 100;
} | |
Oder für #slider
Alter Code:
| | Quellcode #slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
} | |
Neuer Code:
| | Quellcode #slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
Z-Index: 100;
} | |
Wie gesagt:
Ich weiss nicht ob das reicht - sollte aber
|
|
|
| |
|
|
|
|
|
|
|
|
 |
Ähnliche Themen |
|
|
|
|
|
|
|
|
|
HILFE - Image Slider zu sehr i..
