Öneri ve Hata Raporu



Günün Sözü İnsan kafasında ne kurarsa, onu yaşar.

kategori CSS
oylama 2.8/5 yorum 4 yorum yazar Hakan Taşan tarih 23 Kasım 2013

Bu makalede display:none ile visibility:hidden arasındaki farktan bahsecedeğim. Belki ikisi de işinizi görüyordur lakin kesinlikle aynı işleve sahip değildir ve farklı sonuçlar verir. Kısaca açıklayacak olursam display:none elementi yok eder, visibility:hidden ise elementi gizler.

Syntax

display:none;
visibility:hidden;

 

1) display:none

Elementi ve sayfada kapladığı boşluğu yok eder. Sayfa derlenirken element yokmuş gibi davranılır.

CSS Kodu

h1.hidden{display:none;}

 

HTML Kodu

<h1>Burada görünür bir başlık var</h1>
<h1 class="hidden">Burada gizli bir başlık var</h1>
<p>display:none; kullanılarak gizlenen başlık sayfada yer kaplamaz.</p>

 

2) visibility:hidden

Elementi gizler, sayfada kapladığı boşluk kalır. Sayfa derlenirken element varmış gibi davranılır ancak element gösterilmez.

CSS Kodu

h1.hidden{visibility:hidden;}

 

HTML Kodu

<h1>Burada görünür bir başlık var</h1>
<h1 class="hidden">Burada gizli bir başlık var</h1>
<p>visibility:hidden; kullanılarak gizlenen başlık sayfada yer kaplar.</p>

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

4 Yorum


yorum

Tayfun

27 Şubat 2015 01:11


Genellikle yorum yapmayı sevmem ama yiğide de hakkını vermek gerekir.. Gerçekten çok faydalı ve ince ayrıntılara değinerek yalın ve akıcı bir anlatımla sunuyorsunuz.Tekrardan sağolun..

yorum

Admin

28 Şubat 2015 21:35


yorumunuz için teşekkür ederim.

yorum

Eyüp

10 Mayıs 2015 15:11


Kardeşim emeğine sağlık. Çok başarılı bir anlatım..

yorum

İsmet Doğancı

20 Haziran 2016 16:48


Anlatımlarınız teşekkürler yukarıda yazılan yorumlara katılıyorum.