Grafik zerstört meinen "Read-more" Code bearbeitet von Regina Schaukrug 05.01.2018 10:10 > ~~~html> <div>> <input type="checkbox" class="read-more-state" id="post-2" />> > <ul style="padding-left:0em;" class="read-more-wrap">> <p>lorem</p>> <p>lorem 2</p>> <p class="read-more-target">lorem 3</p>> <p class="read-more-target">lorem 4</p>> <p class="read-more-target">lorem 5</p>> <p class="read-more-target">lorem 6</p>> <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p>> <p class="read-more-target">lorem 7</p>> </ul>> > <label for="post-2" class="read-more-trigger"></label>> </div>> ~~~> ~~~css> .read-more-state {> display: none;> }> > .read-more-target {> opacity: 0,2;> max-height: 0;> font-size: 0;> transition: .25s ease;> }> > .read-more-state:checked ~ .read-more-wrap .read-more-target {> opacity: 0;> font-size: inherit;> max-height: 999em;> }> > .read-more-state ~ .read-more-trigger:before {> content: 'Show more';> }> > .read-more-state:checked ~ .read-more-trigger:before {> content: 'Show less';> }> > .read-more-trigger {> cursor: pointer;> display: inline-block;> padding: 0 .5em;> color: #666;> font-size: .9em;> line-height: 2;> border: 1px solid #ddd;> border-radius: .25em;> }> ~~~> Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt.> > Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung! > Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen.Auf den ersten Blick ist:~~~cssopacity: 0,2;~~~ungültig. [Da muss als Dezimaltrenner ein Punkt hin](https://developer.mozilla.org/de/docs/Web/CSS/opacity). Validiere also zunächst das HTML und das CSS.
Grafik zerstört meinen "Read-more" Code bearbeitet von Regina Schaukrug 05.01.2018 10:17 > ~~~html> <div>> <input type="checkbox" class="read-more-state" id="post-2" />> > <ul style="padding-left:0em;" class="read-more-wrap">> <p>lorem</p>> <p>lorem 2</p>> <p class="read-more-target">lorem 3</p>> <p class="read-more-target">lorem 4</p>> <p class="read-more-target">lorem 5</p>> <p class="read-more-target">lorem 6</p>> <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p>> <p class="read-more-target">lorem 7</p>> </ul>> > <label for="post-2" class="read-more-trigger"></label>> </div>> ~~~> ~~~css> .read-more-state {> display: none;> }> > .read-more-target {> opacity: 0,2;> max-height: 0;> font-size: 0;> transition: .25s ease;> }> > .read-more-state:checked ~ .read-more-wrap .read-more-target {> opacity: 0;> font-size: inherit;> max-height: 999em;> }> > .read-more-state ~ .read-more-trigger:before {> content: 'Show more';> }> > .read-more-state:checked ~ .read-more-trigger:before {> content: 'Show less';> }> > .read-more-trigger {> cursor: pointer;> display: inline-block;> padding: 0 .5em;> color: #666;> font-size: .9em;> line-height: 2;> border: 1px solid #ddd;> border-radius: .25em;> }> ~~~> Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt.> > Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung! > Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen.Auf den ersten Blick ist:~~~opacity: 0,2;~~~ungültig. [Da muss als Dezimaltrenner ein Punkt hin](https://developer.mozilla.org/de/docs/Web/CSS/opacity). Validiere also zunächst das HTML und das CSS.
Grafik zerstört meinen "Read-more" Code bearbeitet von Regina Schaukrug 05.01.2018 10:16 > ~~~html > <div> > <input type="checkbox" class="read-more-state" id="post-2" /> > > <ul style="padding-left:0em;" class="read-more-wrap"> > <p>lorem</p> > <p>lorem 2</p> > <p class="read-more-target">lorem 3</p> > <p class="read-more-target">lorem 4</p> > <p class="read-more-target">lorem 5</p> > <p class="read-more-target">lorem 6</p> > <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p> > <p class="read-more-target">lorem 7</p> > </ul> > > <label for="post-2" class="read-more-trigger"></label> > </div> > ~~~ > ~~~css > .read-more-state { > display: none; > } > > .read-more-target { > opacity: 0,2; > max-height: 0; > font-size: 0; > transition: .25s ease; > } > > .read-more-state:checked ~ .read-more-wrap .read-more-target { > opacity: 0; > font-size: inherit; > max-height: 999em; > } > > .read-more-state ~ .read-more-trigger:before { > content: 'Show more'; > } > > .read-more-state:checked ~ .read-more-trigger:before { > content: 'Show less'; > } > > .read-more-trigger { > cursor: pointer; > display: inline-block; > padding: 0 .5em; > color: #666; > font-size: .9em; > line-height: 2; > border: 1px solid #ddd; > border-radius: .25em; > } > ~~~ > Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt. > > Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung! > Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen. Auf den ersten Blick ist: ~~~ opacity: 0,2; ~~~ ungültig. [Da muss als Dezimaltrenner ein Punkt hin](https://developer.mozilla.org/de/docs/Web/CSS/opacity).
nicht angemeldet
