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
WPcom Experimente 
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
LikeLike
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.
LikeLike
Hey, hast irgendwie nicht auf Antworten geklickt und ich wundere mich die ganze Zeit. 😦
Vielen, Vielen Dank!!
LikeLike
Huch, das ist mir gar nicht aufgefallen. War natürlich keine Absicht. Schön, dass du die Antwort dennoch gefunden hast. 🙂
LikeLike
Was mir gerade noch auffällt – dein Lesefortschritt wird ja generell in der Seitenleiste jeder „Buchbesprechung“ angezeigt. Leider fehlt der Kontext zum Buch, dessen Lesefortschritt du anzeigst. Deshalb gewinnt man als Leser eines beliebigen Buchbeitrags zwangsläufig den Eindruck, du hättest genau dieses Buch bereits zu 30% gelesen.
LikeLike
Hmmm, ja langsam ist mir dieser Gedanke auch erschlichen 🙂
Danke für dein Feedback!
LikeLike
Entweder du löst es so wie jetzt, in dem du den Buchtitel als Widgettitel verwendest oder du fügst unter dem Fortschrittsbalken eine weitere Textzeile mit dem Titel des Buchs ein.
LikeLike
Ich habe auch daran gedacht, es zu verlinken.
Danke dir!
LikeLike
Hier nochmal, ich würde gerne alles zentriert haben.
Ich habe etwas rumprobiert, aber nichts hilft.
Danke dir!
Ich weiß auch nicht, wie ich den Code einfügen soll, damit du etwas einfach hast. 😦
LikeLike
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>LikeLike
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 😀
LikeLike
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.
LikeLike
Ich musste nur die “ und < korrigieren, weil beim abkopieren wohl da nicht mitmachen wollte.
Aber Hammer! Das sieht geil aus!!!!
Besten DANK!!!! 😀
LikeLike