2010 4 Mart 2010
Radyo düğmesini ve metin satır içi olduğundan, bu yüzden metnin radyo düğmesini altına kendiliğinden düzeliyor olacak, metni biraz radyo düğmesi altında olduğu görünür.
Bu üst hizalamak istiyorsanız, divs veya açıklıklı (uygun) gibi ayrı kaplara radyo ve metin yere sahip olacak ve onlar uyum ilgilenir. Bu tasarım kısa bir izin ile, çok tablo hücreleri kullanmak daha kolay olacaktır.
Her zaman ne olursa olsun boyut sorunlarından olacaksa oluyor böylece her tarayıcı, biraz farklı radyolar görüntüler gibi bu, her tarayıcıda da aynı şekilde bakacağız.
bir yorum | posted Tarayıcı olağandışı , HTML
2010 8 Ocak 2010
HTML5 henüz bir taslak olduğunu. Ben bunları yazarken, 2004 yılında başlayan HTML 5, çalışmaları halen arasında ortak bir çaba ile şekillenmiş olan W3C HTML WG ve WHATWG . Sözcük sonraki gen HTML geliştirme ve özellikleri, sahip olacağı hangi olur yeni bir yapı ve anlam, form denetimleri, API'ler, multimedya etiketleri vb.
Basit İngilizce ... ne bize UI geliştiriciler için anlamına gelir ...
- Bazı yapısal etiketler yani ilavesi var olacaktır. <article>, <section>, daha da önemlisi <header>, <aside> ve sayfalarınızı biraz daha semantik yapma, bir web sayfasında kullanılan <div> s çoğunluğu yerini alacak <nav>, ama, daha kolay okumak için.
Hey! Sadece bu bir eksik yakın DIV etiketi bulma kaydedilen çabayı düşünün.
örneğin
<body>
<header> ... </ başlık>
<nav> ... </ nav>
<article>
<section>
...
</ Section>
</ Article>
<aside> ... </ kenara>
<footer> ... </ footer>
</ Body> Yerine
<body>
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div class="article">
<div class="section">
...
</ Div>
</ Div>
<div id="aside"> ... </ div>
<div id="footer"> ... </ div>
</ Body> - YouTube, web sayfasında gömülü multimedya kullanımı gibi ses ve video içeriğinin gelişiyle kat increaded etti. Dikkate alırsak, Şimdi planı dolayısıyla, kullanıcıların oynatmak için duraklama izin durdurma, arama ve oynatma kontrolü için komut için yerleşik DOM API'leri kullanarak ses seviyesini ayarlamak, tarayıcı kendi içine video ve ses gömmek için doğal destek eklemektir.
örneğin
<video poster="poster.jpg">
<Kaynağı src = "video.3gp" type = "video/3gpp"
Medya = "handheld">
src="video.mp4" type="video/mp4"> <kaynak
</ Video>
<audio>
src="music.oga" type="audio/ogg"> <kaynak
src="music.mp3" type="audio/mpeg"> <kaynak
</ Audio> - Örneğin için mevcut elemanlar için anlamsal rolleri iyi tanımlanmış. <strong> ve <em> şimdi aslında onlar farklı davranır yani farklı anlamlara sahip olabilir.
Yeni sürüm daha birçok değişiklik / yükseltmeleri vardır ... Ben herhangi bir ilginç yararlı olanları yüceltilmesidir gelip bu yazı güncelleniyor tutacak .... Bu alanı izleyin
HTML 5 özellikleri gelişiminde aktif hala bu belge doğru bilgi sağlamayabilir. Eğer şüpheniz varsa, her zaman kontrol edin burada HTML 5 özellikleri .
1 yorum | tags: HTML5 | posted in HTML
2009 18 Ekim 2009
- Belge Türü Bildirimi HTML sözdizimi kullanan bir belge başında hazır bulunması gerekir. Isteğe bağlı olarak söz dizimi XHTML içinde kullanılabilmektedir, fakat zorunlu değildir. Teslim edilir XHTML belgeleri doğru bir XML MIME türünü kullanarak tarayıcıların ve XML olarak işlenir, her zaman hiçbir kültürlerinden modunda işlendiği için XHTML belge DOCTYPE dahil etmek gerekmez.
- XHTML, etiket adları küçük harf duyarlıdır ve genellikle küçük harflerle yazılmalıdır tanımlanır. HTML ise, etiket isimleri harf duyarsız ve en yaygın kongre küçük sopa ile olmasına rağmen, tüm büyük veya küçük harf karışık yazılmış olabilir. Başlangıç ve bitiş etiketlerinin durumda aynı olması gerekmez, ancak tutarlı olmak kod bakmak daha temiz hale gelmez.
HTML KULLANMANIN FAYDALARI
- Mevcut tarayıcılar ile geriye dönük uyumludur
- Yazarlar sözdizimi aşina
- Hoşgörülü ve affedici sözdizimi kullanıcı-düşman "olacak demektir Ölüm Sarı Ekranı bir hata yanlışlıkla aracılığıyla sığar eğer "
- Kullanışlı kestirme sözdizimi, örneğin bazı yazarlar etiketleri ve öznitelik değerleri atlayabilirsiniz
XHTML KULLANMANIN FAYDALARI
- Sıkı XML sözdizimi yazarları bazı yazarlar, bakımı daha kolay bulabilirsiniz, hangi iyi biçimlendirilmiş biçimlendirme yazmak için teşvik
- Böyle SVG ve MathML gibi diğer XML kelime, doğrudan entegre
- Bazı yazarlar düzenleme ve / veya yayın süreçlerinin bir parçası olarak kullanmak XML İşleme kullanımı sağlar
yorum | etiketler: XHTML | posted in HTML , Web Developer
2009 24 Mart 2009
Bu olanlar eski okul, ama her zamanki gibi benim bellek takviyesi ...
Yani = "true" ve devre dışı = "false" Aynı devre dışı bırakılır? Evet
... Ya da, inanmayın! öyle böyle işte ... Burada bazı hızlı açıklama ...
"Devre dışı" form elemanı / alan herhangi bir niteliğidir ve doğası gereği herhangi bir değer kabul edebilir bu nedenle.
Sürece bu özellik mevcut olduğu gibi, elemanın kendi değerine bakılmaksızın devre dışı bırakılacak. örn.
<input type="text" value="This disabled" disabled> olduğunu
<input type="text" value="This disabled" disabled="disabled"> olduğunu
<input type="text" value="This disabled" disabled="true"> olduğunu
<input type="text" value="This disabled" disabled="false"> olduğunu
Yukarıdaki tüm bu form alanı "ÖZÜRLÜ" yapacak.
Basitçe özniteliği vermeme "ÖZÜRLÜ" Alan "Engelsiz" tutar ... aşağıdaki gibi
<input type="text" value="This disabled" değildir />
Hatırla "özürlü özniteliğinin herhangi bir değer (ya da hiç değer), tarayıcı devre dışı hale getirecek". Aklımızda W3C şeyleri açık tutmak için şu durumlarda devre dışı = "özürlü" kullanmanızı önerir.
Biz javascript bu niteliği kullandığınızda bu olsa fark ...
document.form.element.disabled = true; / / eleman devre dışı bırakılır
document.form.element.disabled = false; / / eleman etkin olacak
Yukarıdaki argümanlar bu nitelikleri ve elemanları için de doğrudur:
- kontrol (radyo düğmesi ve onay kutusu)
- Seçilen (opsiyon)
- nowrap (td)
1 yorum | etiket: Form Elemanları | posted HTML , JavasScript
2008 17 Aralık 2008
Eğer css kişi iseniz, çapraz tarayıcı çalışma düzenleri almak ağrı bilemez. IE8 henüz bize geliştiriciler için işleri başka bir anahtar konumundadır. Anywaz! Senin mükemmel çalışıyor IE7 CSS (ve öncesi) ve Firefox aniden IE8 Aksilik başladı dün yaptığım gibi sizi, bu konuda üzerine vurduğunuzda, bu YTL ... Bu güzel an için benim sorunları çözmeye gibiydi ....
Meta beyanı kullanarak, biz IE8 kullanmak istiyorum rendering motoru belirtebilirsiniz. Yani IE8 IE7 gibi render zorlamak için ... belgenizin başı içine aşağıdaki Meta Tag ekleyin: -
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Varsayılan olarak IE Meta olacaktır: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Hangi IE8 yeni standartlar modunu kullanarak sayfa render yapacak.
Gerekirse, bu dizimi aşağıda diğer tarayıcılar için barındırmak için kullanılabilir:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
Doctypes Hakkında DAHA:
Henüz "Doctype" denilen hayvanın sıralama aşina IF ... Burada bazı hızlı okuma olduğunu
Doctypes nelerdir? TARAYICI tuhaflıklar & KESİN Mod nelerdir?
XSL DOCTYPE ayarlanması
Doctypes hakkında derinlemesine bir anlayış daha fazla bilgi için, bu bağlantıları ziyaret etmeyi deneyin ...
A List Apart: Sağ DOCTYPE ile Sitenizi Fix!
A List Apart: DOCTYPE Ötesinde: Web Standartları, İleri Uyumluluk ve IE8
Not: rağmen çoğumuz HTML / CSS insanların doğru DOCTYPE ayarlanması, bizim belgelerde DOCTYPE izleyen zamanlarda önemini ihmal edilmiş, en çapraz tarayıcı konulara cevap genellikle.
1 yorum | etiketler: Doctype , IE Sorunlar , IE8 , Meta Tag , İpuçları | posted Tarayıcı olağandışı , HTML
2008 4 Ekim 2008
Her zamanki gibi, IE ve bu bir IE olağandışı TOP 10 rütbeleri şart olan birçok garip sorunlardan biridir.
SORUN TABLOSU (Bu benzer aksaklıkları var belki, benim sorunum oldu):
Ben birçok DIV sayfasında bir bölümünün başka bir şey başlığı sınıfı "sectionhead" ile sayfa var ki. Bu yüzden bazı tarzı benzeyen var
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}
Div bazı siyah metin ile bir açık gri bar. Ne IE olur bu bölüm başlıkları, bazı ok görüntülenir, ancak 'alt' tuşuna ne zaman sayfa aşağı tıkladığınızda, sayfayı kaydırmak veya sayfanın vb şeyler tıklayınız Bazen bunlar yok eğilimindedir KADAR bazı görünmez veya kaydırma çubuğu ile kaydırın. Onlar bazen (f5) sayfayı yeniden ne zaman tekrar ortaya görünüyor. Bazı basit tarzı ile ben kısa bir mükemmel basit DIV KÖTÜ davranır.
Ne böyle bir hatalı davranış neden olabilir? Eh! Açıkçası, FIKRIM YOK!
OLASI ÇÖZÜM:
Yine bana neden diye sorabilirsiniz, ancak birçok durumda bu sorun pozisyonu eklediğinizde kaybolmak eğilimindedir yok: Bu gibi unsurlar tarzı davrandığını mis göre
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}
Garip ama ne demek? Tanrı IE beni kutsa!
VE BENZER SORUNLARI OLSAYDI, ABD İLE PAYLAŞ DO.
yorum | etiketler: IE Bugs , IE Düzeltmeler , IE Hacks , IE Sorunlar | posted Tarayıcı olağandışı , CSS , HTML
2008 3 Ekim 2008
Sadece birkaç lightbox Kullanıcı zaman google bulabilirsiniz orada değil ki. Ben bulduğum lightbox'lar çoğu ile sorun hepsi bir veya jQuery, Prototype, Mootools ve seviyor gibi diğer ağır JAVASCRIPT çerçeveler kullanmak görünüyordu oldu. Hepsi serin ve şık görünümlü vardır. Gereksinimi olan "AMA BENİM SİTE İÇİN BASİT VE HAFİF lightbox SCRIPT İSTİYORUM" Eğer Ama, o zaman buyrun;
Bu lightbox bazı güzel özellikleri
- Işaret fişeği
Bir. Paketlenmiş Scripts 4kb (8 kb ambalajsız)
b. CSS 2 kb
c. Lightbox konteyner için HTML birkaç satır - Anlamak ve uygulamak kolay
- Aynı sayfada birden çok lightbox'lar olabilir.
- Aynı lightbox konteyner, tıklandığında link / seçeneğe bağlı olarak farklı içerikleri (ayrı sayfa gizli bölümler olarak dahil edildiği), göstermek için kullanılır.
- Otomatik olarak dikkate gibi Pencere yüksekliği ve genişliği (ekran çözünürlüğü), sayfa kaydırma miktarı ve ışıklı içeriğinin yüksekliği gibi tüm faktörleri alarak, kendisini merkezleri
- IE 7 ve FF test edilmiştir
Demo bilgileri |
Indirin Lightbox Kaynak Zip (1810 kez indirildi)
[Zip dosyasında Files] Işıklı kullanma jo.js, jo_pack.js [packed versiyonu]: - JAVASCRIPT OBJECTS basit bir set [JO], eleman, pencere ve belge konumlandırma betikleri içerir. Eğer soyut işlevleri oluştururken bazı Gelişmiş Javascripting, ellerinizi kirli olsun isterseniz elemanı özellikleri ve bu uzanan, JO.JS açabilirsiniz. Javascripting size çok fazla değilse, yalnız bırak.
lightbox.js, lightbox_pack.js [packed versiyonu]: - ışık kutusu yöneticisi komut içerir. Eğer sayfada lightbox uygulanması ile de sorumlu sayfa tasarımcısı iseniz, LightBoxManager anlamak gerekir. LightBoxManager temelde sadece iki işlevi showLightBox ve closeLightBox içerir.
lightbox.css: - CSS biliyorsanız, göz-n-hisset lightbox.css özelleştirmek için lightbox.css oynayabilir
index.html: iki farklı içeriği ile lightbox örnek uygulama
lb_underlay_bkg.png: - [lightbox açıkken, Underlay sayfada başka herhangi bir varlık tıklayarak engeller lighbox aşağıda tabakasıdır] Bu ışıklı altlık için arka plan kullanılır simi / hafif şeffaf bir görüntüdür. Bu sayfa tasarımı ve gereksinimi bağlı olarak, bu amaç için bile herhangi bir resim veya bir renk kullanabilirsiniz.
icon_lb_close.gif: - ışık kutusunun sağ üst köşesinde yakın ışıklı kolu için görüntü. Tasarım başı olarak herhangi bir resmi kullanabilir miyim
Demo bilgileri |
Indirin Lightbox Kaynak Zip (1810 kez indirildi)
Lütfen yorum ve geribildirim atalım ...
yorum | etiketler: Işıklı , Modal iletişim kutusu | posted in CSS , Download , HTML , JavasScript , UI Bileşenleri
2008 4 Eylül 2008
Bu mesaj ibaresi "Öğretim grandma yumurta emmek" için iyi bir örnek olabilir ... bu sadece TEMEL CSS sayfalar Çünkü. Ama bunlar için, habersiz benim gibi, bu maskeli bir nimet olabilir. Ben her zaman (Bunu söylediğim için benim işim salabiliriz), bu STATİK HTML sayfası içeriğinin bir kısmını tutmak için SADECE mümkün olduğunu düşündüm tüm bu bilimsel yapmak, bazı akıllı komut dosyalarını kullanarak, (anlam, konumunu AS Pencere Kaydırma IS kalır) hesaplamaları Window.scroll olayları yakalama ve zaman aşımları vs ayarı, dinamik konumu bulmak için
Bu kadar basit asla düşünmedim .... Burada CSS / HTML aşağıda, ben dört statik blok, her bir sayfa extrimities sabitlenmiş bir tane var, TOP, SAĞ, ALT ve SOL ... gereksiz demek ... olmak gerekirse, herhangi bir veya daha fazla tercih edebilirsiniz ...
CSS
. Statik {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; pozisyonu: ixed;
}
# Içeriği {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}
# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}
# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; border: # e6e6e6 katı 2px;}
# Wrap-b {alt: 0px; background: # 3333CC; width: 100%; height: 55px;}
# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: # e6e6e6 katı 2px; sağ: 0;}
HTML
<div id="contents"> Sen ana sayfa içeriğini </ div>
<div id="wrap-b" class="static">
Sayfa alt Sabit İçerik
</ Div>
<div id="wrap-t" class="static">
Sayfa Üstte Sabit İçerik
</ Div>
<div id="wrap-l" class="static">
Sayfa Statik İçerik bıraktı
</ Div>
<div id="wrap-r" class="static">
Sayfa sağ Sabit İçerik
</ Div>
Burada bir örnek görmek wroking
yorum | etiketler: CSS Konumlandırma | posted in CSS , HTML
2008 2 Eylül 2008
Birçok biz tarayıcı specfic kesmek yazma ihtiyacını hissediyorum bir kez (bu iyi bir uygulama olmasa da, biz UI geliştiriciler büyük Tarayıcılar Savaşları kadar bu kötülükleri başvurmak zorunda ateşkes gelir). Daha önce, ben bu yazıda sözü vardı Yalnızca partilerin kadınlar için nasıl sadece <IE7 IE tarayıcıları için görünür olacak bir CSS pasajı yazmak için.
Dün, ben bazı FireFox belirli CSS parçacıkları yazmak istedim bir durum vardı. Eh! Ben bir CSS kodu bunun için varsa emin değilim ama bir HTML var. Bir CATCH HER VAR, HTML etmediğinden geçiş HTML doğrulama bu parça. Ama, anywaz! Eğer kötü ya da gibi takılıp, doğrulama için-ilgili (bazen biz zalim olmak zorunda) varsa, bir FF sadece stil için bir link bildirmek için aşağıdaki kullanabilirsiniz hatta sadece bu blok içinde CSS kodu yazabilirsiniz. Kodu
<comment> buraya sadece FireFox HTML / CSS / Scripts </ Yorum> koyun
örneğin
<comment>
<style>
Yalnızca Firefox için * / / * Stilleri
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Yorum>
Ben "Şu an için mutluyum ...
yorum | etiketler: FF Bugs , FF Hacks , FF Sorunlar | posted Tarayıcı olağandışı , CSS , HTML , JavasScript
2008 15 Mart 2008
Çeşitli vesilelerle anda, açılan bölümler / lightbox'lar / İpuçları sayfa düzenleri yaparken bazı Formu SEÇİN nesneler tasarım, bu POPUP Bölümleri altında olmak olur ve bunu üzerinden gösterir durumlara rastlamak vb .... YUK!
Eh! kolayca FF ve IE7 için uygun şekilde Z-INDEX değerlerini ayarlayarak bu FIX olabilir. Ama Good Old (cinas amaçlanan) IE6 amaçlandığı gibi davranırlar değildir .... Size PopUp Bölümü ... Kötü haber!! Bazı önemli ölçüde yüksek Z-INDEX değerleri uygulandıktan sonra bile üzerinden Select BOX gösterisi!
Bu sorun için NO HOTFİXLERİN vardır, ama vardır, inanıyorum ki, sen çoğunda benim için çalışıyor kullandığım basit çözüm, anlatmak için ben burada birkaç Bu soruna-yol, ama daha durumlarda ....
"SİZ POPUP GÖSTER ZAMAN ROUGE SEÇİN KUTUSU HIDE"
Basitçe komut pasajı içinde size açılır gösterin, "Gizli" için SELECT Kutusu görünürlüğünü ayarlamak için komut bir parça eklemek
document.getElementById ('my_select') style.visibilty = "gizli".;
Ve PopUp Bölümü KAPAT üzerine geriye unutmayın
. document.getElementById ('my_select') style.visibilty = "görünür";
burada "my_select" tahriş Select Box kimliğidir
Bu yardımcı olur umarım ...
PS. Dinamik Popup DIV altında bir IFRAME (siz PopUp olarak aynı boyutta) positionining gibi tabii diğer seçenek vardır ... Bu çok iyi çalışır, ancak DOM Elemanları, SCRIPTLER ve Baş Ağrısı yükleri bir ilavesi ile. Ben de bu çözüm kullanmış ve yaparsanız bu seçeneği ile yardım herhangi bir ihtiyacınız, bana bildirin. Yardımcı olmaktan memnun olacaktır!
yorum | etiketler: IE Bugs , IE Düzeltmeler , IE Hacks , IE Sorunlar , IE6 | posted Tarayıcı olağandışı , CSS , HTML , JavasScript
