2010 Mar 4 2010
Dahil ang radio button at ang teksto ay inline, kaya ang teksto ay ihanay mismo sa ilalim ng pindutan ng radyo, Ang ang teksto ay lilitaw upang maging bahagyang sa ilalim ng radio button.
Kung gusto mo ito upang ihanay sa tuktok, makikita mo ilagay ang radio at ang teksto sa magkahiwalay na lalagyan tulad ng mga divs o sumasaklaw (bilang naaangkop) at sila ay mag-ingat ng pagkakahanay. Magiging mas madali gumamit ng mga cell sa talahanayan masyadong, ng iyong disenyo maikling Pinapahintulutan ito.
Hindi na ito ay tumingin sa parehong sa bawat browser, pati na ang bawat browser ay nagpapakita radios bahagyang naiiba, kaya doon ay palaging pagpunta sa isyu ng laki kahit na kung ano ang gagawin mo.
walang mga komentaryo |-post sa Quirks Browser , HTML
2010 Jan 8 2010
Ang HTML5 ay pa rin ng draft. Ang bilang isulat ko, Work sa HTML 5, na nagsimula noong 2004, pa rin ang ibinigay na hugis sa pamamagitan ng isang pinagsamang pagsisikap sa pagitan ng W3C HTML WG at ang WHATWG . Ang salita ay na ang mga susunod na gen HTML ay mayroon ng mga pagpapahusay at mga tampok, na kung saan gagawin ang bagong istraktura at semantika, form kontrol, API, multimedia tag atbp.
Sa simpleng Ingles ... kung ano ang ibig sabihin sa amin developer UI ...
- May ay karagdagan ng ilang mga istruktura viz tag. <article>, <section>, <header>, <aside>, at <nav>, kung saan ay palitan ang karamihan ng <div> mga ginagamit sa isang web page, paggawa ng iyong mga pahina sa isang bit mas semantiko, ngunit mas mahalaga, mas madali upang basahin.
Uy! Lamang isipin ang pagsisikap na-save sa paghahanap na ang isa nawawala malapit div tag.
hal
<body>
<header> ... </ header>
<nav> ... </ nav>
<article>
<section>
...
</ Section>
</ Article>
<aside> ... </ bukod>
<footer> ... </ footer>
</ Body> Sa halip ng
<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> - Sa pagdating ng audio at video na nilalaman tulad ng YouTube, ang paggamit ng mga naka-embed na multimedia sa webpage ay increaded sa pamamagitan ng fold. Tumatagal ito sa account, Ngayon ang plano ay upang magdagdag ng mga katutubong suporta para sa-embed ng video at audio sa browser mismo, kaya payagan ang mga gumagamit upang i-play, pause, itigil, humanap, at ayusin ang lakas ng tunog gamit ang builtin DOM API para sa mga script upang kontrolin ang playback.
hal
<video poster="poster.jpg">
<Pinagmulan src = sa "video.3gp" type = "video/3gpp"
media = "handheld" na>
<source src="video.mp4" type="video/mp4">
</ Video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</ Audio> - Mas mahusay na tinukoy mga semantiko tungkulin para sa mga umiiral na mga elemento para sa eg. ang <strong> at <em> ay maaaring ngayon talagang magkaroon ng iba't ibang kahulugan yan sila kumilos naiiba.
May mga mas maraming mga pagbabago / upgrade sa mas bagong bersyon ... Ang patuloy na-update ang post na ito bilang dumating ko accross anumang mga kagiliw-giliw na mga kapaki-pakinabang .... Manood ng ito puwang
Ang dokumentong ito ay hindi maaaring magbigay ng tumpak na impormasyon bilang HTML 5 pagtutukoy ay aktibo pa rin sa pag-unlad. Kapag may pagdududa, laging suriin ang HTML 5 detalye dito .
1 puna | tags: HTML5 |-post sa HTML
2009 Okt 18 2009
- Ang Pahayag Uri ng Dokumento kailangang dumalo sa simula ng isang dokumento na gumagamit ng HTML syntax. Maaaring opsyonal na ito ay ginagamit sa loob ng syntax XHTML, ngunit ito ay hindi kinakailangan. Ang XHTML dokumento ay hindi na kailangang isama ang DOCTYPE dahil XHTML dokumento na ay inihatid tama ang paggamit ng isang XML ng uri ng MIME at naproseso bilang XML sa pamamagitan ng browser, ay palaging ibinigay sa walang quirks mode.
- Sa XHTML, mga pangalan ng tag ay case sensitive at ay karaniwang tinukoy na nakasulat sa maliit na. Sa HTML, gayunpaman, mga pangalan ng tag ay case insensitive at maaaring nakasulat sa lahat ng malalaki o halo-halong kaso, kahit na ang pinaka-karaniwang kapulungan ay sa patpat na may maliit na. Ang kaso ng mga tag na simula at wakas ay hindi ang parehong, ngunit ang pagiging pare-pareho ay gumawa ng mas malinis ang code ng hitsura.
Mga benepisyo ng Paggamit ng HTML
- Paurong tugmang na may umiiral na mga browser
- Mga may-akda ay na pamilyar sa ang syntax
- Ang maawain at mapagpatawad syntax ibig sabihin nito ay hindi gumagamit pagalit na " Yellow Screen ng Kamatayan "kung ang isang pagkakamali ay hindi sinasadyang slips sa pamamagitan ng
- Maginhawa takigrapya syntax, hal may-akda ay maaaring ligtaan ilang mga tag at mga halaga ng katangian
Mga benepisyo ng Paggamit ng XHTML
- Mahigpit XML syntax ay naghihikayat sa mga may-akda upang isulat ang nabuo nang maayos markup, kung saan ang ilang mga may-akda ay maaaring makahanap ng mas madali upang mapanatili
- Integrates direkta sa iba pang mga XML vocabularies, tulad ng SVG at MathML
- Pinapayagan ang paggamit ng XML Processing, na ang ilang mga may-akda gamitin bilang bahagi ng kanilang pag-edit at / o mga proseso sa pag-publish
walang mga komentaryo | tags: XHTML |-post sa HTML , Web Developer
2009 Mar 24 2009
Ito mga lumang paaralan, ngunit gaya ng dati na ito ang aking memory karagdagan ...
Kaya ay pinigilan = "true" at pinagana = "huwad" na parehong? Oo
... Huwag naniniwala, na rin! thats ang paraan na ito ay ... dito ay ang ilang mabilis na paliwanag ...
"Pinagana" ay isang katangian ng anumang form ng elemento / patlang at samakatuwid ay maaaring tumanggap ng anumang halaga sa pamamagitan ng kanyang likas na katangian.
Hangga't bilang katangian na ito ay kasalukuyan, sangkap ay hindi pinagana alintana ang halaga nito. para sa halimbawa.
<input type="text" value="This disabled" disabled>
<input type="text" value="This disabled" disabled="disabled">
<input type="text" value="This disabled" disabled="true">
<input type="text" value="This disabled" disabled="false">
Lahat ng sa itaas ay ang form na ito patlang na "Disabled".
Hindi lang ang pagbibigay ng attribute "Disabled" mapigil ang Patlang ng "ABLED" ... tulad ng sa ibaba
<input type="text" value="This ay hindi disabled" />
Tandaan "Anumang halaga (o walang halaga sa lahat) ng kapansanan attribute, ang browser ay render ito pinagana". Upang panatilihin ang mga bagay na malinaw sa aming mga isipan W3C pinapayo na gamitin namin pinagana = "kapansanan" sa sitwasyong ito.
Ito ang pagkakaiba kahit na kapag ginagamit namin ito attribute sa javascript ...
document.form.element.disabled = true; / / ang mga elemento ay hindi pinagana
document.form.element.disabled = false; / / ang mga elemento ay pinagana
Sa itaas na mga argumento ay din tunay na para sa mga katangian at mga elemento:
- check (radio button at checkbox)
- napili (opsyon)
- nowrap (td)
1 komento | tags: Form Sangkap | na-post sa HTML , JavasScript
2008 Dis 17 2008
Kung ikaw ay ang css tao, alam mo ang sakit sa pagkuha ng iyong mga layout gumagana ang cross-browser. IE8 ay isa pang spanner sa gumagana para sa amin mga developer. Anywaz! kung pinindot ninyo sa isyung ito, Tulad ko kahapon, kung saan ang iyong ganap na gumagana ang CSS sa IE7 (at mas maaga) at Firefox ay biglang nagsimula pagkahagis ang mga tantrums sa IE8, subukan ito ... mabuti Ito tila upang ayusin ang aking mga problema para sa mga sandali ....
Paggamit ng Meta pahayag, maaari naming tukuyin ang rendering engine gusto naming IE8 gamitin. Kaya pilitin IE8 sa render ng IE7 ... Ipasok ang sumusunod na meta tag sa head ng iyong dokumento: -
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Sa pamamagitan ng default IE Meta ay: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
na kung saan ay gumawa ng mga IE8 render ang pahina gamit ang bagong mga pamantayan ng mode.
Kung kinakailangan, ang syntax na ito ay maaaring gamitin upang accomodate para sa iba pang mga browser tulad ng sa ibaba:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
KARAGDAGANG sa Tungkol DOCTYPES:
KUNG ikaw ay pa pamilyar sa ng uri ng hayop na tinatawag na "Doctype" ... dito ay ang ilang mabilis na basahin
Ano ang DOCTYPES? Ano ang mga mga browser QUIRKS & MAHIGPIT Mode?
Pagtatakda ng DOCTYPE sa XSL
Para sa isang mas malalalim na-unawa tungkol sa DOCTYPES, subukan ang pagbisita sa mga link na ito ...
Listahan Bukod: Ayusin ang Iyong Site Gamit ang right DOCTYPE!
A List na Bukod: Higit pa na DOCTYPE: Web Standards, Ipasa Kakayahan, at IE8
Tandaan: Kahit na marami sa atin HTML / CSS tao ay neglecting ang kahalagahan ng DOCTYPE decleration sa aming mga dokumento, Pagtatakda ng tamang DOCTYPE, ay karaniwang ang sagot sa pinaka krus isyu browser.
1 komento | tag: Doctype , IE Isyu , IE8 , Meta Tags , Tips & Tricks |-post sa mga Browser Quirks , HTML
2008 Okt 4 2008
Gaya ng dati, isa sa sa maraming mga ilang kakaibang mga problema sa IE at ito ay dapat na ranks sa TOP 10 ng IE Quirks.
Ang PROBLEMA pahayag (ito ay ang aking problema, maaaring mayroon kang katulad misbehaviors):
Mayroon akong maraming div sa pahina sa klase sa "sectionhead", kung saan ay walang anuman kundi pamagat ng isang seksyon sa pahina. Kaya ko na ang estilo ng ilang mga naghahanap na tulad nito
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}
Ang div ay isang liwanag na kulay-abo ng bar na may ilang mga itim na teksto. Ano ang mangyayari sa IE ay ang ilan sa mga header ng seksyon na ito ay ipinapakita ok, ngunit ang ilang mga invisible, HANGGANG, mag-scroll mo ang pahina o i-click ang isang bagay sa ang pahina atbp minsan malamang sila upang mawala kapag nag-click ang 'alt' key kapag pahina ng pababa o mag-scroll sa scroll bar. Mukhang sila minsan sa lumitaw na muli kapag ikaw ay i-reload (F5) ang pahina. Akong maikling lubos simpleng div na may ilang simpleng estilo behaves masama.
Ano ang maaaring maging sanhi ng tulad ng isang mali-mali pag-uugali? Na rin! Lantaran, WALANG IDEA!!!
Posibleng solusyon:
Muli ko hindi na akong tatanungin kung bakit, ngunit sa maraming pagkakataon ang problemang ito ay may upang maglaho kapag nagdagdag ka ng position: may kaugnayan sa mis behaving elemento estilo, tulad nito
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; posisyon: kamag-anak}
Kakaiba ngunit kung ano ang sinasabi? Diyos pagpalain ako mula sa IE!
AT MERON Ibahagi sa US, kung mayroon kang katulad na problema.
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu |-post sa mga Browser Quirks , CSS , HTML
2008 Okt 3 2008
Hindi na may mga lamang ng ilang LIGHTBOX na maaari mong mahanap kapag ikaw google. Ang isyu sa karamihan ng mga lightboxes na ko natagpuan ay na sila lahat tila gamitin ang isa o ang iba pang mabigat na timbang JavaScript frameworks tulad JQUERY, prototipo, MOOTOOLS at ang gusto. Sila ay ang lahat ng mga cool at marangya naghahanap. Ngunit Kung ang iyong mga kinakailangan ay "NGUNIT ko GUSTO Isang simple at magaan na script LIGHTBOX para sa aking site", pagkatapos ito ay dito;
Ilang gandang mga tampok na ito lightbox
- Napaka liwanag
isang. Mga 4kb ng Script kapag nakaimpake (8 KB unpacked)
b. 2 KB ng CSS
c. Ilang mga linya ng HTML para sa lightbox ang lalagyan - Simpleng upang maunawaan at ipatupad
- Maaaring magkaroon ng mga maramihang mga Lightboxes sa parehong pahina.
- Ang parehong lalagyan ng lightbox ay ginagamit upang ipakita, iba't ibang mga nilalaman (na kung saan ay hiwalay kasama bilang mga nakatagong mga dibisyon sa pahina), depende sa ang link / opsyon na nag-click.
- Awtomatikong sentro mismo, isinasaalang-alang ang lahat ng mga kadahilanan tulad ng, ang na Window taas at lapad (resolution ng screen), ang pahina scroll halaga at ang taas ng mga nilalaman ng lightbox
- Nasubok sa IE 7 & FF
Tingnan ang Demo |
I-download ang Lightbox Source Zip (Nai-download na 1797 ulit)
Paggamit ng Lightbox [File sa ang zip file] jo.js, jo_pack.js [nakaimpake na bersyon]: - isang simpleng hanay ng JavaScript bagay [Jo], na naglalaman ng mga elemento, window at mga script ng dokumento pagpoposisyon. Maaari mong buksan ang mga JO.JS kung nais mo upang makakuha ng iyong mga kamay marumi sa ilang Advanced Javascripting, paglikha ng mga abstract function, pagpapalawak ng mga katangian ng elemento at tulad. Kung hindi ka masyadong maraming sa Javascripting, iwan ito nag-iisa.
lightbox.js, lightbox_pack.js [nakaimpake bersyon]: - naglalaman ng light box manager script. Kung ikaw ay taga-disenyo ng pahina, din na responsable sa pagpapatupad ng lightbox sa pahina, kailangan mong maunawaan ang LightBoxManager. Ang talaga naglalaman ng LightBoxManager lamang dalawang mga function showLightBox at closeLightBox.
lightbox.css: - Kung alam mo CSS, maaari mong i-play sa paligid sa lightbox.css upang ipasadya ang hitsura-n-pakiramdam lightbox.css
index.html: Halimbawang pagpapatupad ng lightbox sa dalawang magkaibang mga nilalaman
lb_underlay_bkg.png: - Ito ay liwanag / simi malinaw na imahe na ginamit sa background para sa lightbox salig [sapnan ay ang layer sa ibaba ang lighbox, na pinipigilan ang mga gumagamit mula sa pag-click sa anumang iba pang mga nilalang sa pahina, habang lightbox ay bukas]. Maaari mong gamitin ang anumang mga imahe o kahit plain ang kulay para sa layunin na ito, depende sa ang disenyo ng pahina at ang kinakailangan.
icon_lb_close.gif: - Ang mga imahe para sa malapit na hawakan ng lightbox sa kanang tuktok ng ilaw na kahon. Maaaring gumamit ng anumang mga imahe bilang bawat disenyo
Tingnan ang Demo |
I-download ang Lightbox Source Zip (Nai-download na 1797 ulit)
Mangyaring ipaalam sa amin ang iyong mga komento at puna ...
walang mga komentaryo | tags: Lightbox , modal Dialog Box |-post sa CSS , Downloads , HTML , JavasScript , UI Bahagi
2008 Sep 4 2008
Ang post na ito ay maaaring maging isang magandang halimbawa para sa ang pariralang "Lola ng Pagtuturo sa pagsuso ang mga itlog" ... maging sanhi ito ay lamang Basic CSS Bagay-bagay. Ngunit para sa mga, tulad ng pampalimot sa akin, ito ay maaaring maging isang basbas sa magkaila. Naisip ko palagi (maaaring ko maluwag ang aking trabaho para sa sinasabi na ito), ito ay LAMANG posible na panatilihin ang ilang mga bahagi ng ang HTML na nilalaman ng pahina na static (ibig sabihin, ang posisyon nito ay nananatiling AS IS sa Window Mag-scroll), gamit ang ilang mga matalinong script, paggawa ng lahat ng mga pang-agham kalkulasyon upang mahanap ang mga dynamic na posisyon, tigil mga kaganapan Window.scroll at pagtatakda ng timeout atbp.
Huwag kailanman inisip maaaring ito bilang simpleng bilang na ito .... Dito sa CSS / HTML sa ibaba, mayroon akong apat na mga static na mga bloke, isa naayos sa bawat extrimities ng pahina, TOP, KARAPATAN, ibaba at kaliwa ... hindi na kailangan upang sabihin ... maaari kang pumili ng anumang isa o higit pa kung kailangan maging ...
CSS
-. Static {display: block; z-index: 10; kulay: # ffffff; overflow-x: nakatagong; overflow-y: nakatagong; position: ixed;
}
# Nilalaman {margin: 100px 150px 0px 160px; border: 1px solid # e6e6e6}
# Wrap-t {tuktok: 0px; background: # 33CC66; width: 100%; taas: 55px;}
# Wrap-l ng {tuktok: 80px; background: # FF9966; taas: 300px; width: 150px; hangganan: 2px matatag # e6e6e6;}
# Wrap-b {ibaba: 0px; background: # 3333CC; width: 100%; taas: 55px;}
# Wrap-r {tuktok: 80px; background: # 6666FF; taas: 300px; width: 140px; hangganan: 2px matatag # e6e6e6; kanan: 0;}
HTML
<div id="contents"> ka pangunahing pahina ng nilalaman </ div>
<div id="wrap-b" class="static">
Static Nilalaman sa Pahina ibaba
</ Div>
<div id="wrap-t" class="static">
Static Nilalaman sa Pahina Top
</ Div>
<div id="wrap-l" class="static">
Static Nilalaman sa Pahina pakaliwa
</ Div>
<div id="wrap-r" class="static">
Static Nilalaman sa Pahina karapatan
</ Div>
Tingnan ang isang sample ng wroking dito
walang mga komentaryo | tags: CSS Positioning |-post sa CSS , HTML
2008 Sep 2 2008
Maraming mga isang beses na pakiramdam namin ang pangangailangan upang isulat ang browser specfic hacks (bagaman ito ay hindi isang mahusay na kasanayan, namin UI developer ay may resort sa mga tulad na mga evils hanggang ang dakilang Wars Browser pagdating sa isang pansamantalang kapayapaan). Mas maaga, ako ay nabanggit sa artikulong ito Para sa iyong ngian lamang , kung paano sumulat ng isang snippet ng CSS na makikita sa IE browser <IE7 lamang.
Kahapon, ako ay may isang kaso, kung saan nais kong isulat ang ilang FireFox tiyak na CSS snippet. Na rin! Hindi ako siguraduhin kung may isang CSS code para sa ngunit doon ay isang HTML. MAY catch A Kahit na, ito piraso ng ng HTML doesnot pagpapatunay pass HTML. Subalit, anywaz! Kung ikaw ay stuck masama o bilang tulad, walang patungkol para sa pagpapatunay (minsan mayroon kaming maging malupit), maaari mong gamitin ang sumusunod na idedeklara ng isang link sa isang FF lamang stylesheet o kahit na lamang ang code ng CSS sa loob ng block na ito. Ang code ay
<comment> Ilagay ang iyong FireFox lamang HTML / CSS / Script dito </ komento>
hal
<comment>
<style>
/ * Estilo para sa FF lamang * /
fieldset {border: 1px solid # dddddd;}
</ Estilo>
</ Komento>
Ko "m masaya para sa mga sandali ...
walang mga komentaryo | tags: FF bug , FF Hacks FF Isyu |-post sa mga Browser Quirks , CSS , HTML , JavasScript
2008 Mar 15 2008
Sa ilang mga okasyon, habang ginagawa ng mga layout ng pahina na may mga popup dibisyon / lightboxes na / Tips atbp namin dumating sa sitwasyon kung saan ang ilang Form na piliin ang mga bagay ang mangyayari sa ilalim ng mga popup dibisyon, sa pamamagitan ng disenyo at nagpapakita ito sa pamamagitan ng .... YUK!!!
Na rin! maaaring madali mong ayusin ito sa pamamagitan ng pag-aayos ng iyong mga Z-INDEX halaga naaangkop para sa FF at IE7. Ngunit Magandang Lumang (magbigay ng isang patudyong salita inilaan) IE6 ay hindi kumilos bilang nilayon .... Ang Piliin ang Ipakita ang kahon sa pamamagitan ng, kahit na matapos mag-apply ka ng ilang husto mataas na Z-INDEX na halaga sa iyong popup Division ... Nakakainis!!!!
May mga WALANG mga pag-aayos para sa problemang ito, ngunit may mga, tingin ko, higit pa kaysa sa ilang mga paraan upang gumana sa paligid ang problemang ito, Ngunit Im dito upang sabihin sa iyo ang pinakasimpleng solusyon na gamitin ko, na gumagana multa para sa akin, sa karamihan ng kaso ....
"Itago ang kahon ng Rouge piliin kung kailan IPAKITA MO ang popup"
Lamang sa iyong snippet ng script kung saan ipakita mo ang iyong popup, magdagdag ng isang piraso ng script upang itakda ang visibility ng Piliin ang Box sa "Mga Nakatagong"
document.getElementById ('my_select') style.visibilty = "nakatagong".;
At tandaan upang itakda ang mga ito pabalik sa Isara ng iyong popup Division
. document.getElementById ('my_select') style.visibilty = "nakikita";
kung saan sa "my_select" ay ang ID ng pangangati Piliin ang Box
Sana ito ay makakatulong ...
PS. May ofcourse iba pang mga pagpipilian tulad ng dynamic positionining isang iframe (parehong laki bilang ka popup) sa ilalim ng Popup div ... na ito ay mahusay na gumagana masyadong, ngunit may isang karagdagan ng mga naglo-load ng mga Sangkap ng DOM, mga script at sakit ng ulo. Ginamit ko na ang solusyon na ito masyadong, at Kung kailangan mo ng anumang tulong sa mga pagpipiliang ito, huwag ipagbigay alam sa akin. Ay natutuwa upang makatulong!
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu , IE6 |-post sa mga Browser Quirks , CSS , HTML , JavasScript
