[Tutorial] Lesefortschrittsanzeige für 3 Bücher

Vor längerer Zeit hat schonmal eine Leserin angefragt, wie ich die Lesefortschrittsanzeige für drei Bücher integriert habe. Ihr kennt das ja sicher, ein Buchcover und darunter eine Leiste, die anzeigt, wie viel man schon gelesen hat. Leider hatte ich damals überhaupt keine Zeit dafür, Sorry!! Möchte das aber noch nachholen. Den Code werde ich nicht nochmal erklären, ihr könnt alles im Tutorial "Lesefortschrittsanzeige" nachlesen. Da ist das für ein Buch beschrieben, im folgenden Code ist eigentlich nur die Anordnung wichtig. 


<center>

<img src="BILDURL1" title="Isa Grimm - Klammroth" style="width:150px; border-radius:5px" /><br/>

<div style="text-align:left; width: 150px; height: 15px; background: none repeat scroll 0% 0% rgb(187,187,187); border: none; border-radius:5px"><div style="width: 37.2%; height: 15px; background: none repeat scroll 0% 0% rgb(255,34,34); font-size: 8px; line-height: 8px; border-top-left-radius:4px; border-bottom-left-radius:4px;">
</div></div>125 / 336 Seiten. 37.2%!<br />
<br />


<img src="BILDURL2" title="Marya Hornbacher - Alice im Hungerland" style="width:75px; border-radius:5px" />

<img  src="BILDURL3" title="another 1" style="width:75px; height:117px;border-radius:5px" />
<br/>


<div style="text-align:left; width: 75px; height: 15px; display:inline-block; background: none repeat scroll 0% 0% rgb(187,187,187); border: none; border-radius:5px"><div style="width: 95.5%; height: 15px; background: none repeat scroll 0% 0% rgb(255,34,34); font-size: 8px; line-height: 8px; border-top-left-radius:4px; border-bottom-left-radius:4px;">
</div><center>469 /491 S.<br/>95.5%</center></div>


<div style="text-align:left; width: 75px; height: 15px; display:inline-block; background: none repeat scroll 0% 0% rgb(187,187,187); border: none; border-radius:5px"><div style="width: 9.9%; height: 15px; background: none repeat scroll 0% 0% rgb(255,34,34); font-size: 8px; line-height: 8px; border-top-left-radius:4px; border-bottom-left-radius:4px;">
</div><center>18 / 182 S.<br/>9.9%</center></div>


</center>


Erklärung

Das funktioniert folgendermaßen. Da die Fortschrittsanzeigeleisten und die Bilder in diesem Fall nicht miteinander verbunden sind, wird immer das nebeneinander angezeigt, was auch im Code nacheinander kommt. D.h. es funktioniert nicht, immer Bild - Leiste - Bild - Leiste in den Code zu schreiben. Das erste Bild geht aber so, denn direkt als nächstes kommt die Leiste. Bei zwei Bildern nebeneinander müssen aber im Code erst die Bilder stehen, anschließend die beiden Leisten. Ich will damit aber nicht ausschließen, dass es vielleicht auch anders geht. Viele Wege führen zum Ziel. Dass alles dann auch so ordentlich aussieht wie bei mir, hängt natürlich davon ab, welche Größe ihr für eure Bilder gewählt habt und wie groß eure Seitenleiste ist. Da kann sich unter Umständen schon was verschieben, das sollte man aber durch kleinere Anpassungen leicht in den Griff bekommen.

Kommentare:

  1. Wieder mal eine tolle Idee super erklärt! Vielen Dank :)

    AntwortenLöschen
  2. Danke für das super Tutorial! Es hat mir auf jeden Fall geholfen!
    LG Anja aka iceslez von Librovision

    AntwortenLöschen
  3. Wiedermal ein interessantes und nützliches Tutorial :)

    AntwortenLöschen

Kommentare sind erwünscht! :) aber bitte freundlich bleiben