‘html’ etiketi için sonuçlar

HTML Sayfalarına %100 genişlikte ve %100 yükseklikte flash dosyaları eklemek

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.

Kaynaklar

HTML 5′in yeni elementlerine bir göz atalım

11 Ağust’ta yazdığım haberler içerisinde yer alan “HTML5′in yeni elementleri” adlı makaleyi okudum ve konuyu biraz araştırdım. Bu makaleyi baz alarak yeni elementler hakkında genel bir özet çıkardım. Güzel elementler eklenmiş. Neyse yazıya geçelim.

Html’in yeni versiyon çalışmaları sürüyor. Şimdiye kadar bazı elementler ve özellikler üzerinde mutabakat sağlanmış durumda. HTML5′in yeni özellikleri hakkında burada kısa bilgi vererek yenilikler hakkında bilgi edineceğiz. Okumaya devam edin »

11 Ağustos 2007 Web’den Seçme Haberler

  • HTML5′in yeni elementleri. Link
  • “CSS Planlama: Sabit, Elastik  ve Akıcı” anlatan İngilizce güzel bir makale. Link
  • CSS ile güzel menü yapımını anlatan geniş çaplı ve güzel İngilizce bir makale. Link
  • CSS tabanlı web siteleri oluşturmanın 6 önemli konusu. Link
  • Regular Expression test etmek için javascript ile hazırlanmış internet üzerinden kullanabileceğimiz bir araç. Link
  • Google ücretsiz depolama işine yeni boyuta taşıdı ve belli bir seviden sonrasını paralı yaptı. Link
  • Arama motorlarına uygun sayfa kodlamnın 10 ipucu. Link
  • Asp.net3.5 yeni özelliklerinden biri asp:ListView ve vs.net 2008 ile birlikte gelen css kontrol paneli hakkında yazılmış İngilizce güzel bir makale. Link

27 Temmuz 2007 Web’den Seçme Haberler

  • Çeşitli 404 Hata sayfaları. Link
  • Web tarayıcısının altına yapışık alt bölümler örnek. Link
  • Html Epostalarda Tablo kullanımı hakkında güzel bir İngilizce makale. Link
  • Google arama motoru için yeni bir etiket çıkarmış. Sayfam bu tarihten itibaren hükümsüzdür lütfen indeksleme anlamına gelen bu meta etiketi lazım olabilir. Link
  • Yahoo Firebug için eklenti yazmış yanlış okumuyoruz Firefox için değil FireBug için. YSlow isimli bu eklenti sayfaları optimize etmemize yardım ediyor. Link
  • Tasarımcılar için yeni bir sosyal imleme sitesi Design Float RSS okuyucunuza ekleyelim.
  • Bende CSS’de Tanımlamalar ve Etkinlikleri(Specificity) diye bir makale yazmıştım ama bu adamlar gerçekten çok güzzel bir çalışma sunmuşlar. “CSS Specificity: Things You Should Know” Link
  • WordPress yöneticileri için 34 güzel eklenti. Link Burdada 50 adet vermişler Link
  • CSS yazanlar muhakkkak böyle bir araca ihtiyacı olmuştur. Yazdığımız css kodlarının bazılarını zamanla kullanılmaz ama yine de css dokümanımız içibde kalır. Şimdi size bahsedeceğim araç bu gereksiz css kodlarını sizlere bildiriyor. “CSS Redundancy Checker”. Link
  • Javascript anlatan güze videolar. Link

09 Temmuz 2007 Web’den Seçme Haberler

  • CSS ile form yapmak hakkında güzel bir makale. Link
  • CSS ile değişik boyutlara uyarlanabilen bir buton örneği. Link
  • Iphone uygulama olarak web2.0 yani web üzerinden uygulama çalıştıracakmış. Peki nasıl uygulama geliştireceğiz? Link
  • Google FeedBurner’ı aldı ilk icraatı Pro paketeni ücretsiz yapmak olmuş. Güzel Link
  • Beğenerek takip ettiğim ceviz.net kapanmış. Sorunlar aşılır ve tekrar açılır inşallah. Link
  • İlham alınacak 60 web sitesi. Link
  • CSS3 üzerinde çalışmalar devam ediyor. Takip etmek isteyenler için. Link

26 Haziran 2007 Web’den Seçme Haberler

  • CSS ile yuvarlak(O şeklinde) menü örneği. Link
  • Profesyonel 80 Ajax uygulaması. Link
  • Rakamlarla Google araçları. Google ilk web sayfalarını indekslemeye başladığında 25.000 web sitesi le başlamış, şimdiki rakam ise milyarları buluyor. Bunun gibi bilgilerin yer aldığı Google’a ait bilgiler için tıklayınız. Link
  • Font kullanım oranlarını gösteren web tasarım ve kodlayıcıları için kullanışlı bir site. Link
  • Javascript ile resimlere yansıma efekti veren script. Link
  • Html5 yeniliklerini kısa kısa anlatan İngilizce bir makale. Link
  • İnternet radyosu Last.fm tabi farklı bir radyo artık Türkçe. Link
  • web2.0 listeleyen sitelerin listesi. Link

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.