Denk geldiğim CSS sorunlarının büyük bir çoğunluğu, oluşturulan tabloların ( Elementlerin ) yerleşimlerinde meydana gelen kaymalar olduğu dikkatimi çekti. Bunların çoğunun kaynaklanma nedeni atadıkları width değerleri ile alakalı oluyor.
Böyle birçok sorunla karşılaştım. Çözümleri aslında çok basit. Sadece yeni başladıkları için olsa gerek width değerlerini yorumlarken bazen yanlışlıklar yapıyorlar.
Mesela iki element oluşturdunuz ve bunlar bir türlü yanyana gelmiyor. Soldaki elementin width değeri 100, sağdakinin ise 300 olsun. Oysaki float değerleri atamıştınız. O elementlerin özellikleri olarakta width, margin, padding, border değerleri de belirttiniz.
Bunların yanyana geleceğini düşünebilirsiniz. Çünkü sol tarafın width değerini 100, sağ tarafınınkini ise 300 olarak belirledik.
Ancak bunların yanyana olacak şekilde sayfada konumlanmasını bekleyemeyiz.
Çünkü bir elementin asıl toplam width değeri ( Genişliği ), o elementin sahip olduğu sol margin, sag margin, sol padding, sağ padding, sol border, sağ border değerlerinin de toplamıda demektir.
Yani burada sag bölümün asıl genişliği 300 + 4 + 6 + 2 = 312 px'tir. Yan yana görünmesini sağlamak için width değerini 288px olarak ayarlarsak sorun ortadan kalmış olur.
Bu tarz sorunlarla karşılaşmamak için bir tavsiyem var. En azından ben o şekilde çalışıyorum.
Siteyi kodlamaya geçmeden önce bir kağıt üzerinde taslak olarak çiziyorum. Width değerlerini de belirtiyorum. Daha sonra kodlamaya geçiyorum ve herşeyi adım adım yapmaya çalışıyorum. Böylece karışık tasarımlarda zorlanmayacağınızı düşünüyorum.
Böyle birçok sorunla karşılaştım. Çözümleri aslında çok basit. Sadece yeni başladıkları için olsa gerek width değerlerini yorumlarken bazen yanlışlıklar yapıyorlar.
Mesela iki element oluşturdunuz ve bunlar bir türlü yanyana gelmiyor. Soldaki elementin width değeri 100, sağdakinin ise 300 olsun. Oysaki float değerleri atamıştınız. O elementlerin özellikleri olarakta width, margin, padding, border değerleri de belirttiniz.
HTML:
.ana {
width:400px;
}
.sol {
width:100px;
float:left;
}
.sag {
width:300px;
float:right;
margin: 2px;
padding:3px;
border:1px;
}Bunların yanyana geleceğini düşünebilirsiniz. Çünkü sol tarafın width değerini 100, sağ tarafınınkini ise 300 olarak belirledik.
HTML:
<div class="ana">
<div class="sol">Sol Bölüm</div>
<div class="sag">Sağ Bölüm</div>
</div>Ancak bunların yanyana olacak şekilde sayfada konumlanmasını bekleyemeyiz.
Çünkü bir elementin asıl toplam width değeri ( Genişliği ), o elementin sahip olduğu sol margin, sag margin, sol padding, sağ padding, sol border, sağ border değerlerinin de toplamıda demektir.
Yani burada sag bölümün asıl genişliği 300 + 4 + 6 + 2 = 312 px'tir. Yan yana görünmesini sağlamak için width değerini 288px olarak ayarlarsak sorun ortadan kalmış olur.
HTML:
.ana {
width:400px;
}
.sol {
width:100px;
float:left;
}
.sag {
width:288px;
float:right;
margin: 2px;
padding:3px;
border:1px;
}Bu tarz sorunlarla karşılaşmamak için bir tavsiyem var. En azından ben o şekilde çalışıyorum.
Siteyi kodlamaya geçmeden önce bir kağıt üzerinde taslak olarak çiziyorum. Width değerlerini de belirtiyorum. Daha sonra kodlamaya geçiyorum ve herşeyi adım adım yapmaya çalışıyorum. Böylece karışık tasarımlarda zorlanmayacağınızı düşünüyorum.
