‘tam ekran’ etiketi için sonuçlar
Sayfa Zeminini Tamamen Kaplayan Resimler Tanımlamak
Temmuz 25th, 2011 • 4 yorum CSS
Etiketler: background-size, tam ekran, zemin-resmi
Sitem üzerinden birçok mesaj aldım bu konuda. Sonunda yazmaya karar verdim, bir önceki makalemde CSS3’ün background-size özelliğini anlattım, orada da bahsettiğim gibi background-size özelliğini kullanarak bu işi çok kolay bir şekilde yapabiliriz. Buradaki problemimiz bu özelliği desteklemeyen tarayıcılar için nasıl bir çözüm bulmalıyız.
Bu makalede farklı tarayıcılar için sayfamızın zeminini tam kaplayan ardalan resimlerini nasıl tanımlayacağımızı anlatmaya çalışacağım.
CSS3 background-size ile basit şekilde yapalım
Bir önceki makalede de anlattığım gibi background-size özelliği bu iş için biçilmiş kaftandır. Çok basit bir kod ile istediğimize ulaşırız.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Bir örnek yapalım
html{
background:url("zemin_resmi.jpg") 0 0 no-repeat fixed;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
Örneği görmek için tıklayınız.
Ardalan resmini http://interfacelift.com/wallpaper/details/2421/empty_bottles.html aldım.
html elementine vermemizin nedeni body tanımlamalarında bazı tarayıcılarda sorun yaşamamızdır. Kaydırma çubuğunun hareketi ile zemin resmi kaymaması için resmi sabitledik(fixed). cover özelliği ile resmi zemine yaydık. Daha detaylı bilgi için tıklayınız.
Internet Explorer 9+
Firefox 3.6+(-moz-), 4+(standart)
Chrome1 (-webkit-),3+(standart)
Safari3+(-webkit-), 4.1(standart)
Opera 9.5+(-o-), 10+(standart)
İnternet Explorer 9 sürümünden önceki sürümlerinin bu özelliği desteklememesidir. İnternet Explorer için filter ile bir çözüm üretebiliriz.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.zemin_resmi.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zemin_resmi.jpg', sizingMethod='scale')";
Bu kod ile ie içinde çözüm üretilmiş olacaktır. Linklerde ve içerik seçmede bazı orunlar olabiliyor.
Tüm Tarayıcılar İçin Çözüm
<div id="tamEkranArdAlan"><img src="http://www.fatihhayrioglu.com/images/emptybottles.jpg" width="100%" height="100%" /></div> <div id="icerik"> ... </div>
Sayfamızı içerik ve ardalan resmi olarak ikiye ayırıyoruz.
html, body {height:100%; margin:0; padding:0;}
Sayfanın boşluklarını sıfırlıyoruz.
#tamEkranArdAlan {position:fixed; top:0; left:0; width:100%; height:100%;}
Zemine yerleştirilecek resmi sabitleyip üstten ve soldan başlangıç noktasına yerleştiriyoruz ve genişlik ve yükseklik değerini %100 veriyoruz.
#icerik {position:relative; z-index:1; width:650px; padding:20px; font:14px/1.8em Arial; margin:40px auto; border-radius:10px; color:#333; background-color:#fff}
İçerik alanını postion:relative; z-index:1 değeri atayarak içerikteki seçilme ve linklerde sorun olmasını engelliyoruz. Diğer tanımlar içerik alanının görselliğini ayarlamak içindir.
Bu kodlar ie6 hariç çalışırken ie6’da çalışmıyor ie6’da çalışması için
*html {overflow-y:hidden;}
*html body {overflow-y:auto;}
*html #tamEkranArdAlan {position:absolute; z-index:-1;}
*html #icerik {position:static;padding:20px;}
ie6 postipon:fixed desteklemediği için postion:absolute değeri tanımlıyoruz. İçerik alanınıda postion:static tanımlıyoruz. Kaydırma çubuğu sorunlarını halletmek için body ve html tanımlarımızı yapıyoruz.
Sonuç olarak tüm tarayıcılarda çalışan sayfa zeminini kapsayan zemin resmi tanımlamış olduk.
Sonuç
Sonuç olarak CSS3 ile birlikte gelen background-size özelliği tam işimizi görsede İnternet Explorer’un desteklememesi projelerimizde uygulamak için bizi düşündürüyor.
Tüm tarayıcıların desteklediği ikinci yöntem sadece CSS ile çözüm ürettiği için tercih edilebilir. Ayrıca javascript ile bazı çözümler olsa da ben css ile çözümü olan bir kodu javascript ile çözme taraftarı değilim. Javascript uygulamaları için http://css-tricks.com/3458-perfect-full-page-background-image/ linkindeki örnekleri incelemenizi öneriyorum.
Baktığım sitelerdeki uygulanabilir bu iki yöntemi sizlerle paylaştım uyguladıkça ve diğer yöntemleri gördükçe buraya ekleme yapabilirim. Birazda ihtiyaca göre yöntem uygulamak gerekiyor bu işte.
Kalın sağlıcakla
Kaynaklar
- http://css-tricks.com/3458-perfect-full-page-background-image/
- http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html
- http://www.paulmccrodden.com/2011/02/problems-css3-background-size-cover-iefilters/
- http://www.pziecina.com/design/turorial_demos/resize_background.php
- http://css-tricks.com/766-how-to-resizeable-background-image/
- http://paulmason.name/blog/item/full-screen-background-image-pure-css-code
- http://www.quackit.com/html/codes/html_stretch_background_image.cfm
- http://www.cssplay.co.uk/layouts/background.html
HTML Sayfalarına %100 genişlikte ve %100 yükseklikte flash dosyaları eklemek
Mart 29th, 2010 • 7 yorum CSS, XHTML
Etiketler: 0, flash, html, swf, swfobject, tam ekran
Site üzerinden gelen bazı sorular belli aralıklarla farklı kişilerden gelince bu konuda bir yazı yazma ihtiyacı duyuyorum. Bu konuda olduğu gibi. Daha öncede benzer sorular ile karşılaştım. Bende bir kaç projemde bu konuyu göz atmıştım.
İki yöntem var aslında bunun için.
Birinci Yöntem
body {
height: 100%;
width: 100%;
margin: 0;
}
şeklinde bir kod. Ancak bu kod ne yazık ki Firefox ve Opera’da çalışmıyor. Yada çalışması için html sayfamızdan DOCTYPE’ı silmemiz gerekiyor. Bence bu pek mantıklı bir kullanım değil, o nedenle ben ikinci yöntemi öneriyorum.
İkinci Yöntem
swfobject.embedSWF("test.swf", "myContent", "100%", "100%", "9.0.0", "expressInstall.swf");
Genişlik ve yüksekliğini 100% veriyoruz ve css kodumuzu yazıyoruz.
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
#myContent {
height: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #090;
}
Örneği görmek için tıklayınız
CSS kodumuz biraz daha fazla olan bu yöntem DOCTYPE kullanımı durumunda da çalıştığı için bence en kullanışlı yöntem. Geçen hafta anlattığım flashobject ile kodumuzu sayfaya ekledik.
CSS kodu biraz incelersek;
Kodun ilk iki tanımını ie5 Mac kullanıcılarından gizlemek için.
Htlm’e yüzde yüz yükseklik tanımı yapıyoruz ve flash dosyamız sayfanın tamamını kaplayacağı için sayfa kenarındaki kaydırma çubuğuna gerek kalmayacaktır, ie de kaydırma çubuğunu kaldırmak için overflow:hidden kodunu yazıyoruz.
Daha sonrada flash’ı eklediğimiz katman yüksekliğinide yüzde yüz yaparak elemanın tam sayfayı kaplamasını sağlıyoruz.
Son olarakta body elementinin yüksekliğini yüzde yüz yapıp margin ve padding değerlerini sıfırlıyoruz ve görünmese de işi garantiye almak için bir backgroun-color tanımı yapıyoruz. Bu kadar.
