Text Align p {text-align:left;} /*Sola Hizalama*/ p {text-align:right;} /*Sağa Hizalama*/ p {text-align:center;} /*Ortalama*/ p {text-align:justify;} /*İki Yana Yasla*/
css her iki yana yaslama, css iki yana yaslama, css iki yana yaslama kodu, css metin yaslama, div, html iki yana yaslama, merkeze, sağa, sağa yaslama, sola, sola yaslama, text align
CSS ile HTML elementlerinin sayfaya veya diğer elementlere göre konumunu belirleyebiliriz. Örneğin sağa sola yaslayabiliriz. Veya diğer nesnelerle olan pozisyonu belirleyebiliriz. Bununla birlikte diğer HTML elementlerine göre büyüklüklerini göreceli ya da kıyaslamalı olarak belirleyebiliriz.
Tüm HTML nesneler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Fakat biz bu elementlerin CSS ile position ‘unu tanımlamamışsak bu özellikler herhangi bir işe yaramayacaktır. Bununla birlikle HTML nesnelerinin pozisyonlarını belirlediğimiz 4 özellik daha mevcuttur. Bunlar:
Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri varsayılan pozisyonlarında kalacaklardır. Bu kullanımda HTML nesnelerin alt, üst, sağ ve sol özellikleri bulunmaz.
Bir HTML nesnesini tarayıcı ekranına sabitlemek için kullanırız. Sayfayı kaydırsanız bile o element orada sabit duracaktır.
img.fixed { position: fixed; top: 20px; right: 15px; }Yukarıdaki css koduna göre “fixed” özelliğine sahip resmimiz sağdan 15 piksel üstten de 20 piksel olacak şekilde sayfaya sabit bir şekilde tutturulduğunu göreceksiniz.
Bunun gibi elementler bazen bir diğerinin üzerine geçebilir ve diğerini kapatabilir. Bunların hiyerarşik sıralamasını belirlemek için z-index kullanabiliriz.
Bir HTML elementini o anki sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin o an olması gereken pozisyon tarayıcı tarafından hesaplanır. Ancak biz elementi sağ, sol, alt ve üst tarafa doğru relative/göreceli olarak hareket ettirebiliriz.
p { position: relative; right: -20px; }Yukarıdaki örnek P elementini bulunduğu konumdan 20 piksel sola kaydırır. Böylece diğer bir elementin üzerine getirebiliriz.
HTML elementlerini sayfada istediğimiz bir konuma yerleştirmek istediğimizde absolute komutunu kullanırız. Bu komut fixed gibi nesneyi belli bir konuma kilitlemez. Ancak sayfa içerisindeki kesin konumunu belirler. Aşağıdaki örnekte UL nesnesini sayfanın üstten 20px aşağısına 30px de soluna yerleştirdik. Elbette sayfaya göre belirlendiği için sayfa hareket ettikçe nesne de hareket edecektir.
ul { position: absolute; left: 30px; top: 20px; }Bu pozisyon belirlemede reletivede olduğu gibi element sayfada belli bir yeri işgal etmez. Bunun yerine belirlediğimiz konum üzerinde asılı durur. Bazen “Absolute” özellikli elementler başka bir elementin üzerine geçebilir ve onları kapayabilir.
Bazı çizim veya resim programlarından bildiğimiz üzere nesnelerin katman sırasını belirleriz. İşte böyle CSS’de de z-index özelliği ile bir HTML elementinin diğerinin üzerinde veya altında görünmesini sağlayabiliriz.
p { position: absolute; left: 0px; top: 0px; z-index: 1; }Yukarıda -1 değeri ile belirttiğimiz paragraf diğer tüm elementlerin altında görünecektir. Çünkü varsayılan olarak HTML elementlerinin z-index değerleri 0 olarak atanır. Buna karşın bu element -1 olduğu için alt katman olarak belirlenir ve diğer nesnelerin altında gözükür.
Negatif değerler aynı sayılarda olduğu gibi değerlendirilir. Örneğin z-index değeri -3 olan bir nesne -2 olan nesnenin altında yer alacaktır.
HTML elementlerini sağa ve sola doğru kaydırmamız için kullandığımız CSS kodudur. Bunu Office Programlarındaki sağa sola yaslama gibi düşünebilirsiniz.
Elementler, yatay konumlarına göre sağa ve sola doğru kaydırılabiliriz. Bununla birlikte aşağı veya yukarı doğru kaydırma yapamayız.
Kaydırılan element, sağ veya soldaki elementin ya sağından ya da solundan başlayacaktır. Yani burda kaydırdığımız nesne, kendisinden önce kaydırılan nesneden sonra gelir. Dolayısıyla önceden kaydırılmış nesnede herhangi bir değişiklik olmaz.
Örneğin menü yaparken kullandığımız bir li HTML nesnesini için float: left; özelliği ile yaslamaya çalışırsak her bir li nesnesi bir öncekinin sağına yerleşecek şekilde hepsi solda yer alacaktır.
Resim galerilerinde çok sık kullanılan bir yöntemi biliyorsunuz. Büyük resimleri açmak için tıkladığımız küçük resimler sayfada yan yana sıralanırlar. Bunlar birbirine eşit olmalı ki kaydırıldığında birbiriyle uyumlu olsunlar. Örneğin küçük görüntümüz:
.thumbnail { float: left; width: 100px; height: 100px; padding: 10px; border 1px solid #dedede; margin: 15px; }
Yukarıdaki örnekte thumbnail klasına sahip resimleri yanyana ip gibi dizdik. Burada nesneler bir öncekinin sağına yerleştirildi. Ayrıca sığmayanlar aşağıya kaydırılacaktır.
clear: both; komutu artık kaydırma işleminin bittiğini söyler, böylece yanına başka bir element gelemeyecektir.
.text_line { clear: both; }Kutu özelliğine sahip olan nesneleri sağa sola ya da ortaya hizalayabiliriz. Bunun için text-align kodunu kullanırız. Bu yazımızda daha farklı yöntemlerle hizalama işlemi yapacağız.
Daha önce söylendiği gibi kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı tam da ortalanacaktır. Bununla birlikte genişliğimizi yüzde 100 yapmamalıyız. Yani width değeri hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:
.textcenter { margin-left:auto; margin-right:auto; width:90%; background-color:#dedede; }Yukarıdaki örnekte otomatik olarak 5% sola 5% de sağa boşluk gelecektir. Aynı zamanda genişlik de buna göre ayarlanacaktır.
Position: absolute; kodu kullanarak da ölçüsünü belirlediğimiz genişlikte bir kutunun sağa veya sola yaslanmasını sağlayabiliriz. Örnek vermek gerekirse 400 piksellik bir kutuyu sağa yaslamak için:
.textcenter { position: absolute; right; 0px; width: 400px; background-color:#b0e0e6; }Sağdan 0 piksel verdik ki nesne tam olarak da sağda bulunsun. Bunun için right: 0px; yaptık.
Float HTML nesnelerini sağa veya sola kaydırarak listelememizi yardımcı olur. Kaydırma özelliğini bir nevi hizalamak için kullanırız:
.right { float: right; width: 300px; background-color:#b0e0e6; }Sayfamızda 300 piksellik bir kutu sağa yaslanmış durumdadır.
Bütün bu CSS komutlarını düzgün hizalı menü oluşturma veya resim galerilerinde küçük resimleri hizalama gibi daha bir çok yerde kullanabiliriz. Sayfanız içerisinde hangisinin daha kullanışlı olacağı tasarımınıza göre şekillenecektir. Ayrıca tasarımlarınızda karşılaştığınız problemler için yorum yazabilirsiniz. İçeriğin eksik veya hatalı olduğunu düşünüyorsanız bunu söylemekten çekinmeyin. Yorumlarınız mutlaka yayınlanacaktır.
Dizayn & Tasarım : Mehmet KAYA
oksabron ne için kullanılır patates yardımı başvurusu adana yüzme ihtisas spor kulübü izmit doğantepe satılık arsa bir örümceğin kaç bacağı vardır