CSS in die Jimdo-Seite einbinden

Antworten
  • Seite 1 von 3
#1
21.01.2016 17:56 (zuletzt bearbeitet: 24.01.2016 11:33)
avatar  tschud61
#1
ts
tschud61

Guten Tag

Ich kenne CSS-Codes, die bestimmte Effekte mittels Mouseover hervorrufen können.
z.B.:

1
2
3
4
5
6
7
8
 
.bild:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 



Wie kann ich diese auf meiner Jimdo-Seite einbinden beziehungsweise aktivieren. Ich freue mich auf jede mögliche Hilfe. Ihr müsst davon ausgehen, dass ich keine Ahnung von CSS habe; die Codes sind lediglich "geklaut".

mit liebem Gruss
Tschudi


 Antworten

 Beitrag melden
#2
21.01.2016 20:07
avatar  az_
#2
avatar
az_

hallo @tschud61

...da habe ich tatsächlich einmal ein Tutorial drüber geschrieben: CSS für Jimdo

Ich hoffe, das hilft Dir weiter :)

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


 Antworten

 Beitrag melden
#3
22.01.2016 11:50
avatar  tschud61
#3
ts
tschud61

Hallo az
Vorab mal vielen Dank für die schnelle Antwort mit dem Hinweis zum Link; ich werde mich nächstens darin vertiefen.

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#4
24.01.2016 10:23
avatar  tschud61
#4
ts
tschud61

Hallo Andreas

Leider hilft mir auch das Tutorial nicht weiter. Da ich, wie erwähnt nur den Code kenne und von CSS keine Ahnung habe, weiss ich nicht weiter.
Ich habe den CSS-Code in den Head-Bereich geschrieben und den Style-Tag am Anfang und am Ende eingeschrieben. Nun hoffte ich, dass sich die Bilder entsprechend bei Mouse-over ändern. Kannst du mir weiterhelfen; im Voraus vielen Dank.

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#5
24.01.2016 11:33 (zuletzt bearbeitet: 24.01.2016 15:09)
avatar  az_
#5
avatar
az_

Hallo @tschud61

ich denke, es liegt daran, dass in Deinem Code die Bilder mit ".bild" falsch bezeichnet sind:

.bild ist eine CSS-Klasse. Die kann nur wirken, wenn das fragliche Bild im html-Code auch mit dieser Klasse versehen wurde. Und das geht nur bei Bildern, an deren html-Code Du heran kommst. Also nur bei Bildern, die in ein Text oder ähnliches Element hineinkopiert wurden.

...schreibst Du hingegen:

1
2
3
4
5
6
7
8
9
 
img:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}
 
img {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
 



...tritt genau der von dir gewünschte Effekt ein. Beispiel sh: http://forum-images.jimdo.com/

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


 Antworten

 Beitrag melden
#6
24.01.2016 12:30 (zuletzt bearbeitet: 13.02.2016 20:58)
avatar  tschud61
#6
ts
tschud61

Hallo Andreas
Danke für die schnelle Antwort.
Der html-Code für das Bild auf meiner Website sieht wie folgt aus. Was muss ich da ändern beziehungsweise ergänzen, damit das Bild den gewünschten Effekt bekommt; oder wie kann ich den CSS-Code, den ich im heat-Bereicht hinterlegt habe, aktivieren? Oder liege ich da völlig falsch. Danke im Voraus für die Antwort.

mit liebem Gruss
Stefan

1
2
3
 
<a href="http://www.schuleerstfeld.ch"><img src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" alt="" onmouseover=
"src='http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/i28ae1f20c765a602/1436815441/std/image.jpg'" onmouseout=
"src='http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg'" /></a>
 


 Antworten

 Beitrag melden
#7
24.01.2016 14:42 (zuletzt bearbeitet: 24.01.2016 21:35)
avatar  az_
#7
avatar
az_

hallo @tschud61
...fast! sh.: http://forum-images.jimdo.com/forum



Wenn Du ein kopiertes Bild in einem Text-Element hast, kannst Du natürlich mit CSS-Klassen arbeiten. Dann ist Dein originaler CSS-Code goldrichtig. Nur Deinen html-Code musst Du dann anders stricken:

CSS-Code

1
2
3
4
5
6
7
8
 
.bild:hover {
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
    }
.bild {
        -webkit-transition: all 0.7s ease;
        transition: all 0.7s ease;
    }
 




html-Code

1
2
3
4
 
<a href="http://www.schuleerstfeld.ch" target="_top">
<img class="bild" src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" alt="" />
</a>
 
 




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

Bildanhänge

 Antworten

 Beitrag melden
#8
04.02.2016 09:11
avatar  tschud61
#8
ts
tschud61

Hallo Andreas
Ich melde mich mal wieder. Ich habe mich in der Zwischenzeit versucht schlau zu machen; ist mir aber nicht gelungen.
WO muss ich nun diese Codes auf meiner Jimdo-Seite einfügen?

lg Stefan


 Antworten

 Beitrag melden
#9
04.02.2016 13:47
avatar  az_
#9
avatar
az_

...dazu bitte hier nachlesen: CSS für Jimdo

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


 Antworten

 Beitrag melden
#10
04.02.2016 15:37 (zuletzt bearbeitet: 06.02.2016 18:09)
avatar  tschud61
#10
ts
tschud61

Hallo Andreas
Ich habe es wirklich geschafft; vielen vielen Dank.
Was muss ich nun bei den Codes ändern, wenn ich den Effekt "02-Einzoomen" umsetzen möchte? Hier der Link zur Website mit dem gewünschten Effekt: http://james-star.com/answers/de/css3-ef...en-uebergaenge/
oder der Code nachfolgend:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.container:hover .bild {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.container {
overflow:hidden;
width:200px;
height:150px;
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 



Die Effekte 04 (Ränder und Schatteneffekte), 05 (Randverzerrung), 06, 07 gehen problemlos. Sie haben den gleichen Namen ".bild".
Vielen Dank im voraus für deine Hilfe.

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#11
06.02.2016 13:06 (zuletzt bearbeitet: 06.02.2016 18:19)
avatar  tschud61
#11
ts
tschud61

Hallo Andreas

Ich melde mich nochmals.
Wie muss ich nachfolgenden html-Code ändern ...

html-Code

1
2
3
4
 

<a href="http://www.schuleerstfeld.ch" target="_top">
<img class="bild" src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" alt="" />
</a>
 



... um auf diesen CSS-Code hinzuweisen?

CSS-Code

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.container:hover .bild {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.container {
overflow:hidden;
width:200px;
height:150px;
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
 



Vielen Dank im voraus für die Antwort.

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#12
06.02.2016 18:33 (zuletzt bearbeitet: 06.02.2016 18:47)
avatar  az_
#12
avatar
az_

Hallo Stefan @tschud61,
...eine kleine Bitte vorab (Wichtig!): Code bitte immer mit "einklammern"!

Ansonsten:

...das hast Du schon sehr gut vorbereitet!
Wenn Du das Ganze in einem Container haben willst, wie im CSS angelegt, musst Du es im html-Code nur noch in einen Container hineinlegen.

Und der ist ganz einfach:

1
 
<div "class="container"> ... </div>
 



Dein Code müsste also nur ein ganz klein wenig abgeändert werden:

1
2
3
4
5
6
7
 
<div class="container">
  <a href="http://www.schuleerstfeld.ch" target="_top">
  <img class="bild"  
       src="http://u.jimdo.com/www400/o/s7e4c6fd4df740750/img/ibce8d25f3cf58868/1436815431/std/image.jpg" 
       alt="" />
  </a>
</div>
 



Demo: http://forum-images.jimdo.com/forum/

LG, az

PS: Danke für das Super-Thema!


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

Bildanhänge

 Antworten

 Beitrag melden
#13
07.02.2016 09:30
avatar  tschud61
#13
ts
tschud61

Lieber Andreas
Vielen Dank für deine Hilfe. Beides klappt nun bestens: ".bild" und ".container" konnte ich auf einer Jimdo-Testseite mit Erfolg ausprobieren.
Ich habe noch einen letzten Wunsch offen. Wie kann ich nachfolgenden Effekt auf meine Jimdo-Seite einbinden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
</div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item square colored effect3 top_to_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Top to bottom-->
 



Hier der Link zur Seite:
http://gudh.github.io/ihover/dist/index.html

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#14
08.02.2016 07:14 (zuletzt bearbeitet: 08.02.2016 07:15)
avatar  az_
#14
avatar
az_

Hallo Stefan @tschud61,

...dazu brauchst Du das CSS von der Seite.

Du bekommst es als Paket von der github-seite https://github.com/gudh/ihover mit "$ bower install ihover". Wie Du Dir bower installierst, kannst du hier finden: http://sixrevisions.com/tutorials/bower/

LG, az

PS: ...wo finden wir Deine Testseite? wäre interessant!


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


 Antworten

 Beitrag melden
#15
08.02.2016 09:02
avatar  tschud61
#15
ts
tschud61

Hallo Andreas

Danke für die Infos. Ich glaube, dass dies doch eine Nummer zu gross für mich ist.
Ich bin schon sehr zufrieden, dass ich dank deiner Hilfe nun mit ".bild" und ".container" meine Webseiten bearbeiten kann. Nochmals herzlichen Dank für die wertvollen Infos.
Meine Testseite wird kaum interessant sein. Ich habe sie lediglich angelegt, um nicht auf eine meiner Hauptseiten etwas kaputt zu machen; trotzdem der Link.

mit liebem Gruss
Stefan
http://tschudi61-testseite.jimdo.com


 Antworten

 Beitrag melden
#16
09.02.2016 12:09 (zuletzt bearbeitet: 09.02.2016 13:19)
avatar  az_
#16
avatar
az_

...ja, das ist schon ein wenig anspruchsvoller, aber machbar. Schau mal hier: http://ihovertest.jimdo.com/ihovertest/



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

Bildanhänge

 Antworten

 Beitrag melden
#17
09.02.2016 14:29
avatar  tschud61
#17
ts
tschud61

Hallo Andreas

So einfach geht das!!??
Gibt es eine Möglichkeit, dass "Innenleben" deiner Testseite (http://ihovertest.jimdo.com/ihovertest/) zu sehen?
Noch eine Frage: Bei einem CSS-Effekt überlagern sich bei mir die Bild- und Textelemente, wenn die Fensterbreite verkleinert wird. Kann man dieses Problem irgendwie lösen? Es sieht nicht schön aus (siehe Bilder 1 - 3)

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#18
10.02.2016 10:30
avatar  Feemina
#18
Fe
Feemina

Hallo, Andreas,

im Gegensatz zu Stefan finde ich das leider überhaupt nicht einfach ;)

Wenn ich diese tollen Dinger auf einer Unterseite haben möchte, was muss ich bei <body> CSS-Klassen eintragen? Muss ich erst etwas für das gesamte Design (Cape Town) ändern?

Irgendwie hab ich überhaupt keinen Plan und wäre sehr dankbar für Hilfe :)

Beste Grüße

Barbara


 Antworten

 Beitrag melden
#19
10.02.2016 11:14
avatar  az_
#19
avatar
az_

Hallo @Feemina

Du brauchst das Design nicht zu ändern. Es muss nur ein Eintrag im Head-Berich Deiner Seite gemacht werden, der auf das richtige CSS-Skript verweist. Danach kannst Du die html-Skripte so wie sie unter den einzelnen Beispielen angezeigt sind in ein html-Widget einsetzen und es funzt.

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


 Antworten

 Beitrag melden
#20
10.02.2016 12:52
avatar  tschud61
#20
ts
tschud61

Hallo Andreas
Hallo Barbara

Meine Aussage "So einfach geht das!!??" war ironisch gemeint, weil es von Andreas so schnell und schön gemacht wurde. Es ist nach wie vor eine Nummer zu gross für mich. Die Effekte sehen aber einfach toll aus. Darum würde mich das Innenleben der Testseite interessieren (verstehe aber, dass das Passwort für die Anmeldung geheim bleibt).

Zitat von az_ im Beitrag #19

Es muss nur ein Eintrag im Head-Berich Deiner Seite gemacht werden, der auf das richtige CSS-Skript verweist. Danach kannst Du die html-Skripte so wie sie unter den einzelnen Beispielen angezeigt sind in ein html-Widget einsetzen und es funzt.


Wie sieht der richtige CSS-Code (Head-Bereich) und der html-Code (html-Widget) für einen ausgewählten Effekt aus. Ich selber weiss nicht, welche braucht es und welche nicht und was muss beim Html-Code noch ergänzt werden (Link, Bildadresse, ...).

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#21
10.02.2016 13:31 (zuletzt bearbeitet: 10.02.2016 13:45)
avatar  az_
#21
avatar
az_

Hallo @tschud61, hallo @Feemina,

Ihr könnt Euch das CSS-Skript von meiner Testseite ziehen, da das Skript "Licensed under MIT" ist (sh.: https://de.wikipedia.org/wiki/MIT-Lizenz). Das geht folgendermaßen:

- Einfach mit der rechten Maustaste in den Content klicken und Seitenquelltext anzeigen lassen (strg+U für Chrome)
- Copy

1
 
<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/styles/main.css" rel="stylesheet"/>
 



...und alles was unter

1
2
3
4
5
6
7
8
9
10
11
 
<style type="text/css">
/*<![CDATA[*/
    
    /*iHover-CSS Anpassungen
    -----------------------------*/
 
   ...
 
    
/*]]>*/
</style>
 



- alles einfügen in Head-Bereich

...danach sollten die html-widgets funzen, die Ihr unter http://ihovertest.jimdo.com/ihovertest/ findet. Die Bilder (img src="http://...") und die Überschriften etc. könnt Ihr anschließend noch in Eurem html anpassen.



LG, az


PS.: Bei Problemen könnt ihr mich gern anschreiben...


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


 Antworten

 Beitrag melden
#22
10.02.2016 16:22 (zuletzt bearbeitet: 10.02.2016 17:08)
avatar  Feemina
#22
Fe
Feemina

Hallo, Andreas,

danke erstmal für die schnelle Antwort, aber leider mache ich wohl etwas falsch.

Ich habe jetzt bei <head> bearbeiten eingegeben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/styles/main.css" rel="stylesheet"/>
<style type="text/css">
/*<![CDATA[*/
    
    /*iHover-CSS Anpassungen
    -----------------------------*/
    
.ih-item {margin: 30px;}
    
.ih-item.circle.effect1:hover .spinner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.ih-item.circle.effect1:hover .info {
  opacity: 1;
}
 
 


und erhalte die Meldung: Die HTML-Struktur ist ungültig und wurde nicht gespeichert.

Was habe ich falsch gemacht?

Beste Grüße

Barbara


 Antworten

 Beitrag melden
#23
10.02.2016 17:11 (zuletzt bearbeitet: 10.02.2016 17:12)
avatar  az_
#23
avatar
az_

...den ersten Teil hast Du richtig gemacht. Für den zweiten Teil bitte alles von <style> bis </style> (einschließlich!) kopieren und einsetzen! Es müssen alle Anweisungen drin sein, die mit .ih-item beginnen!

LG, az



PS: ...wie ist die URL Deiner Testseite?


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


 Antworten

 Beitrag melden
#24
10.02.2016 17:26
avatar  Feemina
#24
Fe
Feemina

SUPER und vielen Dank - ich hab`s noch nicht angepasst, aber die Bilder sind schon mal da :)

Eine Testseite habe ich nicht - ich teste das auf einer versteckten Unterseite; bin grad dabei, die ganze Seite neu zu machen..., aber vielleicht sollte ich mal eine Testseite anlegen, denn hier sind ja noch so viele tolle Anregungen.

Jedenfalls vielen Dank nochmals!


 Antworten

 Beitrag melden
#25
10.02.2016 19:16
avatar  tschud61
#25
ts
tschud61

Hallo Andreas
Hallo @Feemina

Ich melde mich kurz dazwischen. Ich habe es zu 95 % geschafft. Ich habe die nachfolgende Zeile zuerst nicht im head eingegeben; nach der Eingabe klappte es.

1
 
<link type="text/css" media="all" href="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/styles/main.css" rel="stylesheet"/>
 


Jetzt möchte ich den Effekt noch verlinken. Kommt die URL nicht anstelle des "Gartenhages"?

1
 
<a href="#">
 


Danke im voraus für die Antwort.

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!