Bir web siten var ama div kutuları doğru sıralanmıyor. Bu, özellikle divs ile ilgili problemleri bir web sitesinden diğerine dikkate aldığınızda, çeşitli nedenlerden dolayı olabilir. Benzer şekilde, kutu elemanları konumlandırma hatalarından taşma sorunlarına ve basit şamandıra sorunlarına kadar birkaç nedenden ötürü çakışabilir. Çoğu durumda, web sitenizin stil sayfasında hızlı ve kolay bir değişiklik sorunu çözecektir.

1.

Kutuların şu anda kenar boşluğu yoksa ve yalnızca küçük bir miktarla çakıştıysa bir kenar boşluğu ekleyin. Kenar boşluğunu, diğer kutu öğesini uzaklaştırmak için yalnızca marj öğesini kullanmak istiyorsanız, soldaki gibi yalnızca bir tarafa ayarlayabilirsiniz. Örneğin, div A ve div B yan yana yerleştirilmişse ve div B sol tarafa çakışıyorsa, stil sayfanızı div A'ya sol kenar boşluğu eklemek için aşağıdaki gibi değiştirebilirsiniz:

bir {genişlik: 100 piksel; sol kenar boşluğu: 10 piksel; }

2.

Örtüşmeye neden olabilecek konumlandırma değerleri için stil sayfanızı arayın ve bunları değiştirin. Web sitenizin div öğelerini düzenlemek için mutlak konumlandırma kullanıyorsanız, bu herkes için ücretsizdir - herhangi bir öğe sayfadaki diğer herhangi bir öğeyle çakışabilir. Bu nedenle, div A, sayfanın üst ve solundan 100 piksel genişlikte ve 15 piksel olarak ayarlanmışsa, div A'nın üst üste binmemesi için div B'nin solda en az 115 piksel olması gerekir. üst veya alt ve sağ veya soldan.

3.

Belirli bir genişliğe sahip bir div ayarlayın ve taşma işlemini gizleyin. Bu, div'in belirtilen bir boyutu aşmasını önler ve tabiri caizse içeriğin dökülmesini önler. Örneğin, div A ayarlanmış bir genişliğe sahip değilse ve içine büyük bir görüntü koyarsanız, div görüntüyü sığdırmak için otomatik olarak genişler. Genişliği ayarlarsanız, görüntü div'in kenarlarının ötesinde görünmeye devam eder, ancak div genişlemez. Taşma işlemini gizlerseniz, görüntü yalnızca div'in sınırları içinde gösterilir ve öğeyi genişletmez. Örneğin, div A'yı 200 piksel genişliğinde ve taşmayacak şekilde ayarlamak için bu stil kodunu kullanırsınız:

bir {genişlik: 200 piksel; taşma: gizli; }

4.

Div kutularını otomatik olarak yan yana istiflemek için "şamandıra" seçeneğini kullanın. Örneğin, div A'nın içeriğinizi tutmak için kenar çubuğu ve div B olarak hareket etmesini istiyorsunuz - her iki div'i sola doğru çekerek yatay olarak hizalanmalarını sağlayabilirsiniz. Yüzen div elemanları üst üste gelmez. İki hareketli eleman örneği şuna benzer:

bir {genişlik: 150 piksel; şamandıra: sol; }

b {genişlik: 400 piksel; şamandıra: sol; }

İpuçları

• Firefox kullanıyorsanız, bir kutuyu sağ tıklayıp "Öğeyi İncele" yi seçebilirsiniz. Bu size, özellikle zor bir sorunu saptamanıza yardımcı olabilecek, her bir öğenin görsel bir taslağını verir.
• "Overflow-x" veya "overflow-y" tuşlarını kullanarak yalnızca x veya y ekseninde gizlenecek şekilde taşma ayarlayabilirsiniz.