Merhaba,

Daha önce HTML Etiketleri yazısında etiketlerin Inline ve Block olmak üzere 2 farklı tipini gördük.

display özelliği HTML öğesinin tipini değiştirmek için kullanılır. Örnek olarak <p> etiketinin varsayılan display özelliği block olarak tanımlanmıştır. Bunu CSS ile değiştirmemiz mümkün.

p{ display: inline; }

Tip Değiştirmek Yerine inline Başka Bir Etiket Kullanmak

<p> etiketinin tipini değiştirmek yerine <span> gibi inline bir etiket kullanılabilir. Fakat biz HTML etiketlerinden öncelikle kullanım amacımıza uygun olanı seçmeliyiz, bize sağladığı özelliklere göre değil. Stil özellikleri için asıl kullanmamız gereken etiket yerine başka bir seçenek tercih etmemeliyiz. Bunun yerine CSS ile gerekli düzenlemeyi yapmamız gerekir.

display özelliğinin aldığı bir takım farklı değerler bulunmaktadır:

  • display: block; Öğeyi tüm satırı kaplayacak şekilde gösterir.
  • display: inline; Öğeyi satır içi öğe yapar.
  • display: inline-block; Hem inline hem de block özelliklerin bileşimidir. inline öğeler gibi yan yana dizilebilir, block öğeler gibi genişlik-yükseklik-boşluk gibi değerler tanımlanabilir.
  • display: list-item; Aynı block öğeler gibi tüm genişliği kaplar fakat madde işareti bulundurur.
  • table , table-row ve table-cell özellikleri farklı düzenlere izin veren özel davranışlara sahiptir.

display:block; özelliği

Herhangi bir öğeyi block özellikte yapmak için kullanılır. Aşağıdaki örneğimizde menü linklerimizi tüm satırı kaplayacak şekilde düzenleyeceğiz.

HTML Kodumuz:

<ul class="menu">
  <li>
    <a>Anasayfa</a>
  </li>
  <li>
    <a>Hakkımızda</a>
  </li>
  <li>
    <a>Hizmetlerimiz</a>
  </li>
  <li>
    <a>İletişim</a>
  </li>
</ul>

CSS Kodumuz:

.menu a{ background: red; color: white; }

Görünümü:

Fakat biz her bir link öğemizin satır boyunca tıklanabilir şekilde kaplanmasını istiyoruz. Bu sebeple CSS kodumuza bir display özelliği ekleyeceğiz.

.menu a{ background: red; color: white; display: block; }

Görünümü artık bu şekilde oldu:

Artık hangi linkin satırında tıklama yaparsak yazının üzerine gelmesek bile tıklanabilir olur. (Örnekte linklere href belirtmedik o sebeple tıklanabilir olmayabilir. Test etmek için href özelliği ile bir yönlendirme verebilirsiniz.)

Burada dikkat etmemiz gereken nokta, biz liste öğelerimize değil inline öğeler olan <a> etiketlerimize block özelliği kazandırdık.

display:inline; özelliği

Peki biz menü öğelerimizi alt alta değil de yan yana yazmak isteseydik ne yapmamız gerekiyordu?

Liste öğelerimiz varsayılan olarak alt alta yazılır çünkü block öğelerdir. Biz bu öğeleri inline yaparak yan yana yazılabilir hale getirip yatay bir menü elde edeceğiz.

HTML Kodumuz:

<ul class="menu">
  <li>
    <a>Anasayfa</a>
  </li>
  <li>
    <a>Hakkımızda</a>
  </li>
  <li>
    <a>Hizmetlerimiz</a>
  </li>
  <li>
    <a>İletişim</a>
  </li>
</ul>

CSS Kodumuz:

.menu li{ display: inline; }

Görünümü:

Bu sayede yatay menü elde ettik. Bir çok web sitesinde menü düzeni bu şekilde kullanılmaktadır.

display:none; özelliği

display:none; özelliği bir öğeyi web sayfanızdan kaldırmak için kullanılır. Kaldıracağımız bir öğeyi neden kullanalım ki? diyebilirsiniz, fakat genellikle bir JavaScript fonksiyonu ile belirli durumlarda bir öğeyi kaldırmak veya belirli durumlarda ortaya çıkarmak için bu özelliğe ihtiyaç duyarız.

<p>Did I hear someone speaking??</p> <p class=“gone-baby-gone”>Hahahahahah</p> <p>I must be dreaming…</p>

<p>Bu normal bir paragraf.</p>
<p class="kaldir-bunu">Bu paragrafımız görünmeyecek.</p>
<p>Bu da 2. normal bir paragraf.</p>

CSS kodumuzda kaldir-bunu class özelliğine display:none; ekleyerek bu classın kullanıldığı paragrafın kaldırılmasını sağlayacağız.

.kaldir-bunu{ display: none; }

Görünümü:

Gördüğünüz gibi ikinci paragrafımız sanki hiç yazılmamış gibi bulunmuyor. Kodumuzda 3 tane paragraf var ancak tarayıcımızda 2 paragraf görüyoruz.

visibility:hidden; özelliği

Bu özellik ile display:none; özelliği bazen karıştırılmakta. İkisinin temel farkı şu: display:none; özelliği öğeyi tamamen kaldırır, visibility:hidden; özelliğinde ise sadece görünmez yapar, aslında öğe oradadır ve yer kaplar.

<p>So far away from me </p> <p class=“hollow-man”>So far i just can’t see</p> <p class=“hollow-man”>So far away from me</p> <p class=“hollow-man”>You’re so far away from me</p> <p>You’re so far away…</p>

<p>Burada 1. paragraf var </p>
<p class="gorunmezlik-pelerini">Burada 2. paragraf var</p>
<p class="gorunmezlik-pelerini">Burada 3. paragraf var</p>
<p class="gorunmezlik-pelerini">Burada 4. paragraf var</p>
<p>Burada 5. paragraf var</p>

Şimdi gorunmezlik-pelerini class özelliği olarak visibility-hidden; ekleyelim ve bu class bir görünmezlik pelerinine dönüşsün.

.gorunmezlik-pelerini{ visibility: hidden; }

Artık 2. , 3. ve 4. paragraflarımız görünmez olacaktır.

Görünümü:

Göründüğü üzere 5 paragraf yazdık ancak sadece 2 tanesi görünüyor. Kalan 3 paragraf yine olması gerektiği yerde alan kaplıyor ancak görünmüyor.