#*display

School is such a pain getting in the way of everything. AHHHHH I AM LOOKING FORWARD TO HIM WHY IS THERE ANOTHER BOOK BETWEEN ME AND HIM

Ugh, i know

New Post has been published on http://www.adobewordpress.com/inline-ne-demektir

Inline ne demektir?

Web tasarımında sık sık karşınıza çıkabilecek bir diğer tabir de inline olacaktır. Inline 2 anlama sahiptir. Her ikisi de benzer özellikler gösterir.

CSS’de display:inline şeklinde atanabilen özellik, öğenin block yapısından çıkmasına, bağlı olduğu kod satırındaki diğer öğelerle beraber gözükmesine sebep olur.

HTML’de ise <style> ve <script> gibi elemanlar sayfa-içi tanımlamalar da inline CSS ve JS olarak gösterilirler.

Şimdi konuyu biraz detaylandıralım.

Inline’ın yukarıda bahsettiğimiz gibi iki anlamı vardır. Fakat HTML içerisindeki style ve script tanımlamaları iyi bir web taslağı için tavsiye edilmez. Örneklerle devam edelim.

Inline CSS

CSS’in display özelliğine inline veya block ifadelerini atayabiliyoruz. Ayrıca bazı elemanlar bu özelliği varsayılan değer olarak taşırlar.

Block elemanlar : Bu elemanlar display:block özelliğine sahiptir ve ayrı bir satır olarak gözükürler. Örneğin h1 veya div gibi…

Inline elemanlar : Bu elemanlar display:inline özelliğine sahiptir ve eklendikleri satırda yapıyı bozmadan gözükürler. Örneğin b veya a gibi…

Inline HTML

HTML ismi sizi yanıltmasın. Üzerine konuştuğumuz .html, .htm, .php, veya .asp gibi tüm sayfa yapıları. Bu dosya tiplerinin içerisinde aşağıdaki benzer gördüğünüz kodlar inline olarak tanımlanır.

CSS örneği

<h1 style="color:red;">Kırmızı başlık</h1>

veya

<style>h1{color:red;}</style>

JS örneği

<script>document.getElementById(aw).style.display = "none";</script>

Bu tip sayfa-içi tanımlamalara da inline denilmektedir ve kullanımları önerilmemektedir.

Doğru kullanım

Inline HTML sayfa-içi işlemlerini .js ve .css uzantılı dosyalarda yapmamız gerekiyor.

<h1 style="color:red;">Kırmızı başlık</h1>

yerine

style.css dosyası oluşturup içerisine

h1{color:red;}

New Post has been published on http://www.adobewordpress.com/yatay-li-elemanlarini-nasil-ortalariz

Yatay <li> Elemanlarını Nasıl Ortalarız?

Yatay menü tasarımlarında sıklıkla kullandığımız <ul> içerisindeki <li> öğelerini ortalamak aslında gayet basit.

Birkaç basit CSS koduyla Firefox, Chrome ve Internet Explorer gibi yaygın tarayıcılarla uyumlu olarak çalışan bir ortalayıcı hazırlayabilirsiniz.

Süreç

Örnek olarak basit bir <ul> ve <li> menü tipi oluşturalım.

<ul> <li>Menü 1</li> <li>Menü 2</li> <li>Menü 3</li> </ul>

Normal şartlarda bu tarz bir kodlama yazdığımızda elde edeceğimiz sonuç bu şekilde olur:

İstediğimiz sonuç bu değil. O yüzden bizde mantık yürüterek tüm <li> kodlarına CSS kullanarak float:left atarız. Böylece sırayla sola yaslanırlar ve yatay konuma gelirler. Fakat bu işlemi yaptıktan sonra içinde bulundukları <ul> içerisinde sağ taraf boş kalır ve ortalama işlemi can sıkıcı bir hal alır.

Düz mantık çözmek isterseniz <ul> değerine bir width değeri atayabilir, sonrasında da yine margin:auto ile işin içinden çıkabilirsiniz. Hadi ama, yıl 2013. Mobil cihazlara uygun tasarımlar yapmakla yükümlüyüz. Sabit width değeri de ne?

Nasıl yapılır?

İşlem aslında gayet basit. İşin komik kısmı ise float komutuna bile ihtiyacımız yok. Üstteki HTML kodlarına atayacağınız CSS kodlarında display:inline-block satırının bulunması tüm sorunu çözecektir. Fakat bizler yine de Internet Explorer kullanıcıları için ek olarak *display ve *zoom komutlarını da ekleme gereği duyuyoruz.

Adobewordpress tamamıyla tasarım geliştiricilerine hitap eden bir web sayfası olsa da ziyaretçilerinin %5‘i hala IE kullanmakta. Hal böyleyken IE uyumuna dikkat etmeye devam ediyoruz.

Az önceki HTML kodlarımızı tekrar hatırlayalım.

<ul> <li>Menü 1</li> <li>Menü 2</li> <li>Menü 3</li> </ul>

Şimdi de CSS kodlarımızı ekleyelim.

ul{ text-align:center; } ul li{ display:inline-block; *display:inline; /*IE7*/ *zoom:1; /*IE7*/ }

Bu kadar basit.

Kapanış