[GELOEST] Inhalt liegt unter der Slideshow statt im Anschluss angezeigt zu werden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HaTeMLchallenge

Neues Mitglied
3 August 2020
5
0
1
Karlsruhe
Hallo liebe Forum-Community!

Bin neu hier und habe natürlich ein kleines Problemchen, bei dem ich gerade nicht weiterkomme und euch gerne um Hilfe bitten möchte.

Zuerst möchte ich mich aber kurz vorstellen, wie es sich eigentlich ja auch gehört, wenn man irgendwo „neu“ ist. Von Beruf Grafik-Designer, komme ich zwar mit Webdesign in Berührung, von html habe ich aber keinen blassen Dunst, was mich schon länger sehr gestört hat. Und so nutze ich die Coronabedingte Kurzarbeit dazu, mir ein paar html-Kenntnisse anzueignen. Damit das nicht nur schnöde Theorie bleibt, wage ich mich gerade daran für meine Frau meine erste Website zu erstellen.

Auf der Suche nach einer html-Slideshow bin ich hier in einem anderen Beitrag auf eine schöne Lösung von @basti1012 gestoßen, die ich in meiner Website verwendet habe (hoffe du hast nichts dagegen @basti1012).

Und da sind wir schon bei meinem Problem: Wie kriege ich es hin, dass der Inhalt der Seite im Anschluss der Slideshow angezeigt wird, und nicht darunter liegt? Die Slideshow soll immer formatfüllend, so groß wie der Viewport sein. Das klappt ja auch, nur sieht man beim überblenden der Slideshow-Sequenzen den weiteren Seiten-Inhalt durchschimmern. Der Inhalt dürfte aber erst beim scrollen in den Viewport reinkommen. Wie geht das?

Würde mich freuen, wenn jemand eine Antwort dazu weiß, herzlichen Dank :-)
Ralf

Hier der Link zur html-Datei mit der Slideshow und dem darunter „durchschimmernden“ Inhalt:
https://filehorst.de/d/dGwqnfgn
 
Zuletzt bearbeitet:

HaTeMLchallenge

Neues Mitglied
3 August 2020
5
0
1
Karlsruhe
Hallo @basti1012,
besten Dank für deine Antwort. Habe mich mal bei codepen angemeldet und versucht einen Pen zu erstellen.
Hier der link, hoffe das er funktioniert: slideshow

Danke auch für den Tip mit Flexbox, dachte Flexbox nimmt man in erster Linie wenn man Objekte auf einem breiten Viewport nebeneinander, und auf einem schmalen Viewport untereinander anordnen möchte – und darum geht es bei meinem Slideshow-Problem ja eigentlich nicht. Wobei Flexbox sicherlich noch für ein paar Dinge mehr geeignet ist, ich kenne es bis jetzt halt einfach nur sehr begrenzt :-). Denke auch schon darüber nach, welche Flexbox-Codes mich wohl weiterbringen könnten...
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Nur Flex Box hilft nicht.
Erstmal muss die CSS gereinigt werden.
Beim kurzen Testen konnte ich ca. 200 Zeilen CSS löschen.
Dann muss man Position absolute und fixed austauschen, löschen oder ändern damit das alles so läuft wie du es haben möchtest.
Das alles erklären kann ich nicht und das du es alleine hinbekommst bezweifle ich (SORRY).
Ich komme dadrauf, weil wer Code kopiert, der kein Sinn hat, macht sich nicht viel Gedanken da drum.
Da muss ich mir aber auch den Schuh anziehen weil ich den Code 2018 wahrscheinlich genau so kopiert habe.
Das mache ich jetzt nicht mehr so weil vor 2 Jahren wahr ich auch noch in der Anfänger Zeit.
Ich ändere dein Coe jetzt mal, weil bin auch etwas schuld da dran
 
  • Like
Reaktionen: HaTeMLchallenge

HaTeMLchallenge

Neues Mitglied
3 August 2020
5
0
1
Karlsruhe
Puhhhh, das beruhigt mich gerade aber doch sehr, dass du dir die Mühe machst mal nach der Sache zu schauen, komme nämlich gerade nicht wirklich weiter damit... 200 Zeilen unnötig?...das ist mit den vielen Leerzeilen in meinem Code gerechnet, oder? (Spaß!!) Tausend Dank, Basti, bin gespannt auf deine Code-Anpassung.
Viele Grüße, Ralf
 

HaTeMLchallenge

Neues Mitglied
3 August 2020
5
0
1
Karlsruhe
Basti! G-E-N-I-A-L! Es sollte ziemlich genau so aussehen wie du es gerade gemacht hast. Super!!
Auch das Timing bei den Bildwechseln finde ich echt klasse. Lediglich die „Schwarzblende“ ist etwas lang, denke da die Slideshow Fullscreen ist, wäre es für den User etwas seltsam, wenn der Screen so lange dunkel ist – das ist jetzt aber beim besten Willen nicht als Kritik gemeint, bitte nicht falsch verstehen :-). Bin super-happy, deinen Code werde ich mir definitiv noch bis ins kleinste Detail in Ruhe anschauen. Vor allem will ich kapieren welche Zeile was macht...
Danke dir wirklich sehr, hast mir sehr geholfen!
Beste Grüße, Ralf
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Lediglich die „Schwarzblende“ ist etwas lang,
Das lag an die Animation Zeiten.
Habe die einfach so übernommen und gar nicht darauf geachtet.
Jetzt sollte das alles besser passen.
Genau so wie die Schriften, die man einblenden kann, sollten eigentlich für jedes Bild ein anderes sein.
Das hatte auch nicht gepasst.
 
  • Like
Reaktionen: HaTeMLchallenge
Werbung: