Web Sayfası Düzenlerini Tasarlamak için CSS float Özelliğini Kullanma
CSS özelliği, düzen için çok önemli bir özelliktir. Web sayfası tasarımlarınızı tam olarak istediğiniz gibi konumlandırmanıza olanak tanır - ancak bunu kullanabilmek için nasıl çalıştığını anlamanız gerekir.
Bir stil sayfasında, CSS float özelliği şöyle görünür:
.right {float: doğru; }
Bu, tarayıcıya “doğru” sınıfına sahip her şeyin sağa kaydırılması gerektiğini söyler.
Bunu şöyle atayacaksın:
class = "sağ" />
CSS float Mülkiyeti ile Neler Yapabilirsiniz?
Bir web sayfasındaki her öğeyi yüzemezsiniz. Yalnızca blok seviyeli öğeleri yüzebilirsiniz. Bunlar, sayfada (), paragraf (), bölümler () ve listeler () gibi bir alan boşluğu oluşturan öğelerdir.
Metni etkileyen, ancak sayfada bir kutu oluşturmayan diğer öğeler satır içi öğeler olarak adlandırılır ve yüzemez. Bunlar span (), satır sonları (), güçlü vurgu () veya italik () gibi öğelerdir.
Nerede Yüzer?
Öğeleri sağa veya sola kaydırın. Süzülen elemanı takip eden herhangi bir eleman, diğer taraftaki yüzdürme elemanının etrafında akacaktır.
Örneğin, bir görüntüyü sola kaydırırsam, onu izleyen herhangi bir metin veya diğer öğeler sağa doğru akar. Ve bir görüntüyü sağa kaydırırsam, onu izleyen herhangi bir metin veya diğer öğeler sola doğru akar. Float stiline sahip olmayan bir metin bloğuna yerleştirilen bir görüntü, tarayıcı görüntülerini gösterecek şekilde görüntülenir.
Bu genellikle görüntünün altında görüntülenen metnin ilk satırı ile olur.
Ne Kadar Uzaklaşacaklar?
Süzülen bir eleman, konteynır elemanının mümkün olduğu kadar sağına veya soluna kadar hareket edecektir. Bu, kodunuzun nasıl yazıldığına bağlı olarak birkaç farklı durumla sonuçlanır.
Bu örnekler için, soldaki küçük bir DIV elemanı kayarım:
- Yüzer elemanın önceden tanımlanmış bir genişliğe sahip olmaması durumunda, şamandıra bağlı olmaksızın, gerektiği kadar ve kullanılabilir olan yatay alanı kaplar. Not: Bazı tarayıcılar, genişlik tanımlanmadığında yüzer elemanların yanındaki öğeleri yerleştirmeyi dener; genellikle, taşmayan öğeye yalnızca az miktarda alan verir. Bu nedenle, her zaman bir süzülmüş elemanlar üzerinde bir genişlik tanımlamanız gerekir.
- Kapsayıcı öğe HTML öğesiyse, süzülmüş DIV sayfanın sol kenarına oturur.
- Kap elemanının kendisi başka bir şey tarafından tutulmuşsa, yüzdürülen DIV konteynerin sol kenarına oturacaktır.
- Yüzen elemanları yuvalayabilir ve bu da şamandıranın şaşırtıcı bir yerde sona ermesine neden olabilir. Örneğin, bu şamandıra, bir sağa akımlı DIV içinde bir sol yüzer DIV'dir.
- Konteynırda yer varsa, yüzer elemanlar yan yana oturacaklardır. Örneğin, bu kap 400 piksel genişliğinde bir kapta yüzen üç 100px geniş DIV öğesine sahiptir.
Fotoğraf galerisi yerleşimi oluşturmak için float bile kullanabilirsiniz. Her bir küçük resmi (her biri aynı boyutta olduklarında en iyi şekilde çalışır), altyazıya sahip ve DIV öğelerini kapsayıcıda yüzdüğü bir DIV'ye koyarsınız.
Tarayıcı penceresi ne kadar geniş olursa olsun, küçük resimler aynı hizaya gelecektir.
Şamandırayı Kapatma
Yüzen bir elementin nasıl alınacağını öğrendikten sonra, floatın nasıl kapatılacağını bilmek önemlidir. Şamandırayı CSS clear özelliği ile kapatırsınız. Sol şamandıraları, sağ şamandıraları veya her ikisini birden temizleyebilirsiniz:
açık: sol;
açık: sağ;
ikisini de temizle;
Clear özelliğini ayarladığınız herhangi bir öğe, bu yönü gösteren bir öğenin altında görünecektir. Örneğin, bu örnekte metnin ilk iki paragrafı temizlenmez, ancak üçüncü.
Farklı düzen efektleri elde etmek için belgelerinizdeki farklı öğelerin açık değeriyle oynayın.
En ilginç yüzer düzenlerden biri, metin paragraflarının yanında sağ veya sol sütun boyunca bir dizi görüntüdür. Metin görüntüyü kaydırmak için yeterince uzun olmasa bile, bir önceki görüntünün yanında değil, sütunda göründüklerinden emin olmak için tüm resimleri temizleyebilirsiniz.
HTML (bu paragrafı tekrarlayın):
Duis aute irure dolor sed volkanda reprehenderit içinde eiusmod tempor incididunt yapmak. Cupidatat olmayan, ut labore ve dolore magna aliqua.
CSS (görüntüleri sola kaydırmak için):
img.float {float: kaldı;
net: left;
marjı: 5px;
}
Ve sağa:
img.float {float: sağ;
net: right;
marjı: 5px;
}
Düzen için Float Kullanımı
Float özelliğinin nasıl çalıştığını anladıktan sonra, web sayfalarınızı düzenlemek için kullanmaya başlayabilirsiniz. Floating web sayfası oluşturmak için attığım adımlar şunlardır:
- Düzeni tasarlayın (kağıda veya grafik aracında veya kafamda).
- Sayfa bölümlerinin nerede olacağını belirler.
- Çeşitli kapların ve bunların içindeki elemanların genişliklerini belirleyin.
- Her şeyi süz. En dıştaki konteynır elemanı bile sol tarafa doğru süzülür, böylece tarayıcı görünümü bağlantı noktasına göre nerede olacağını bilirim.
Yerleşim bölümlerinizin genişliklerini (yüzdeleri iyi) bildiğiniz sürece, şamandıra özelliğini, sayfaya ait oldukları yere yerleştirmek için kullanabilirsiniz. Ve güzel olan şey, Internet Explorer veya Firefox için farklı olan kutu modeli hakkında endişelenmenize gerek yok.