‘html’ etiketi için sonuçlar
Şubat 14th, 2011 • 6 yorum CSS
Etiketler: altı çizili başlıklar, clearfix, html
Resimde görüldüğü gibi başlık yapmak için bir bg resmi hazırlayıp başlığın altına tanımlıyordum. Sonra acaba ben bunu resim kullanmadan yapabilirmiyim diye düşündüm. Float uygulanmış elemanların kapsayamama sorunu diye ismini uzattığım clearfix sorunu aklıma geldi, aslında bu bir sorun değil kabul idi. Tarayıcılar olayı böyle kabul ettiği için içinde float uygulanmış bir eleman olan kapsayıcı eleman içeriğine göre yükseklik almıyor ve sorun oluşturuyor.
Peki, burası ile ne alakası var diyorsanız. Gelelim bura ile olan alakasına; şöyle bir şey geldi aklıma eğer bu başlık elemanına alt çizgisi eklersem ve içine bir eleman koyup float uygularsam başlık eleman içindeki kapsayamayacak ve istediğim çözüme kavuşacağım. Sadede gelelim ve hemen bir örnek yapalım.
HTML kodu;
<h1><span>Ged tortor odio</span></h1>
CSS kodu;
h1{border-bottom:3px solid #9faf41;}
h1 span{float:left; padding:0 10px; background-color:#111; margin-left:10px; margin-top:-15px; display:block; font-size:24px}
Örneği görmek için tıklayınız.
Örnekte dikkat edeceğimiz bir iki husus var. h1 içie koyduğumuz span’ın ardalan rengini zemin ile aynı yaparak yazının altındaki çizgileri yok ediyoruz, ayrıca bu span’a sağdan ve solda padding vererek yazıya tam yapışmasını engelliyoruz.
Metot sadece bir başlığın olduğu ve tek bir stilin olduğu durumlardan daha çok, site içinde birden fazla alt çizgi rengi ve şekli olan sitelerde daha kullanışlı olacağı düşüncesindeyim. Tabi karar size kalmış.
Metodu IE6+, Firefox, Chrome, Opera ve Safari destekliyor. Burada tek dezavantaj ise fazladan span kullanımıdır.
Kalın sağlıcakla
Ekim 25th, 2010 • 12 yorum Haberler
Etiketler: adobe, cs5, CSS, css3, Dreamweaver, editör, firebug, html, html5
Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.
Yeni sürüm ile birlikte gelen yenilikler ;
CSS Inspection
Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.
Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.
En büyük yeniliklerden birisi bu olmuş.
Adobe BrowserLab
Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.
Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.
Her şeye rağmen bir artıdır ama eksik olduğu kesin.
CSS Aktik/Pasif
Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.
FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.
CSS başlangıç sayfaları
Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.
Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.
HTML5 ve CSS3 Desteği
Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.
Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.
PHP Tabanlı CMS Desteği
Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.
Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.
Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.
PHP özel sınıfı kod ipuçları
PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.
Dinamik İlişkili Dosyalar
Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.
SVN(Subversion) Desteği Geliştirilmiş
Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.
Business Catalyst® ile uyum
Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.
Basit Site Kurulumu
Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.
Widget Browser Özelliği
Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik
Özellik hakkında daha fazla bilgi için http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.
İlişkili Dosyaları Filtreleme
Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.
Sonuç
Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.
Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.
Kalın sağlıcakla.
Kaynaklar
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.
Kaynaklar
Ağustos 14th, 2007 • 15 yorum CSS, Web Standartları, XHTML
Etiketler: CSS, html, html5, Web Standartları, XHTML
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 »
Ağustos 11th, 2007 • 1 yorum Haberler
Etiketler: ASP.NET, CSS, Haberler, html, regular-expression
- 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
Temmuz 27th, 2007 • 2 yorum Haberler
Etiketler: Ajax, CSS, Haberler, html, Javascript, web2.0, WordPress
- Ç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
