Link aktivieren
...das geht schon, und zwar sogar relativ einfach:
- http://redesign-berlin-tabtest.jimdo.com/hover-effekte/
...da steht unten ein HowToDo
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
hallo @tschud61,
...es muss heißen:
2
3
4
5
<div class="slogantext">
<center>
<a style="color:white" title="Schule" href="http://www.schuleerstfeld.ch/startseite/">schule</a>
</center>
</div>
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
...versuch mal den Link ganz nach vorn zu stellen:
2
3
4
5
6
7
8
9
10
11
12
13
14
<a title="Bibliothek" href="http://www.schuleerstfeld.ch/startseite/">
<div class="vbox">
<img class="transparenz" src="https://image.jimcdn.com/app/cms/image/transf/none/path/s8b799fd53fa286b6/image/i580fd1e7eeac5c15/version/1470042271/image.jpg" alt="" width="205" height="135">
<div class="slogan">
</div>
<div class="slogantext">
<center>
Bibliothek
</center>
</div>
</div>
</a>
LG, az
PS: ...einen Div kannste Dir sparen :)
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
...stimmt, wie gemein! Das liegt wohl am Jimdo-html-Editor, der lässt das nicht zu:
...das Schluß-tag bei
<a title="test" href="#"></a>wird durch Jimdo an eine andere Stelle gesetzt, deshalb funzt es dann nicht mehr. (...nennt sich Autokorrektur!)
Bleibt uns nichts anderes übrig, als den Link zu wiederholen, dann geht´s wieder:
2
3
4
5
6
<div class="vbox">
<img class="transparenz" src=".../image.jpg" alt="" width="205" height="135" />
<a class="slogan" title="" href="#"></a>
<a class="slogantext" style="text-align:center" title="" href="#">test</a>
</div>
...sieht auch schick aus: http://forum-images.jimdo.com/#cc-m-13573541824 (...der ganz unten)
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
Du musst den Code komplett austauschen:
2
3
4
5
6
7
<div class="vbox">
<img class="transparenz" src="https://image.jimcdn.com/app/cms/image/transf/none/path/s8b799fd53fa286b6/image/i580fd1e7eeac5c15/version/1470042271/image.jpg" alt="" width="205" height="135">
<a class="slogan" href="http://www.schuleerstfeld.ch/startseite/"> </a>
<a class="slogantext" style="text-align:center" href="http://www.schuleerstfeld.ch/startseite/"> test </a>
</div>
...und die transitions müssen aktiv sein
2
3
4
5
6
7
8
.vbox .slogan, .vbox .slogantext {
-webkit-transition: all .5s ease-out !important;
-moz-transition: all .5s ease-out !important;
-o-transition: all .5s ease-out !important;
transition: all .5s ease-out !important;
}
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
Du hast alles richtig gemacht auf http://tschudi61-testseite2.jimdo.com/html-1/, jedenfalls mit "Test".
Nun setzt Du als letztes den CSS-Code hinter Deinen CSS-Code und gut ist!
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
PS: es ist mir zwar auch ein Rätsel, wieso die transitions auf einmal inaktiv sind, aber probier es halt aus. Mit "!important;" funktionieren sie.
LG, az
PS: installiere Dir mal diesen Editor: http://brackets.io/
- Datei neu
- Datei speichern unter "deinedatei.css"
- CSS hineinkopieren
- alles markieren und "beautify"
- CSS aufräumen
Ergebnis:
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
.vbox {
background: transparent;
position: relative;
margin: 5px auto;
width: 205px;
height: 135px;
display: block;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 0px 0px 0px 0px;
overflow: hidden;
}
.vbox .image {
position: absolute;
width: 205px;
height: 135px;
}
.vbox a,
.vbox a:hover {
text-decoration: none;
}
.vbox .slogan {
position: absolute;
width: 205px;
height: 135px;
text-transform: uppercase;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.vbox .slogan {
background: #1A1A1B;
top: 100px;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px 0;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
-webkit-box-shadow: 0 0 0px #333;
-moz-box-shadow: 0 0 0px #333;
box-shadow: 0 0 0px #333;
}
.vbox:hover .slogan {
color: #fff;
top: 0px;
opacity: 0.7;
}
.vbox .slogantext {
position: absolute;
width: 205px;
height: 135px;
text-transform: uppercase;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.vbox .slogantext {
background: transparent;
top: 95px;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px 0;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
-webkit-box-shadow: 0 0 0px #333;
-moz-box-shadow: 0 0 0px #333;
box-shadow: 0 0 0px #333;
}
.vbox:hover .slogantext {
color: #fff;
top: 47px;
opacity: 0.9;
}
.slogan,
.slogantext {
-webkit-transition: all .5s ease-out !important;
-moz-transition: all .5s ease-out !important;
-o-transition: all .5s ease-out !important;
transition: all .5s ease-out !important;
}
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
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
