Garwyy
<div class="progress-bar-title">
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:6px;padding:3px; margin: 0 auto">
<div style="background-color: #ffffff;width:50%;height:20px;border-radius:4px; margin: 0 auto; text-align: center"><a href="#" style="color: black">Blabla - %48</a></div>
</div>
</div>
Bu kodu yapıştır sorunun çözülür. Sana şimdi detaylı anlatayım.
Senin yaptığın kod 3 aşama diyelim.
1=Bar açtın yatay olarak ekranı kapsayan. Bunda başka bişey yapmamıza gerek yok.
2= Açtığımız büyük barın içine progress id li bar açtın. Bu bar arkaplan barı diyelim. Yani arkasını boyadın çünkü.
3=Yazı barı açtın bide ariyetten.
---İlk olarak senin arkaplanı mavi olarak verdiğin barı ortalayalım. Bunu ise "margin=0 auto" etiket ve değerleri kullanarak yaptık. Margin kullanmayı bilmiyorsan; Margin= dış boşluk demektir. Yani ortalama, hizalama için kullanılır. bizde bu arkaplan barını yatay olarak açtığımız barda ortalamak için margini kullandık. Margin ya tek, ya çift, yada dört haneli olarak kullanılır. tek yaparsan (margin=10) üst, sağ, alt ve soldan 10 piksel kaydırır kutuyu. Eğer iki hane yaparsan (margin=0 10) üst ve alttan sıfır, sağ ve soldan 10 piksel kaydırır. Eğer dört haneli yaparsan (margin= 10 5 2 3) üstten 10, sağdan 5, alttan 2 , soldan ise 3 piksel kaydırır. Her neyse biz yatay olarak hizalayacağımız için sol ve sağdan, auto değerini vererek direk programa sen ortaya getir dedik. ve üstten ve alttan da 0 diyerek üst ve alta karışma dedik.
--- İkinci olarak yazıyı içine yazacağın beyaz div açmışsın. en son ki açılan div. Bunuda arkaplan mavi div varya onun içine koyduk. o divin içine. tamam buraya kadar. Ama onu hizalamak lazım arkaplan divinde. Bunun içinde gene margin 0 auto değerini kullandık.
--- Yazı divinin içine yazı yazmışsın. Yazıyı da ortalamak için; yazı divi varya arkaplanı beyaz, o divin içine text-align=center ifadesini yapıştırdık🙂
Evet bu kadar. Ama çok zor yollardan yapıyorsun. Bence basit yoldan yapabilirdin. Şöyle:
<div style="width: 300px; height:30px; margin: 0 auto; background: #00a0b0">
<div style="width: 100px; height: 25px; background: #ffffff; color: #000000; font: 15px tahoma; margin: 0 auto; text-align: center; padding: 5px 0 0 0">Yazılan yazı</div>
</div>
Kendi örneğimde ki width değerleri font değerleri rastegele girdim. 🙂
Yani açtığın ilk bar biraz kafa karıştırmış o kadar sadece. Ama bana sorarsan bu örnek zor harbiden. Bende yeni oldu js başlayalı. Yaklaşık 2,5 aydır başladım. Yani seni anlayabiliyorum. Kolay gelsin🙂