Homepage für Hundezucht
Du meinst die Akkordeons? Gut gemacht! Gar nicht trivial, so etwas umzusetzen!
Obwohl: mir gefallen die CSS-Akkordeos besser (s. https://designtest-hamburg.jimdo.com/) - aber es gibt dafür viele Lösungen. Ich hab hier mal ein paar ausprobiert: https://designtest-malaga.jimdo.com/
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
...ahh nein, er meint die Buttons links über der tag-Cloud. Beides sehr gut gelungen!
prima! bisschen mehr paddding vielleicht!
2
3
4
5
6
.ksFooter ul {
list-style: none;
text-align: center;
padding: 8px 0; /*line713*/
}
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
AZ, deine Akkordeons schaue ich mir mal an. Ganz glücklich bin ich mit meinen noch nicht, weil ich sie zwar auf eine Mindesthöhe eingestellt bekomme, sie sich aber leider nicht auf eine Max-Höhe erweitern lassen. Trotzdem danke für dein Lob. 
Vielleicht wird mit deinen Akkordeons auch die Seite schneller?! Manche User (nicht alle!) beschweren sich, meine Seite würde so langsam laden....
LG Kersten
Zu den animierten Buttons: Die Seiten habe ich (bis auf eine) in einem Nicht-Sichtbaren Ordner namens Footer versteckt. Sie sind also tatsächlich nur über diese Schaltflächen erreichbar. (Oder über Links i-wo im im Text.)
In die Sidebar habe ich dies in ein Widget geschrieben:
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
<div class="ksFooter">
<ul class="ksFooter2">
<li class="ksFooter3">
<a href="https://www.palaneris.de/news/copyright/" title="Palaneri's Copyright" alt="Link zu Palaneri's Copyright"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/ie541d042773cbb91/version/1542036766/image.png" /></a>
</li>
<li class="ksFooter3">
<a href="https://www.palaneris.de/footer/lageplan/" title="Wo ist Palaneri's?" alt="Link zu Palaneri's Lageplan"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/i9ef538fe05b011d6/version/1542036766/image.png" /></a>
</li>
<li class="ksFooter3">
<a href="https://www.palaneris.de/footer/kontakt/" title="Palaneri's Kontaktformulare" alt="Link zu Palaneri's Kontaktformularen"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/ia562235d14ae3e3b/version/1542036766/image.png" /></a>
</li>
<li class="ksFooter3">
<a href="https://www.palaneris.de/zucht/palaneri-s-interessenten/" title="Palaneri's Info für Welpen-Interessenten" alt="Link zu Palaneri's Info für Welpen-Interessenten"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/i3fcef3618931b7fa/version/1542036766/image.png" /></a>
</li>
</ul>
<ul class="ksFooter2">
<li class="ksFooter3">
<a href="https://www.palaneris.de/footer/gästebuch/" title="Palaneri's Gästebuch" alt="Link zu Palaneri's Gästebuch"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/ibfb8751f5b1d69c9/version/1542036766/image.png" /></a>
</li>
<li class="ksFooter3">
<a href="https://www.palaneris.de/footer/links/" title="Palaneri's Links" alt="Link zu Palaneri's Verlinkungen"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/idedbe2d482bec83f/version/1542036766/image.png" /></a>
</li>
<li class="ksFooter3">
<a href="https://www.palaneris.de/footer/banner/" title="Palaneri's Banner" alt="Link zu Palaneri's Banner"><img src=
"https://image.jimcdn.com/app/cms/image/transf/none/path/s57fec69c5512d8fc/image/i82402ef5f295471a/version/1542036766/image.png" /></a>
</li>
</ul>
</div>
Die Images habe ich mir aus dem Internet zusammen gesucht und in einem Bildbearbeitungsprogramm auf die gleiche Größe skaliert und meinen Farben angepasst. Danach habe ich sie auf einer ebenfalls versteckten Seite abgelegt und im Besucher-Modus die Element-ID für obigen Code kopiert.
Im Head steht dann noch dieses:
(Schon um AZ's angemerkten größeren Abstand ergänzt.)
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
<style>
/* <![CDATA[ */
/*eigenen PNG-Footer gestalten
___________________________________________________________________________________*/
.ksFooter {
positon: absolute;
width: 140%;
margin-bottom: -7%;
margin-left: -20%;
}
.ksFooter img {
max-height: 20px;
max-width: auto;
}
.ksFooter ul {
list-style: none;
text-align: center;
padding: 8px 0;
}
.ksFooter li {
display: inline;
}
.ksFooter a {
padding: 1.5rem 1rem 0.5rem 1rem;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 5px 15px rgba(145, 97, 39, 0.75);
-moz-box-shadow: 3px 5px 25px rgba(145, 97, 39, 0.75);
box-shadow: 3px 5px 15px rgba(145, 97, 39, 0.75);
}
.ksFooter a:hover,
.ksFooter a:focus,
.ksFooter a:active {
background-color: #fcf2d2;
-webkit-box-shadow: 3px 5px 15px transparent;
-moz-box-shadow: 3px 5px 25px transparent;
box-shadow: 3px 5px 15px transparent;
box-shadow: inset 1px 1px 9px rgba(145, 97, 39, 0.75);
}
.ksFooter img:hover,
.ksFooter img:focus,
.ksFooter img:active {
transition: all 1s ease;
transform: rotate(360deg) scale(1.5);
}
/*]]>*/
</style>
Es war ursprünglich mal als Footer gedacht und ist erst später in die Sidebar gewandert. Also nicht wundern. 
Zitat von az_ im Beitrag #4
Beides sehr gut gelungen!
Danke dir! Wenn ich überlege, dass ich mich erst seit einem Jahr ein bisschen mit CSS, HTML und JS beschäftige (und das ja auch nur nebenbei), bin ich ehrlich gesagt ziemlich stolz auf meine Seite. Das Ursprungsdesign Bordeaux ist doch kaum wiederzukennen, oder? Und das alles nur Dank der ganzen Tipps in diesem Forum, Herrn Google und Trail & Error. Sind zwar viele geklaute Snippets, aber ich musste ja alles für meine Seite passig machen. War nicht immer ganz so simple und hat Stuuuuunden gedauert.
Zitat von az_ im Beitrag #3
Obwohl: mir gefallen die CSS-Akkordeos besser (s. https://designtest-hamburg.jimdo.com/)
Ich glaube, ich stelle mich grad äußerst blöd an... Ich habe auf meiner Testseite mal versucht, das umzusetzen. Jimdo löscht bei mir immer den href auf meine ID. Dann kann es natürlich auch nicht funktionieren. Aber warum löscht Jimdo immer wieder die href-Zeile?
Meinen Mini-Text habe ich ausgeblendet:
<p style="display: none;">Textelement.... cc-m-7807945661</p>
Wahrscheinlich ist es ne Mini-Kleinigkeit, die ich falsch mache, oder?
Die reinen CSS-Akkordeons überfordern mein Wissen. Da sind Befehle drin, die habe ich noch nie gesehen. Bis ich das verstanden und umgesetzt habe, dauert es vermutlich wieder ein ganzes Jahr. 
Dein ContentSection-Akkordeon find ich übrigens auch voll klasse!
LG Kersten
...auf was soll ich jetzt antworten???
also - zum letzten Punkt: bestimmt liegt es an den hochkommata "..." und '...' - die Syntax muss ganz genau stimmen!
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
Liebe @Kerstin,
...mach Dir keine Sorgen, die Seite ist schnell. Internetverbindungen sind manchmal wechselhaft. Wenn Du es genau wissen willst: https://developers.google.com/speed/page...insights/?hl=de
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
...das stände alles im Protokoll. wahrscheinlich brauchst Du das gar nicht.
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
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
