2010 4 Maret 2010
Sejak tombol radio dan teks yang inline, sehingga teks akan sejajar sendiri ke bagian bawah tombol radio, Teks akan tampak sedikit di bawah tombol radio.
Jika Anda ingin ini untuk menyelaraskan ke puncak, Anda harus menempatkan radio dan teks ke dalam wadah terpisah seperti divs atau rentang (apabila diperlukan) dan mereka akan mengurus pelurusan. Akan lebih mudah untuk menggunakan sel tabel juga, singkat desain Anda mengijinkannya.
Ini tidak akan terlihat sama di setiap browser, karena setiap browser menampilkan radio sedikit berbeda, sehingga tidak selalu akan menjadi masalah ukuran tidak peduli apa yang Anda lakukan.
no comments | posted in quirks Browser , HTML
2010 8 Januari 2010
HTML5 masih draft. Saat saya menulis, Bekerja pada HTML 5, yang dimulai pada tahun 2004, masih diberi bentuk dengan upaya bersama antara W3C HTML WG dan WHATWG . Kata adalah bahwa gen berikutnya HTML akan memiliki tambahan dan fitur, yang akan baru struktur dan semantik, bentuk kontrol, API, multimedia tag dll.
Dalam bahasa Inggris sederhana ... apa artinya bagi kami pengembang UI ...
- Akan ada penambahan beberapa tag yaitu struktural. <article>, <section>, <header>, <aside>, dan <nav>, yang akan menggantikan sebagian besar <div> s digunakan pada halaman web, membuat halaman Anda sedikit lebih semantik, tetapi yang lebih penting, lebih mudah untuk dibaca.
Hei! Bayangkan saja upaya disimpan dalam menemukan tag yang satu DIV hilang dekat.
misalnya
<body>
<header> ... </ header>
<nav> ... </ nav>
<article>
<section>
...
</ Section>
</ Artikel>
<aside> ... </ samping>
<footer> ... </ footer>
</ Body> Daripada
<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> - Dengan munculnya audio dan konten video seperti YouTube, penggunaan multimedia yang terdapat pada halaman web telah increaded oleh kali lipat. Mengambil ini ke account, Sekarang rencananya adalah untuk menambahkan dukungan asli untuk embedding video dan audio ke dalam browser itu sendiri, maka memungkinkan pengguna untuk memutar, jeda, berhenti, mencari, dan menyesuaikan volume dengan menggunakan builtin DOM API untuk script untuk mengontrol pemutaran.
misalnya
<video poster="poster.jpg">
<Sumber src = "video.3gp" type = "video/3gpp"
media = "handheld">
<source src="video.mp4" type="video/mp4">
</ Video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</ Audio> - Lebih baik didefinisikan peran semantik untuk elemen yang ada untuk misalnya. <strong> dan <em> sekarang mungkin benar-benar memiliki arti yang berbeda yaitu mereka akan berperilaku berbeda.
Ada banyak perubahan lebih / upgrade ke versi lebih baru ... akan terus mengupdate posting ini karena saya datang di seluruh apa pun yang menarik dan bermanfaat .... Lihat saja nanti
Dokumen ini tidak dapat memberikan informasi yang akurat sebagai spesifikasi HTML 5 masih aktif dalam pembangunan. Jika ragu, selalu memeriksa spesifikasi HTML 5 di sini .
1 komentar | tags: HTML5 | diposting di HTML
2009 18 Oktober 2009
- Deklarasi Tipe Dokumen perlu hadir pada awal sebuah dokumen yang menggunakan sintaks HTML. Secara opsional dapat digunakan dalam sintaks XHTML, tapi tidak diperlukan. Dokumen XHTML tidak perlu menyertakan DOCTYPE karena XHTML dokumen yang disampaikan benar menggunakan tipe MIME XML dan diproses sebagai XML oleh browser, selalu diberikan tidak dalam mode quirks.
- Dalam XHTML, nama tag adalah case sensitif dan biasanya didefinisikan yang akan ditulis dalam huruf kecil. Dalam HTML, bagaimanapun, nama tag adalah case insensitive dan dapat ditulis dalam semua kasus huruf besar atau campuran, meskipun konvensi yang paling umum adalah untuk tetap dengan huruf kecil. Kasus tag awal dan akhir tidak harus sama, tetapi menjadi tidak konsisten membuat bersih tampilan kode.
MANFAAT MENGGUNAKAN HTML
- Kompatibel dengan browser yang ada
- Penulis sudah akrab dengan sintaks
- Sintaks toleran dan memaafkan berarti tidak akan ada pengguna bermusuhan " Layar Kuning Kematian "jika kesalahan sengaja tergelincir melalui
- Sintaks singkatan nyaman, penulis misalnya dapat menghilangkan beberapa tag dan nilai atribut
MANFAAT MENGGUNAKAN XHTML
- Ketat sintaks XML mendorong penulis untuk menulis markup well-formed, yang beberapa penulis mungkin menemukan lebih mudah untuk mempertahankan
- Terintegrasi langsung dengan kosakata XML lain, seperti SVG dan MathML
- Memungkinkan penggunaan XML Processing, yang beberapa penulis gunakan sebagai bagian dari penyuntingan mereka dan / atau proses penerbitan
no comments | tags: XHTML | posted in HTML , Web Developer
2009 24 Maret 2009
Ini sekolah yang lama, tapi seperti biasa itu adalah suplemen memori saya ...
Jadi dinonaktifkan = "true" dan dinonaktifkan = "false" sama? Ya
... Jangan percaya, juga! thats cara itu ... di sini adalah beberapa penjelasan singkat ...
"Cacat" adalah atribut dari setiap elemen bentuk / lapangan dan karenanya dapat menerima nilai apapun sifatnya.
Selama atribut ini hadir, unsur ini akan dinonaktifkan terlepas dari nilainya. untuk misalnya.
<input type="text" value="This adalah disabled" disabled>
<input type="text" value="This adalah disabled" disabled="disabled">
<input type="text" value="This adalah disabled" disabled="true">
<input type="text" value="This adalah disabled" disabled="false">
Semua hal di atas akan membuat bidang formulir ini "CACAT".
Cukup tidak memberikan atribut "CACAT" terus Lapangan "sangat dimungkinkan" ... seperti di bawah ini
<input type="text" value="This tidak disabled" />
Ingat "Setiap nilai (atau tidak ada nilai sama sekali) dari atribut cacat, browser akan membuat itu cacat". Untuk menjaga hal-hal yang jelas dalam pikiran kita W3C menganjurkan agar kita menggunakan cacat = "cacat" dalam situasi ini.
Ini adalah perbedaan meskipun ketika kita menggunakan atribut ini di javascript ...
document.form.element.disabled = true; / / elemen akan dinonaktifkan
document.form.element.disabled = false; / / elemen akan diaktifkan
Argumen di atas juga berlaku untuk atribut-atribut dan elemen:
- diperiksa (radio button dan checkbox)
- dipilih (opsi)
- nowrap (td)
1 komentar | tags: Elemen Formulir | posted in HTML , JavasScript
2008 17 Desember 2008
Jika Anda css orang, Anda akan tahu rasa sakit dalam mendapatkan layout Anda bekerja lintas-browser. IE8 adalah satu lagi kunci pas dalam karya-karya untuk pengembang kami. Anywaz! jika Anda memukul atas masalah ini, Seperti yang saya lakukan kemarin, di mana CSS sempurna bekerja di IE7 (dan sebelumnya) dan Firefox tiba-tiba mulai melemparkan amukan di IE8, TRY ini ... Ini baik tampaknya untuk memperbaiki masalah saya untuk saat ini ....
Menggunakan deklarasi Meta, kita dapat menentukan mesin rendering kami ingin IE8 untuk digunakan. Jadi untuk memaksa IE8 untuk membuat sebagai IE7 ... Masukkan Meta Tag berikut ke dalam kepala dokumen Anda: -
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Secara default Meta IE akan: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
yang akan membuat IE8 membuat halaman menggunakan mode standar baru.
Jika diperlukan, sintaks ini dapat digunakan untuk mengakomodasi untuk browser lain sebagai berikut:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
LEBIH Tentang DOCTYPES:
JIKA Anda belum terbiasa dengan jenis hewan yang disebut "DOCTYPE" ... di sini adalah beberapa membaca cepat
Apa DOCTYPES? Apa BROWSER quirks mode & HUKUM?
Mengatur DOCTYPE dalam XSL
Untuk lebih dalam pemahaman mendalam tentang DOCTYPES, coba kunjungi link ini ...
A List Apart: Perbaiki Situs Anda Dengan DOCTYPE Benar!
A List Apart: Beyond DOCTYPE: Standar Web, Teruskan Kompatibilitas, dan IE8
Catatan: Meskipun banyak dari kita HTML / CSS orang telah mengabaikan pentingnya decleration DOCTYPE dalam dokumen kita, Mengatur DOCTYPE yang tepat, biasanya jawaban untuk masalah browser yang paling silang.
1 komentar | tags: DOCTYPE , Masalah IE , IE8 , Meta Tag , Tips & Trik | diposting di quirks Browser , HTML
2008 4 Oktober 2008
Seperti biasa, salah satu dari beberapa banyak masalah aneh dengan IE dan yang satu ini harus peringkat di TOP 10 quirks IE.
MASALAH (Ini adalah masalah saya, mungkin Anda memiliki misbehaviors serupa):
Saya memiliki DIV banyak ada di halaman dengan kelas "sectionhead", yang tidak lain adalah judul sebuah bagian pada halaman. Jadi saya telah melihat beberapa gaya seperti ini
Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}.
Div adalah bar abu-abu terang dengan beberapa teks hitam. Apa yang terjadi di IE adalah beberapa bagian header ditampilkan ok, tapi ada pula yang tak terlihat, SAMPAI, Anda menggulir halaman atau klik sesuatu di halaman dll Terkadang mereka cenderung menghilang ketika Anda klik tombol 'alt' kunci ketika Anda halaman ke bawah atau gulir dengan scroll bar. Mereka kadang-kadang tampaknya muncul kembali ketika Anda memuat ulang (F5) halaman. Saya pendek DIV sempurna sederhana dengan beberapa gaya sederhana berperilaku BAD.
Apa yang bisa menyebabkan seperti perilaku tak menentu? Nah! Terus terang, NO IDEA!
MUNGKIN SOLUSI:
Sekali lagi jangan tanya saya kenapa, tapi dalam banyak masalah ini cenderung menghilang ketika Anda menambahkan posisi: relatif terhadap salah berperilaku gaya elemen, seperti ini
Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}.
Aneh tapi apa yang harus dikatakan? Tuhan memberkati saya dari IE!
DAN DO SAHAM DENGAN KAMI, JIKA ANDA MEMILIKI MASALAH SAMA.
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah | diposting di quirks Browser , CSS , HTML
2008 3 Okt 2008
Bukan berarti hanya ada beberapa lightbox yang dapat Anda temukan ketika Anda google. Masalah dengan sebagian besar lightboxes yang saya temukan adalah bahwa mereka semua tampaknya menggunakan satu atau kerangka JAVASCRIPT berat lainnya berat seperti jQuery, Prototype, MooTools dan sejenisnya. Mereka semua keren dan megah mencari. Tapi Jika kebutuhan Anda adalah "TAPI Aku INGIN SCRIPT lightbox SEDERHANA DAN RINGAN UNTUK SITUS SAYA", maka di sini adalah;
Beberapa fitur bagus lightbox ini
- Sangat ringan
a. 4KB Script ketika dikemas (8 kb membongkar)
b. 2 kb CSS
c. Beberapa baris HTML untuk wadah lightbox - Sederhana untuk memahami dan melaksanakan
- Dapat memiliki beberapa lightboxes pada halaman yang sama.
- Wadah lightbox sama digunakan untuk menunjukkan, isi yang berbeda (yang terpisah dimasukkan sebagai divisi tersembunyi di halaman), tergantung pada link / option yang diklik.
- Secara otomatis pusat sendiri, dengan mempertimbangkan semua faktor-faktor seperti, tinggi Window dan lebar (resolusi layar), jumlah halaman gulir dan tinggi dari isi lightbox itu
- Diuji di IE 7 & FF
Lihat Demo |
Ambil Lightbox Sumber Zip (download 1779 kali)
Menggunakan Lightbox [File dalam file zip] jo.js, jo_pack.js [versi dikemas]: - satu set sederhana JAVASCRIPT OBJECTS [JO], yang berisi elemen, jendela dan skrip dokumen positioning. Anda dapat membuka JO.JS jika Anda ingin mendapatkan tangan Anda kotor dengan beberapa Javascripting Lanjutan, menciptakan fungsi abstrak, memperluas sifat unsur dan semacamnya. Jika Anda tidak terlalu banyak dalam Javascripting, Biarkan saja.
lightbox.js, lightbox_pack.js [versi dikemas]: - Mengandung script kotak manajer cahaya. Jika Anda adalah halaman desainer, juga bertanggung jawab dengan menerapkan lightbox pada halaman, Anda perlu memahami LightBoxManager tersebut. LightBoxManager pada dasarnya berisi showLightBox hanya dua fungsi dan closeLightBox.
lightbox.css: - Jika Anda tahu CSS, Anda dapat memutar sekitar dengan lightbox.css untuk menyesuaikan tampilan-n-merasa lightbox.css
index.html: Contoh pelaksanaan lightbox dengan dua isi yang berbeda
lb_underlay_bkg.png: - Ini adalah cahaya / Simi gambar transparan yang digunakan latar belakang untuk mendasari lightbox [mendasari adalah lapisan bawah lighbox, yang mencegah pengguna dari mengklik entitas lain pada halaman, sementara lightbox terbuka]. Anda dapat menggunakan gambar atau bahkan warna yang solid untuk tujuan ini, tergantung pada desain halaman dan kebutuhan.
icon_lb_close.gif: - Gambar untuk menangani lightbox dekat di kanan atas dari kotak cahaya. Bisa menggunakan gambar apapun sesuai desain
Lihat Demo |
Ambil Lightbox Sumber Zip (download 1779 kali)
Silakan beritahu kami memiliki komentar dan umpan balik ...
no comments | tags: Lightbox , Modal Dialog Box | diposting di CSS , Downloads , HTML , JavasScript , UI Komponen
2008 4 September 2008
Posting ini mungkin menjadi contoh yang baik untuk frase "nenek Pengajaran menyedot telur" ... Karena ini hanya BASIC CSS Stuff. Tetapi bagi mereka, seperti saya menyadari, ini mungkin menjadi berkah tersembunyi. Saya selalu berpikir (saya bisa kehilangan pekerjaan saya karena mengatakan ini), itu HANYA mungkin menyimpan beberapa bagian dari isi halaman HTML statis (artinya, posisinya tetap ADANYA pada Geser Window), menggunakan beberapa script pintar, Melakukan semua ilmiah perhitungan untuk menemukan posisi yang dinamis, menjebak peristiwa Window.scroll dan pengaturan timeout dll
Pernah berpikir itu bisa sederhana seperti ini .... Di sini di CSS / HTML di bawah, saya memiliki empat blok statis, satu tetap ke setiap extrimities halaman, TOP, KANAN, KIRI BAWAH dan ... tentu saja ... Anda dapat memilih salah satu atau lebih jika perlu menjadi ...
CSS
Statis {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; posisi:. Ixed;
}
# Isi {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: 2px solid # e6e6e6;}
# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}
# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6; kanan: 0;}
HTML
id="contents"> <div Anda isi halaman utama </ div>
<div id="wrap-b" class="static">
Static Content di bagian bawah halaman
</ Div>
<div id="wrap-t" class="static">
Static Content di Atas Halaman
</ Div>
<div id="wrap-l" class="static">
Static Content pada Halaman meninggalkan
</ Div>
<div id="wrap-r" class="static">
Static Content di sebelah kanan halaman
</ Div>
Lihat sampel wroking sini
no comments | tags: CSS Positioning | diposting di CSS , HTML
2008 2 September 2008
Banyak kali kita merasa perlu untuk menulis hacks Browser specfic (meskipun bukan praktik yang baik, kita pengembang UI harus resor untuk kejahatan tersebut sampai Perang Browser besar datang untuk gencatan senjata). Sebelumnya, saya telah disebutkan dalam artikel ini Untuk Anda IES Hanya , bagaimana menulis potongan CSS yang akan dapat dilihat oleh browser IE <IE7 saja.
Kemarin, saya punya kasus, di mana saya ingin menulis beberapa FireFox spesifik CSS potongan. Nah! Saya tidak yakin jika ada kode CSS untuk ini, tetapi ada HTML. ADA CATCH A MESKIPUN, ini bagian dari validasi HTML lulus doesnot HTML. Tapi, anywaz! Jika Anda terjebak buruk atau seperti itu, tidak memiliki hal-untuk validasi (terkadang kita harus kejam), Anda bisa menggunakan berikut untuk menyatakan link ke stylesheet FF saja atau bahkan hanya kode CSS dalam blok ini. Kode ini
<comment> Masukan Anda FireFox hanya HTML / CSS / Script di sini </ komentar>
misalnya
<comment>
<style>
/ * Styles hanya untuk FF * /
fieldset {border: 1px # dddddd padat;}
</ Style>
</ Komentar>
I "m senang untuk saat ini ...
no comments | tags: FF Bugs , FF Hacks , FF Isu | diposting di quirks Browser , CSS , HTML , JavasScript
2008 15 Maret 2008
Pada beberapa kesempatan, saat melakukan layout halaman dengan divisi popup / lightboxes / Tips sebagainya kami menemukan situasi dimana objek Formulir beberapa SELECT terjadi menjadi di bawah Divisi POPUP, dengan desain dan itu menunjukkan melalui .... YUK!
Nah! Anda dapat dengan mudah FIX ini dengan menyesuaikan Z-INDEX Anda nilai tepat untuk FF dan IE7. Tapi Good Old (pun intended) IE6 tidak berperilaku sebagaimana dimaksud .... Acara SELECT BOX melalui, bahkan setelah Anda menerapkan beberapa Z-INDEX drastis tinggi nilai-nilai ke Divisi PopUp Anda ... Nyebelin!
Tidak ada perbaikan untuk masalah ini, tetapi ada, saya yakin, lebih dari beberapa cara untuk bekerja-masalah ini, Tapi Im sini untuk memberitahu Anda solusi yang paling sederhana yang saya gunakan, yang bekerja dengan baik bagi saya, di sebagian besar kasus ....
"HIDE THE BOX ROUGE SELECT KETIKA ANDA MENAYANGKAN POPUP"
Cukup dalam potongan skrip Anda di mana Anda menunjukkan popup, tambahkan sepotong script untuk menetapkan visibilitas Kotak SELECT untuk "Tersembunyi"
document.getElementById ('my_select') style.visibilty = "tersembunyi".;
Dan ingat untuk mengatur kembali di TUTUP Divisi PopUp Anda
document.getElementById ('my_select') style.visibilty = "terlihat".;
dimana "my_select" adalah ID dari Kotak iritasi SELECT
Semoga ini bisa membantu ...
PS. Ada pilihan lain seperti ofcourse dinamis positionining sebuah IFRAME (ukuran yang sama seperti Anda PopUp) di bawah DIV Popup ... ini bekerja dengan baik juga, tapi ditambah dengan banyak Elemen DOM, script dan Sakit kepala. Saya telah menggunakan solusi ini juga, dan Jika Anda memerlukan bantuan dengan pilihan ini, jangan beritahu saya. Akan senang untuk membantu!
no comments | tags: Bugs IE , Perbaikan IE , IE Hacks , IE Masalah , IE6 | diposting di quirks Browser , CSS , HTML , JavasScript
