Tek arkaplan resmiyle yuvarlak kenarlı tablolar

Bu yazıda tek bir daire resmi ile yuvarlak kenarlı tablolar yapmayı anlatmaya çalışacağım..tabi bunu yapmak için css’den faydalanacağız..kullandığım resim aşağıdaki daire resmi

bu resim 30×30 piksel boyutunda ortası #336699 renginde basit bir daire ve yuvarlak kenarlı şık tablolar yapmak için ihtiyacımız olan tek şey şimdi de kodlarımıza geçelim..

tablomuzun üst tarafını oluşturan kodlarımız şöyle..burada sol üst köşe için dairemizi sol üste hizaladık ve genişlik ve yükseklik değerlerini 15 piksel vererek sadece işimize yarayan kısmının görünmesini sağladık zira sağ üst köşe için dairemizi sağ üste hizalayıp yine aynı boyut ayarlamasını yapacağız..orta bölümde ise sadece arkaplan rengini dairenin içiyle aynı renkte vermemiz yeterli

<div style="position: absolute; top: 5px; left: 5px; background-image: url(kose.jpg); background-position: top left; background-repeat: no-repeat; width: 15px; height: 15px;">
</div>
<div align="center" style="position: absolute; top: 5px; left: 20px; background-color: #336699; width: 400px; height: 15px;" color="#ffffff">
</div>
<div style="position: absolute; top: 5px; left: 420px; background-image: url(kose.jpg); background-position: top right; background-repeat: no-repeat; width: 15px; height: 15px;">
</div>

bu kısımda tablomuzun içeriğini yazabiliriz..ben örnek bir şeyler yazdım

<div style="position: absolute; top: 20px; left: 5px; width: 420px; height: 250px; background-color: #336699; color: #ffffff; padding: 5px; overflow: none;">
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
</div>

alt kısım ise üst tarafta yaptıklarımızın tam tersi..burada dikkat ettiğimiz nokta daireleri hizalarkan top değil bottom kullanıyoruz yani alt köşelere hizalıyoruz

<div style="position: absolute; top: 270px; left: 5px; background-image: url(kose.jpg); background-position: bottom left; background-repeat: no-repeat; width: 15px; height: 15px;">
</div>
<div align="center" style="position: absolute; top: 270px; left: 20px; background-color: #336699; width: 400px; height: 15px;" color="#ffffff">
</div>
<div style="position: absolute; top: 270px; left: 420px; background-image: url(kose.jpg); background-position: bottom right; background-repeat: no-repeat; width: 15px; height: 15px;">
</div>

sonuç ise şöyle olacak..vay be tek resimde işi bağladık

sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd
sdmklas dmkasl dmacvsd vasd vasdv asd vasdv asd vsdv asd vd vasdv asdv asd vasd