Frage zum Wiki-Artikel „Bildwechsler“

[Richard Mogwitz]

Hallo,

vielen Dank für Euren Artikel zum Bildwechsel mit CSS. Allerdings habe ich noch ein Problem damit. Der Text, der nach der Diashow folgt, wird überdeckt. Wie kann ich das Problem lösen? Vielen Dank schon im Voraus!

[JürgenB]

Hallo,

wegen der absoluten Positionierung kennt das umgebende Div nicht die Höhe der Bilder. Mit folgender zusätzlicher CSS-Regel konnte ich das Problem im FF lösen:

#gallery figure:first-of-type {
    position:relative;
    top:1em;
}

wobei ich den Wert top:1em empirisch ermittelt habe. Vielleicht hat ja noch jemand eine Idee, wie man das besser machen kann.

Gruß
Jürgen

[JürgenB]

Hallo,

#gallery figure:first-of-type {
    position:relative;
    top:1em;
}

wobei ich den Wert top:1em empirisch ermittelt habe. Vielleicht hat ja noch jemand eine Idee, wie man das besser machen kann.

ich habe noch mal nachgedacht und eine Idee, wie man das top:1em loswerden kann. Ursache ist der Zeilenumbruch zwischen den Bildern. Setzt man die Bilder auf display: inline-block, geht es ohne Positionierung:

#gallery figure {
  position: absolute;
	display: inline-block;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-animation: wechseln 15s infinite;
  animation: wechseln 15s infinite;
}

#gallery figure:last-of-type {
  position: relative;
}

Ich habe meinen Entwurf mal in meinem Testbereich online gestellt:

Beispiel Bildwechsler 2

Sollte man das ins Wiki übernehmen?

Gruß
Jürgen

[marctrix]

Hej JürgenB,

ich habe noch mal nachgedacht und eine Idee, wie man das top:1em loswerden kann. Ursache ist der Zeilenumbruch zwischen den Bildern. Setzt man die Bilder auf display: inline-block, geht es ohne Positionierung:

Ich habe meinen Entwurf mal in meinem Testbereich online gestellt:

Beispiel Bildwechsler 2

Sollte man das ins Wiki übernehmen?

Ja klar, ich würde aber noch die -webkit- Vendor-Präfixe herausnehmen und unterschiedliche alt-Texte sehen wollen. Da sollte so was wie "Sonne geht hinter einem Berg mit der Kaiserburg auf" oder "Die Kaiserburg auf dem Berggipfel wird von der untergehenden Sonne rot beleuchtet" verwendet werden. Im vorliegenden Beispiel zeigen die Bilder ja die unterschiedlichen Tagesstimmungen (dummerweise auch noch Jahreszeiten, was aber wohl nur den irgendwie vorhandenem Beispiel-Bildmatrial geschuldet sein dürft).

Insofern ist es wichtig die Stimmung im alt-Text wiederzugeben, wenn man eine echte Alternative zum Bild anbieten will.

Dass dann noch kurz hinzukriegen ist eine Kunst für sich 😉

Marc