CSS Neueinsteiger-Frage

Akkulok

Moin,

ich versuche in meiner bisher rein in HTML programmierten Website erstmals etwas mit CSS zu realisieren und bin gnadenlos gescheitert. Aller Anfang ist schwer und ein Aha-Effekt mit bei mir funktionierendem CSS würde gut tun und einen Einstieg in die eigene Weiterentwicklung wesentlich erleichtern.

Um was geht es?

Ich betreibe eine Website, auf deren zweiter Einstiegsseite ein klassischer Diafilmstreifen zu sehen ist. Diesen würde ich gerne mit fünf wechselnden Streifen animieren.

Die für mich vermutlich passende Lösung habe ich hier gefunden:

http://www.webdesign-klamonfra.de/codeschnipsel/diashow.php

Die eigene Bestandsseite, die ich mit diesem Effekt aufpeppen möchte, ist das hier:

https://www.bahnfotokiste.de/blog/index.html

Den auf der Webdesign-Seite genannten Code habe ich in die Seite

https://www.bahnfotokiste.de/blog/index_2.html

eingetragen, aber von den fünf abgespeicherten Fotos im Stammverzeichnis

01.jpg
02.jpg
03.jpg
04.jpg
05.jpg

wird leider nichts angezeigt.

Mir fehlt mangels Erfahrung und Wissen im Moment jeder Ansatz zur Fehlersuche,

Wenn jemand den Code von

https://www.bahnfotokiste.de/blog/index.html

entsprechend anpassen könnte, dass die fünf jpg-Dateien im Wechsel angezeigt werden, wäre ich diesem unendlich dankbar und ich habe was zum drauf aufbauen - ggf. auch die Lösung mittels zusätzlicher CSS-Datei.

Wenn ein posten hier im Forum nicht möglich ist, gerne auch per PN

Vielen Dank für Eure Hilfe!

Jan Borchers

Gastl

Mach deine Emailadresse mal unkenntlich, sonst bekommst du demnächst nur noch Spam.

Akkulok

Danke für den Hinweis, eigentlich habe ich einen guten Spamfilter, aber man weiß ja nie...

Danke & Gruß
Jan

modem-kind

Du hast ja den Teil des CSS gar nicht eingesetzt -siehe unten-
-so bleiben ja alle Bilder img auf opacity: 0; - also unsichtbar

Code

[COLOR=#000000][B]#stapel img:nth-of-type(1)[/B][/COLOR][COLOR=#000000] {[/COLOR]   
 animation-name: fade1;
}


[B]#stapel img:nth-of-type(2)[/B] {
    animation-name: fade2;
}


[B]#stapel img:nth-of-type(3)[/B] {
    animation-name: fade3;
}


[B]#stapel img:nth-of-type(4)[/B] {
    animation-name: fade4;
}


[B]#stapel img:nth-of-type(5)[/B] {
    animation-name: fade5;
}

Alles anzeigen

Gruß modem-kind

denk daran dieser Code ist für genau 5 Bilder berechnet -

Akkulok

in der index_2.html steht er direkt im Kopf drin:

HTML

<style>
#stapel img  { position: absolute;   
       height: auto; width: 200px;    
       left: 9px; top: 9px; 
    opacity: 0;
    animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


@keyframes fade1 {
     0%, 10%, 100% {opacity:1;}
    20%, 90%       {opacity:0;}
}


@keyframes fade2 {
     0%, 10%, 40%, 100% {opacity:0;}
    20%, 30%            {opacity:1;}
}


@keyframes fade3 {
     0%, 30%, 60%, 100% {opacity:0;}
    40%, 50%            {opacity:1;}
}


@keyframes fade4 {
     0%, 50%, 80%, 100% {opacity:0;}
    60%, 70%            {opacity:1;}
}


@keyframes fade5 {
     0%, 70%, 100% {opacity:0;}
    80%, 90%       {opacity:1;}
}
  </style>

Alles anzeigen

Direkt oben. An welcher Stelle sollte ich ihn denn einsetzen?

Danke & Gruß
Jan

- - - Aktualisiert - - -

Dein Code, an welcher Stelle fehlt er?

Danke & Gruß
Jan

- - - Aktualisiert - - -

modem-kind: Das nennen der Zeile, wo der Code einzufügen wäre, wäre super.

modem-kind

das ist schon Okay Jan,

aber was ich schrieb muss noch dazu !
am besten unter dem hier einfügen (also beginnend ab Zeile 13 Aktuell)
<style>
#stapel img { position: absolute;
height: auto; width: 200px;
left: 9px; top: 9px;
opacity: 0;
animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

Akkulok

Super! Laufen tut das ganze unter

https://www.bahnfotokiste.de/blog/index_2.html

schon einmal.

Bloß nicht an der richtigen Stelle und in der originalen Größe...

Nun muss das Teil nur noch mittig an die passende Stelle und in der Originalgröße.

*Seufz*

Immerhin es läuft schon einmal.

Gruß
Jan

- - - Aktualisiert - - -

Die Website ist auf mittig ausgerichtet. Entsprechend müssten die CSS-Angaben von mittig ausgehen. Platz schaffe ich gleich im HTML-Code.

- - - Aktualisiert - - -

In der passenden Größe habe ich es nun, den Eintrag gefunden. Aber wie in CSS das ganze mittig und in der passenden Höhe zu plazieren ist, da fehlt mir noch das Wissen.

Danke & Gruß
Jan

- - - Aktualisiert - - -

Wenn ich das recht sehe, müssten die Einträge

HTML

position: absolute;   
       height: auto;

passend justiert werden. Welche Einträge wären das?

modem-kind

mach mal das top: 9px; ganz WEG ! Zeile 7 Aktuell

und das left:1419px; wieder auf left:9px;
[INDENT]<style>
#stapel img { position: absolute;
height: auto; width: 200px;
left: 9px; top: 9px;
opacity: 0;
animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}[/INDENT]
Gruß modem-kind

Akkulok

Örks, sollte nicht 1419 heißen sondern 141.

Nun ist das ganze wieder klein, fast in der richtigen Höhe, aber wieder links.

Wir nähern uns...

- - - Aktualisiert - - -

aus width: 200px habe ich nun 994px gemacht.

Die Höhe passt. Einzig es wäre noch mittig zu positionieren. Auf verschiedenen Auflösungen.

- - - Aktualisiert - - -

Mit Google habe ich die eben passenden Einträge gefunden.

HTML

display: block;
    margin-left: auto;
    margin-right: auto

Vielen Dank, nun funktioniert es wie es soll!

Jan

Tags