Jimdo-Specials (Tools, Widgets, HTML und CSS)

05.02.2019 08:57 (zuletzt bearbeitet: 05.02.2019 21:05)

Max19899
#1

Ma

Max19899

...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

Antworten

Beitrag melden

#2

06.02.2019 13:55 (zuletzt bearbeitet: 06.02.2019 14:15)

Max19899
#2

Ma

Max19899

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:

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
 

<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:

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
 
<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:

1
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?

Antworten

Beitrag melden

#3

06.02.2019 14:53

az_
#3

az_

...du kannst das CSS auf den Container begrenzen, z.B.:

1
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