#1 Sidebar unten immer sichtbar von Roger 24.01.2020 12:39

avatar

Hallo zusammen

Es gibt ja div. Layouts bei denen die Menüleiste Ober stehen bleibt und immer sichtbar ist (wie zB. bei Malaga).

Ich suche nach der Möglichkeit unten auch so eine Leiste zu haben die immer sichtbar ist.
- da möchte ich die Sponsoren mit ihren Logos zeigen.

Gibt es mit Jimdo diese Möglichkeit, oder verschwindet die Sidebar-unten immer beim scrollen?

Danke schon mal ...
Gruss Roger

#2 RE: Sidebar unten immer sichtbar von az_ 24.01.2020 23:07

avatar

Hallo @Roger,
Du könntest versuchen, die sidebar zu fixieren und mit top:auto und bottom:0 unten anzukleben. bottom:0 wird aber wohl den Footer überdecken, da musst Du Dir dann noch etwas einfallen lassen.

#3 RE: Sidebar unten immer sichtbar von Roger 25.01.2020 15:20

avatar

Danke schon mal für den Ansatz.

Wie meinst DU das genau?

Zitat

<style type="text/css">
/*<![CDATA[*/

aside.jtpl-sidebar.sidebar-options
{

??? in diesem Bereich ???

}

/*]]>*/
</style>


#4 RE: Sidebar unten immer sichtbar von az_ 25.01.2020 22:02

avatar

Auf welcher Webseite? URL?

#5 RE: Sidebar unten immer sichtbar von Roger 25.01.2020 22:25

avatar

https://mehrsprachen2.jimdofree.com

#6 RE: Sidebar unten immer sichtbar von az_ 27.01.2020 13:52

avatar

Danke für die URL - sehr hilfreich!

...die Sidebar würde ich in diesem Fall dann doch unangetastet lassen, aber der Banner könnte mit

1
2
3
4
5
6
7
8
9
 
#banner {
position: fixed;
bottom: 0;
width: 100vw;
margin: 0 -500%;
padding: 0 500% !important;
/*transform: scale(0.85);
transform-origin: bottom;*/
}
 



...einfach über alles herübergelegt werden.

Jetzt kommt es darauf an, was für ein Design das ist. Sieht mir sehr nach "Rome" aus? Dann würde ich den Banner zwar entweder gleich in der Sidebar anlegen und statt #banner nimmst Du dann das #cc-m-123456789 des Sliders.

oder Du setzt den Slider in den Content-Bereich und wirfst ihn per jQuery .appendTo() nach .jtpl-section-aside. So habe ich es auf https://redesign-designtest-rome.jimdofree.com/test/amazon/ gemacht.

LG, az

#7 RE: Sidebar unten immer sichtbar von Roger 29.01.2020 12:43

avatar

Hallo az_

Das Layout ist Miami ... nur so ...

Genau so, das ist perfekt!!
Wie Du es bei "https://redesign-designtest-rome.jimdofree.com/test/amazon/" gemacht hat.

Leider sind meine Jimdo und HTML & Co. Kenntnisse noch nicht (hoffe wird sich noch ändern, bin am dran arbeiten :-) ) soweit, dass ich das so lösen könnte.
DANKE, dennoch für den Anstoss und das zeigen das es geht ...

und auch DANKE, für Deine immer wertvollen Tipps ...

Gruss Roger

#8 RE: Sidebar unten immer sichtbar von az_ 30.01.2020 12:06

avatar

...das html ist eigentlich ganz einfach. Sollte sich auch aus einem Spaltenelement entwickeln lassen - hab ich aber noch nicht gemacht, müsste ich mal durchspielen.

Setz mal die Sponsorenlinks in ein Spaltenelement mit nur einer Spalte, alle untereinander. Bitte die Links aus verlinkten Bildelementen erstellen. Das Ganze auf einer versteckten Seite, und von der schickst Du mir mal die URL (per e-mail bitte). Dann werde ich das gern mal versuchen.

LG, az

#9 RE: Sidebar unten immer sichtbar von az_ 31.01.2020 12:14

avatar

...Danke für Deine Testseite!

ich hatte jetzt keine Zeit, das Skript so zu programmieren, dass es das Spaltenelement automatisch in einen html-stack umwandelt, aber Du kannst einmal folgenden Code einsetzen:

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
 

 
<p class="hide">
banner (Infinite autoplay carousel)
</p>
 
<div id="banner" class="slider">
<div class="slide-track">
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s923e089b5d82addf/image/i09d6c377d843c370/version/1580468138/image.png" data-image-id="6609373285"></a>
 
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sb1dd4417148a16c5/image/i63d3f453e106172a/version/1580407947/image.png" data-image-id="7715394260">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sb1dd4417148a16c5/image/i644c5df31bc8ca7c/version/1580407961/image.png" data-image-id="7715394360">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s923e089b5d82addf/image/i6e3fcf1d56c925f5/version/1580467347/image.png" data-image-id="6609373385">
</a>
</div>
 
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s923e089b5d82addf/image/i09d6c377d843c370/version/1580468138/image.png" data-image-id="6609373285"></a>
 
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sb1dd4417148a16c5/image/i63d3f453e106172a/version/1580407947/image.png" data-image-id="7715394260">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sb1dd4417148a16c5/image/i644c5df31bc8ca7c/version/1580407961/image.png" data-image-id="7715394360">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s923e089b5d82addf/image/i6e3fcf1d56c925f5/version/1580467347/image.png" data-image-id="6609373385">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s923e089b5d82addf/image/i09d6c377d843c370/version/1580468138/image.png" data-image-id="6609373285"></a>
 
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sb1dd4417148a16c5/image/i63d3f453e106172a/version/1580407947/image.png" data-image-id="7715394260">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sb1dd4417148a16c5/image/i644c5df31bc8ca7c/version/1580407961/image.png" data-image-id="7715394360">
</a>
</div>
<div class="slide">
<a href="/"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s923e089b5d82addf/image/i6e3fcf1d56c925f5/version/1580467347/image.png" data-image-id="6609373385">
</a>
</div>
</div>
</div>
 
<link type="text/css" href="https://redesign-berlin.lima-city.de/__test/designtest-rome1/banner/banner.css" rel="stylesheet" />
<script type="text/javascript" src="https://redesign-berlin.lima-city.de/__test/designtest-rome1/banner/banner.js"></script>
 

 
 





LG, az

PS: Leider hattest Du vergessen, die Bilder zu verlinken. Aber das kannst Du ja immer noch nachholen, indem Du statt <a href="/"> einfach <a href="https://pfad/zum/ziel.html">einsetzt.

PPS: hier siehst Du den Banner in Aktion: https://redesign-designtest-rome.jimdofr...est/bannertest/

#10 RE: Sidebar unten immer sichtbar von Roger 31.01.2020 16:47

avatar

DDDDDDAAAAAAANNNNNNNKKKKKKKEEEEEEEE !!!!!!
einfach Hammer !!!

Gruss Roger

Xobor Einfach ein eigenes Forum erstellen
Datenschutz