Fortschrittsbalken

Beispiel: 10%

<div style="border:1px solid #ccc;width:100px;background:white;margin:5px 0;padding:1px;"><div style="width:10%;background-color:#08C1C3;height:12px;"></div></div>

Beispiel: 60%

<div style="border:1px solid #ccc;width:100px;background:white;margin:5px 0;padding:1px;"><div style="width:60%;background-color:#08C1C3;height:12px;"></div></div>

Beispiel: 100%

<div style="border:1px solid #ccc;width:100px;background:white;margin:5px 0;padding:1px;"><div style="width:100%;background-color:#08C1C3;height:12px;"></div></div>

Quelle: thesacredpath

Advertisements
Dieser Beitrag wurde unter Experiment veröffentlicht. Setze ein Lesezeichen auf den Permalink.

13 Gedanken zu “Fortschrittsbalken

  1. HI 🙂
    Ich hätte den gesamten Balken und die Überschrift linksbündig.
    Und kannst Du mir erklären, warum die Prozentzahl nun so tief steht?
    Kann man das wieder in die Mitte ziehen?
    Vielen Dank für deine Hilfe!
    Grüße, Gregor

    Gefällt mir

  2. Probier mal folgenden Code

    <div>
      <span style="color:#111;font-size:15px;font-family:arial, sans-serif;">Lesefortschritt</span>
    </div>
    <div style="border:1px solid #F5D0A9;width:165px;background:white;padding:1px;">
      <div style="width:30%;background-color:#DF7401;height:12px;line-height:12px;text-align:right;">
        <span style="color:#111;font-size:10px;font-family:arial, sans-serif;">30%</span>
      </div>
    </div>
    

    Bei der tiefstehenden Prozentzahl hat einfach nur die Angabe der Zeilenhöhe im umschließenden div-Element gefehlt. Die allgemeine Zentrierung war zum einen das „text-align:center“ im ersten div (Lesefortschritt) und zum zweiten das „margin:1px auto“. Hier vor allem das „auto“. Beides entfernt, und der Balken ist wieder linksbündig.

    Gefällt mir

    • Ohne den Inhalt deines Textwidgets ist es ein bisschen schwer. Für die Zentrierung der Buchgrafik, würde ich den gesamten Code in ein weiteres div-Element verpacken, und diesem die Eigenschaft text-align:center zuweisen. Die Zentrierung des Balkens erledigt ein margin:auto im äußeren div-Element des Balkens. Bei deinem aktuellen Buchreport sähe das dann so aus:

      <div style="text-align:center;">
        <a href="http://buchweltennotizen.wordpress.com/2014/09/11/der-demokratische-terrorist-coq-rouge-2/"><img src="http://buchweltennotizen.files.wordpress.com/2014/09/cover.png"></a>
        <div style="border:1px solid #F5D0A9;width:145px;background:white;padding:1px;margin:auto;">
          <div style="width:10%;background-color:#DF7401;height:12px;line-height:12px;text-align:right;">
            <span style="color:#111;font-size:10px;font-family:arial, sans-serif;">10%</span>
          </div>
        </div>
      </div>
      

      Gefällt mir

      • Coole Sache!
        Du bist der Beste 🙂
        Nochmals vielen Dank!

        Ich habe da eine Idee! 🙂
        Du siehst bei mir die 2 Unbeendete Romane?
        Kann man das irgendwie so machen, dass jedes Bild drunter einen eigenen Fortschrittbalken kriegt? 🙂
        Das fände ich extrem geil und meine Dankbarkeit würde übers Unschreibbare gehen 😀

        Gefällt mir

        • Mit zwei Balken wird die Sache natürlich kompliziert. Ohne Garantie, dass das in allen Browsern gut aussieht, könntest du folgendes versuchen:

          <div style="text-align:center;">
            <a href="http://buchweltennotizen.wordpress.com/2014/08/07/star-wars-sturm-uber-tatooine/tatooine/#main"><img src="http://buchweltennotizen.files.wordpress.com/2014/08/tatooine.png?w=134&h=185"</a>
            <a href="http://buchweltennotizen.wordpress.com/2014/07/29/star-wars-der-kopfgeldjagerkrieg-die-mandalorianische-rustung-band-i/krieg/#main"><img src="http://buchweltennotizen.files.wordpress.com/2014/07/krieg.png?w=123&h=185"</a>
            <div style="border:1px solid #F5D0A9;width:100px;background:white;padding:1px;display:inline-block;margin: auto 14px;">
              <div style="width:15%;background-color:#DF7401;height:12px;line-height:12px;text-align:right;">
                <span style="color:#111;font-size:10px;font-family:arial, sans-serif;">15%</span>
              </div>
            </div>
            <div style="border:1px solid #F5D0A9;width:100px;background:white;padding:1px;display:inline-block;margin: auto 10px;">
              <div style="width:30%;background-color:#DF7401;height:12px;line-height:12px;text-align:right;">
                <span style="color:#111;font-size:10px;font-family:arial, sans-serif;">30%</span>
              </div>
            </div>
          </div>
          

          Natürlich brauchst du dafür wieder ein Text-Widget. Momentan verwendest du nämlich für die beiden Romane ein Gallery-Widget, wenn ich das richtig sehe.

          Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s