Ladebalken
Nach obenWas wollen wir erreichen?
Später soll unser Ladebalken so aussehen:
Dieser wird erstellt mit:
- 1x
<div> - 1x
<p> - 1x
<span>
Da ihr nun wisst wie er aussehen soll und aus was er besteht können wir anfangen.
Nach obenHTML
Wie schon gesagt besteht unser Ladebalken aus 3 verschiedenen Tags. Hier nun ersteinmal der Code den wir brauchen.
<div id="ladebalken">
<p style="width: 82%;"><span>82%</span></p>
</div>
Nach obenErklärung zum HTML
Als erstes seht ihr den div, dieser ist dazu da den grünen Balken später einzugrenzen.
Das p-Tag ist der grüne Balken, warum ich hier neben der Klasse den style eingefügt habe, werde ich am Ende dieses Tutorials noch erklären.
Als letztes haben wir noch das span-Tag, dies dient nur dazu den prozent Stand darzustellen.
CSS
Nun kommen wir zum "schwierigsten" Teil des Ladebalkens.
div#ladebalken {
width: 150px;
border: 1px solid #000;
background: #c0c0c0;
height: 20px;
}
div#ladebalken p {
height: 20px;
display: block;
background: #0f0;
margin: 0px;
}
div#ladebalken span {
position: absolute;
margin: 0px 0px 0px 65px;
}
Nach obenErklärung zum CSS
Zum div#ladebalken sollte meiner Meinung nach alles klar sein.
Nun kommen ich zu dem vorhin erwähnten style im p-Tag, dies dient dazu, wenn ihr den Balken zb. mit PHP generiert, dass ihr nicht den CSS immer neu generieren müsst.
Zu dem merkwürdigen display: block;, es dient einfach nur dazu, dass das p-Tag auch seine breite annimmt wie ihm befohlen.
Damit die Prozentangabe auch immer schön in der Mitte steht, nehmen wir position: absolute; und einen außenabstand von 65px auf der linken Seite.
Warum habe ich nur 65px anstatt 75px angegeben?
Aus dem einfachen Grund, denn Der Text hat auch seine bestimmte Breite und nach dem Augenmaß sollte dadurch die Prozentangabe 82% genau in der Mitte des divs sein.
Beispiel
Hier das Beispiel für den Balken.
Außerdem nochmals das Bild:
pberndt
Okay, ein paar Kleinigkeiten hab ich:
- Fortschritt mit F nicht mit V
- Bis auf das oberste DIV muss keines der Elemente ID oder Klasse haben (div#ladebalken p)
- Die Prozentzahl sollte sich auf als Text des Hintergrunddivs positionieren lassen, so sparst du den span. Dann musst du natürlich die Grüne Box anders positionieren.
Ansonsten aber gut geworden :)
q-rios
1. Ups ^^
2. Ja stimmt nicht dran gedacht
3. Mhh joa, aber ich finds wenns so aussieht besser :P
pippilotta
Mit line-height und text-align: center liesse sich der Text ebenso zentral positionieren ohne position ;-)
Aber nette Sache das, auch wenn ich mir grad keine Anwendung vorstellen kann ? Wofür könnte man den ladebalken denn benutzen ? Da er ja statisch ist ?
q-rios
Mhh ich benutze ihn zb. um den Status bei nem Hostingscript an zuzeigen wieviel der User schon hochgeladen hat.
Gibt viele verschiedene möglichkeiten.
pberndt
Das muss ja nicht statisch bleiben :) Wenn q-rios erlaubt schreib ich mal ein fortführendes Tutorial, wie man das Script leicht dynamisch machen kann :)
curi
Klar, kannsde machen np :D
winky
ich probier grad damit rum. also mit div und darin span gefällts mir besser. mehr braucht man übrigens auch nich, wie hier ja schon erwähnt wurde. außerdem hast du ne id und keine klasse eingefügt. und wieso zum geier packst du die style-angabe in den code, wo sie doch im stylesheet viel besser aufgehoben wäre?
curi
1. Wenn man den Ladebalken mit PHP zb. erstellt muss man nicht jedesmal für jeden Ladebalken das ganze CSS neu generieren (steht auch oben)
2. Ich werde sowieso bald den Ladebalken neu machen, weil ich ihn inzwischen anders einsetze