Bitte geben Sie einen Grund für die Verwarnung an
Der Grund erscheint unter dem Beitrag.Bei einer weiteren Verwarnung wird das Mitglied automatisch gesperrt.
CCS-Akkordeon
...immer wieder interessant, dieses Thema. Der Beitrag muss nicht gelöcht werden!
hier ein paar Beisspielseiten dazu:
- https://designtest-hamburg.jimdo.com/
- https://barcelona-test.jimdo.com/
- https://designtest-malaga.jimdo.com/
Dein Skript sah interessant aus, die Lösung hätte gewisss auch andere User hier interesssiert!
LG, az
Na da hast du natürlich Recht, daher hier nochmal der Code:
Seite: https://www.jurablogger.com/testseite (später unter Leistungen zu finden)
CSS:
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
<style type="text/css">
/*<![CDATA[*/
.accordion5 {
width: auto;
margin: 0 auto;
}
.accordion5 [type=radio],
.accordion5 [type=checkbox] {
display: none;
}
.accordion5 label {
color: #444;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
border-bottom: 0;
border-radius: 5px 5px 0 0;
display: block;
margin: 3px 0 0;
padding: 7px;
background: linear-gradient(#fff,#d8dee4);
box-shadow: 0 1px 1px #000;
transition: all 1s ease-in;
}
.accordion5 label:hover {
background: linear-gradient(#fff,#b4bfcb);
color: #444;
}
.accordion5 label:before {
content: '»';
padding: 0 12px 0 5px;
}
.accordion5 [type=radio]:checked ~ label:before,
.accordion5 [type=checkbox]:checked ~ label:before {
content: '-';
padding: 0 14px 0 7px;
}
.accordion5 [type=radio]:checked ~ label + div,
.accordion5 [type=checkbox]:checked ~ label + div {
overflow: auto;
height: 9em;
border-radius: 0 0 5px 5px;
}
.accordion5 div {
height: 0;
padding: 0 10px;
overflow: hidden;
background: #fff;
border: 1px solid #929ba5;
transition: all 0.5s ease-in;
}
.accordion5 p {
color: #333;
}
.accordion5 h3 {
color: #444;
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
padding: 5px 10px;
}
/*]]>*/
</style>
HTML:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="accordion5">
<section>
<input type="checkbox" id="c1" name="ca" value="" /> <label for="c1">Wozu benötige ich juristische Fachtexte?</label>
<div>
<br />
<p>
Unsere Fachbeiträge dienen einerseits zur Schaffung von juristischem Mehrwert, andererseits sorgen Sie mit Hilfe von SEO-Spezifikationen für eine Steigerung Ihrer Google-Platzierung.
</p>
</div>
</section>
<section>
<input type="checkbox" id="c2" name="ca" value="" /> <label for="c2">Worauf zielt die Erstellung von juristischem Content ab?</label>
<div>
<p>
Mit unseren Fachbeiträgen können Sie mittels ausgewählter Keywords wie etwa „Strafverteidiger Köln“ oder „Rechtsanwalt Berlin“ eine zielgerichtete Mandantenakquise durchführen. Dank
unserer SEO-Experten werden Sie von den Nutzern gefunden, die bei Google nach Ihrer Fachexpertise suchen.
</p>
</div>
</section>
.
.
.
</div>
Den Ursprungscode hab ich von http://www.webdesign-klamonfra.de/codesc...t.php#Artikel12. Nr. 17./18./19. wäre das. Aber ich hab einiges geändert, wie z.B. Farbe, Größe, Schatten usw. Finde es nun viel schöner.
Nun habe ich aber noch ein Problem: Ich hätte gern, dass der Text beim Aufklappen etwas weiter unten erst anfängt. Hierzu hab ich folgende Lösung:
2
3
4
5
6
7
8
<style type="text/css">
/*<![CDATA[*/
p { margin-top: 1em; }
/*]]>*/
</style>
Problem hierbei ist, dass ich das Akkordeon ja später auf einen anderen Seite einfügen will, auf der schon Text besteht. Dieser verändert sich dann natürlich auch - soll er aber nicht. <br> Abstand ist mir zu groß, bekomme ich auch nicht geändert irgendwie. Da ich nicht wirklich ein CSS/HTML Profi bin, weiß ich grad nicht weiter. Kann ich den <p> code irgendwie auf das Akkordeon begrenzen?
...du kannst das CSS auf den Container begrenzen, z.B.:
2
3
4
5
.accordion5 section p {
margin-top: 10px;
}
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
- Allgemeines
- Regeln für die Benutzung des Forums
- HowToDo ( = so geht´s)
- Jimdo User-Forum
- Eure Jimdo-Webseiten - Vorstellungsrunde
- Bugs, Workarounds und Anregungen
- Jimdo-Elemente
- Allgemeines
- Jimdo-Shop
- Jimdo-Specials (Tools, Widgets, HTML und CSS)
- Suchmaschinenoptimierung (SEO)
- Sonstiges
- Tutorials
- "OffTopic"-Themen
- "Übernahme" von Beiträgen aus dem offiziellen Jimdo-Forum...
- Nutzungsbedingungen und Haftungsausschluss
- Jimdo-Blog
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
Forenspende
Spenden über PayPal
Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit.
Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.
Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!
...hier ist der direkte Spendenlink
für unsere Kaffeekasse!
