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

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Link aktivieren

Themen-Einstellungen

Bereich wechseln

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

#1 | Link aktivieren datum

02.08.2016 12:20 (zuletzt bearbeitet: 02.08.2016 12:20)

tschud61

Informationen anzeigen

Beitr�ge:	48
Registriert seit:	21.01.2016

Hallo allerseits
Ich habe einen html-code wie folgt eingegeben:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="vbox">
<div style="width: 0px;">
<a title="TITEL" href="LINK WOHIN GESPRUNGEN WERDEN SOLL"><img class="transparenz" src="KOPIERTE GRAFIKADRESSE VOM VORSCHAUBILD" alt="" width="205" height="135" /></a>
<div class="slogan">
</div>
<div class="slogantext">
<center>
HIER DEINEN TEXT EINGEBEN DER ANGEZEIGT WERDEN SOLL
</center>
</div>
</div>
</div>
 
 

Im head-Bereich habe ich das Script dazu geschrieben. Nun möchte ich, dass der Link nach der "Animation" aktiviert wird. Leider geht das nicht. Was muss ich im html-Code ändern oder verschieben, damit der Link nach der Animation aktiviert werden kann. Nachfolgend der Link zu meiner Testseite. Vielen Dank im Voraus für eure Mithilfe.
lieber Gruss
Tschud

http://tschudi61-testseite2.jimdo.com/html-1/

Antworten

#2 | RE: Link aktivieren datum

04.08.2016 01:48 (zuletzt bearbeitet: 04.08.2016 01:49)

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

Antworten

#3 | RE: Link aktivieren datum

05.08.2016 18:05

tschud61

Informationen anzeigen

Beitr�ge:	48
Registriert seit:	21.01.2016

Hallo Andreas

Danke für die Antwort; leider kann ich das Vorgehen nicht nachvollziehen.
Nachfolgend mein CSS-Code (Head) und ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<style type="text/css">
/*<![CDATA[*/ /*Fade-Effekt Länderauswahl*/ 
 
.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; } /*]]>*/ 
</style>
 

... und der html-Code (html/widget)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="vbox">
    <div style="width: 0px;">
        <a title="Schule" href="http://www.schuleerstfeld.ch/startseite/"><img class="transparenz" src=
        "https://image.jimcdn.com/app/cms/image/transf/none/path/s8b799fd53fa286b6/image/i3ec7194a245f4261/version/1470042261/image.jpg" alt="" width="205" height="135" /></a>
        <div class="slogan">
        </div>
 
        <div class="slogantext">
            <center>
                Schule
            </center>
        </div>
    </div>
</div>
 

Meine Frage: Wo muss ich was ändern um den Link dann zu aktivieren, wenn die Animation fertig ist. Wäre froh, wenn ich das Problem lösen könnte.
Hier nochmals der Zugang zu meiner Testseite mit dem Problem:

http://tschudi61-testseite2.jimdo.com/html-1/

lg
Stefan

Antworten

#4 | RE: Link aktivieren datum

05.08.2016 18:32

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

hallo @tschud61,

...es muss heißen:

1
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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#5 | RE: Link aktivieren datum

05.08.2016 18:44

Hallo Andreas
Ganz lieben Dank für die Anpassung des Codes; es hat geklappt.
lg Stefan
PS: betreff Hoher-Effekt-Offerte werde ich mich bei dir nächstens melden.

Antworten

#6 | RE: Link aktivieren datum

05.08.2016 19:57 (zuletzt bearbeitet: 05.08.2016 19:58)

Hallo Andreas
Ich konnte nun alles entsprechend anpassen (Danke vielmals); noch eine Zusatzfrage:
* Kann der Link über der ganzen Fläche aktiviert werden; also nicht nur beim Wort "Eltern" sondern über der ganzen schwarzen Fläche, die nach oben fuhr), gäbe es da noch eine Möglichkeit/Code-Ergänzung?
Siehe Link/1. Bild
lg Stefan

http://tschudi61-testseite2.jimdo.com/html-1/

Antworten

#7 | RE: Link aktivieren datum

05.08.2016 21:35 (zuletzt bearbeitet: 05.08.2016 21:49)

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

...versuch mal den Link ganz nach vorn zu stellen:

1
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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#8 | RE: Link aktivieren datum

06.08.2016 00:04

Hallo Andreas
... leider ohne Erfolg. Mit dem neuen Code ist kein Link mehr möglich.
lg Stefan

http://tschudi61-testseite2.jimdo.com/html-1/

Antworten

#9 | RE: Link aktivieren datum

06.08.2016 06:33 (zuletzt bearbeitet: 06.08.2016 18:23)

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

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

1
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

az_ hat folgende Bilder an diesen Beitrag angeh�ngt

Bild 62.png

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#10 | RE: Link aktivieren datum

06.08.2016 14:57

Hallo Andreas
Habe nun viele html-Varianten ausprobiert, war leider nicht erfolgreich. Ich weiss nicht genau wo ich was beim html/widget-code ändern muss. Kannst du mir weiterhelfen?
lg Stefan

Antworten

#11 | RE: Link aktivieren datum

06.08.2016 18:07 (zuletzt bearbeitet: 06.08.2016 18:18)

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

Du musst den Code komplett austauschen:

1
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

1
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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#12 | RE: Link aktivieren datum

07.08.2016 09:17

tschud61

Informationen anzeigen

Beitr�ge:	48
Registriert seit:	21.01.2016

Hallo Andreas
Also, mein html-Code würde so aussehen:

1
2
3
4
5
 
<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>
 

mein aktueller CSS-Code im Head-Bereich sieht so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<style type="text/css">
/*<![CDATA[*/ /*Fade-Effekt Länderauswahl*/ 
 
.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; } /*]]>*/ 
</style>
 

Was heisst nun "...und die transitions müssen aktiv sein"!

1
2
3
4
5
6
 
.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;
}
 

Danke für deine Antwort

lg Stefan

Antworten

#13 | RE: Link aktivieren datum

07.08.2016 10:24 (zuletzt bearbeitet: 07.08.2016 10:25)

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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#14 | RE: Link aktivieren datum

07.08.2016 10:38 (zuletzt bearbeitet: 07.08.2016 13:40)

az_

Informationen anzeigen

Beitr�ge:	2414
Registriert seit:	28.04.2015
Wohnort:	Berlin

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:

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
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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

Bilddateien ab definierter Bildschirmauflösung nicht anzeigen? � � CSS-Code - Browser zeigt nicht an

�hnliche Themen

Antworten

Letzter Beitrag

Tokyo-Design: 2. Sidebar links erstellen
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Sonja_S 3 07.06.2024 16:13
az_ • Zugriffe: 494
Google Analytics Jimdo free Dolphin aktivieren
Erstellt im Forum Allgemeines von Evo2014 3 19.10.2021 12:52
Evo2014 • Zugriffe: 1740
Kennzeichnung von externen Links
Erstellt im Forum Allgemeines von Kersten 11 18.12.2021 02:14
az_ • Zugriffe: 2920
SEO: Interne Links bei Modul Produktübersicht wertlos?
Erstellt im Forum Jimdo-Shop von herr-von-welt 2 16.10.2017 15:38
herr-von-welt • Zugriffe: 1115
Dropdown Menü mit dead link oder internem link
Erstellt im Forum Allgemeines von falko 0 21.09.2017 14:43
falko • Zugriffe: 1393
Link: Farbwechsel beim anklicken
Erstellt im Forum Allgemeines von wabrue 1 02.05.2016 08:29
CharlieW • Zugriffe: 775
Nachteile externer Links in der Navigation
Erstellt im Forum Tutorials von az_ 8 04.03.2018 09:48
Sigi • Zugriffe: 3513
Design Madrid - Positionierung Sidebar von links nach rechts verändern
Erstellt im Forum Allgemeines von FrischerWind 3 30.11.2015 15:01
CharlieW • Zugriffe: 917
Externe Links im gleichen Browserfenster öffnen
Erstellt im Forum "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... von az_ 12 08.03.2021 02:35
D.F. • Zugriffe: 6307

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an