2010 Mar 4, 2010

Butoni radio përafrimin me tekst

Që butonin radio dhe teksti janë inline, kështu që teksti do të radhitet në fund butonin e radios, teksti do të shfaqet të jetë pak nën butonin e radios.
Nëse ju doni këto të lidhur në krye, ju do të keni për të vendosur radion dhe teksti në kontejnerë të veçanta si divs apo përfshin (sipas rastit) dhe ata do të kujdeset për të shtrirjes. Ajo do të jetë më e lehtë për t'u përdorur qelizat tavolinë shumë, e shkurtër tuaj dizajn lejon atë.

Kjo nuk do të duken njëjtë në çdo shfletues, si çdo browser-i tregon radiot pak ndryshe, kështu që nuk është gjithmonë do të jetë madhësia çështje pa marrë parasysh atë që bëni ju.


2010 Jan 8, 2010

Çfarë do të sjellë HTML5?

HTML5 është ende një draft. Si unë shkruaj, Puna në HTML 5, i cili filloi në vitin 2004, është ende duke u dhënë formë me një përpjekje të përbashkët në mes të GP HTML W3C dhe WHATWG . Fjala është se ardhshme gen HTML do të ketë zgjerime dhe karakteristika, të cilat do të strukturës së re dhe semantikë, kontrollet Forma, TV, multimedia tags etj.

Në anglisht thjeshtë ... çfarë do të thotë të na zhvilluesit UI ...

  • Nuk do të shtimi i disa dmth strukturore tags. <article>, <section>, <header>, <aside>, dhe <nav>, e cila do të zëvendësojë shumicën e <div> s përdorur në një faqe të internetit, duke e bërë faqet tuaja pak më semantik, por më e rëndësishmja, më të lehtë për të lexuar.
    Hey! Vetëm paramendoni përpjekjet e ruajtur në gjetjen se një etiketë mungon ngushtë DIV.
    p.sh.
  <body>
   <header> ... </ header>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Seksioni>
   </ Artikull>
   <aside> ... </ mënjanë>
   <footer> ... </ footer>
 </ Body> 

Në vend të

  <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> 
  • Me ardhjen e audio dhe video përmbajtje si YouTube, përdorimi i multimedias ngulitur në faqen ka increaded me dele. Duke pasur parasysh këtë, Tani plani është për të shtuar mbështetjen amtare për embedding video dhe audio në shfletuesin vetë, prandaj mundësia përdoruesve për të luajtur, pauzë, stop, të kërkojnë, dhe të rregulluar volumin, duke përdorur DOM builtin TV për Scripts për të kontrolluar rishikim.

p.sh.

  <video poster="poster.jpg">
     <Burim src = "video.3gp" type = "video/3gpp"
     media = "dore">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio> 
  • Mirë-përcaktuar rolet semantik për elementet ekzistuese për psh. <strong> dhe <em> tani mund të vërtetë kanë kuptime të ndryshme pra ata do të sillen ndryshe.

Ka ndryshime shumë më shumë / përmirësimet në version më të ri ... Do mbani përditësimin këtë post si kam ardhur te gërshetimet ndonjë ato interesante të dobishme .... Shikojnë këtë hapësirë

Ky dokument nuk mund të japë informacion të saktë si HTML 5 specifikimet është ende aktive në zhvillim. Kur në dyshim, gjithmonë kontrolloni HTML specifikimet 5 here .


2009 18 Tet 2009

HTML dhe XHTML

  • Lloji i Dokumentit Deklarata duhet të jetë i pranishëm në fillim të një dokumenti që përdor sintaksën HTML. Ajo mund opsionale të përdoret në kuadër të sintaksës XHTML, por kjo nuk është e nevojshme. Dokumenti XHTML nuk ka nevojë që të përfshijë DOCTYPE sepse dokumentet XHTML që janë dorëzuar si duhet përdorur një lloj MIME XML dhe janë përpunuar si XML nga shfletuesit janë dhënë gjithmonë në asnjë mënyrë keto lojra fjalesh.
  • Në XHTML, emrat tag janë raste të ndjeshme dhe të përcaktohen zakonisht të jetë e shkruar në Fjala. Në HTML, megjithatë, emrat tag rast janë të pandjeshëm dhe mund të shkruhet në të gjitha rastet uppercase ose të përziera, edhe pse Konventa më e zakonshme është që të rrinë me Fjala. Rasti i etiketave fillim dhe në fund nuk duhet të jetë e njëjtë, por duke qenë në përputhje bën të pastër sy kodit.

Përfitimet e përdorimit HTML

  • Prapa në përputhje me shfletues ekzistuese
  • Autorët janë tashmë të familjarizuar me sintaksën
  • Sintaksa i butë dhe falës do të thotë që nuk do të ketë user-armiqësor " Screen Yellow e vdekjes "në qoftë se një gabim rastësisht rrëshqet përmes
  • Sintaksa përshtatshëm stenografi, autorët p.sh. mund të heq disa etiketa dhe vlerat atribut

Përfitimet e përdorimit XHTML

  • Rreptë Sintaksa XML inkurajon autorët të shkruaj shënime të mirë-formuar, që disa autorë mund të gjeni më të lehtë për të ruajtur
  • Integron drejtpërsëdrejti me Fjalorit të tjera, të tilla si XML SVG dhe MathML
  • Lejon përdorimin e XML Përpunimin, që disa autorë të përdorur si pjesë e redaktimi tyre dhe / ose proceseve botuese

2009 24 Mar 2009

Është i aktivizuar = "e vërtetë" dhe me aftësi të kufizuara = "false", të njëjtën gjë?

Kjo shkollë ato vjetër, por si zakonisht ajo është shtojcë ime memorie ...
Pra, është i aktivizuar = "e vërtetë" dhe me aftësi të kufizuara = "false" njëjtë? Po
Mos ... besoni, mirë! thats mënyrën se si është ... këtu është një shpjegim të shpejtë ...
"Aftësi të kufizuara" është një atribut i çdo element të formës / fushë dhe kështu mund të pranojë asnjë vlerë nga natyra e tij.

Për sa kohë që ky atribut është i pranishëm, element do të jetë me aftësi të kufizuara pavarësisht nga vlera e saj. psh.
<INPUT type="text" value="This është disabled" disabled>
<INPUT type="text" value="This është disabled" disabled="disabled">
<INPUT type="text" value="This është disabled" disabled="true">
<INPUT type="text" value="This është disabled" disabled="false">

Të gjitha më lart do të bëjë fushë kjo formë "invalid".

Thjesht mos siguruar atributin "invalid" e mban Fusha "ABLED" ... si më poshtë

<INPUT type="text" value="This nuk është disabled" />

Mos harroni "Çdo vlerë (ose nuk ka vlerë fare) e atribut me aftësi të kufizuara, browser-i do të bëjë atë me aftësi të kufizuara". Për të mbajtur gjëra të qartë në mendjen tonë W3C rekomandon që ne përdorim me aftësi të kufizuara = "aftësi të kufizuara" në këto situata.

Ky është dallimi pse kur ne përdorim këtë atribut në javascript ...

document.form.element.disabled = vërtetë, / / element do të jetë me aftësi të kufizuara
document.form.element.disabled = false; / / element do të jetë i aktivizuar

Argumentet e mësipërme janë të vërteta për këto atribute dhe elemente:

  • kontrolluar (butonin radio dhe checkbox)
  • zgjedhur (opsion)
  • nowrap (TD)

2008 17 dhjetor 2008

Keq-sjellje IE8: Layout breakages CSS (targetimit të një version të shfletuesit përdorur Meta Tags në IE8)

Nëse ju jeni personi css, ju do të dini dhimbje në marrjen Layouts tuaj të punës kryq shfletuesin-. IE8 është ende një çelës në veprat për zhvilluesit nesh. Anywaz! nëse ju goditi mbi këtë çështje, si unë e bëri dje, ku CSS tuaj të përkryer duke punuar në IE7 (dhe më herët) dhe Firefox ka filluar papritmas hedhur tantrums në IE8, provoni këtë ... Ajo dukej mirë për të rregulluar problemet e mia për momentin ....

Duke përdorur deklaratës Meta, ne mund të specifikoni motorrit interpritim ne do të dëshironim IE8 për t'u përdorur. Pra, për të detyruar IE8 që të merr sa IE7 ... Vendos Tag vijim Meta në krye të dokumentit tuaj: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

By default Meta IE do të jetë: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
të cilat do të bëjnë IE8 faqen duke përdorur mënyrën e re të standardeve.

Nëse kërkohet, kjo sintaksë mund të përdoret për të akomoduar për shfletuesit e tjerë si më poshtë:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


MË SHUMË Rreth DOCTYPES:

Nëse jeni ende të panjohura me lloj kafshe të quajtur "DOCTYPE" ... këtu është një shpejtë lexuar
Cilat janë DOCTYPES? Cilat jane keto lojra fjalesh Browser & mode rreptë?
Vendosja e DOCTYPE në XSL

Për një më shumë në kuptim të thellë në lidhje me DOCTYPES, provoni vizituar këto lidhje ...
Një Lista Përveç: Fix Your Site Me DOCTYPE e duhur!
Një Lista Përveç: Përtej DOCTYPE: Standardet Web, Forward Compatibility dhe IE8

Shënim: Edhe pse shumë prej nesh HTML / CSS njerëz janë neglizhuar rëndësinë e decleration DOCTYPE në dokumentet tona, Vendosja e DOCTYPE duhur, zakonisht është përgjigje për çështjet më kryq browser.


2008 4 tetor 2008

Zhdukur HTML / DIV elemente në Internet Explorer [IE]

Si zakonisht, një nga disa probleme shumë të çuditshme me IE dhe këtë duhet të renditet në 10 TOP keto lojra fjalesh e IE.

DEKLARATË E PROBLEMIT (Ky ishte problemi im, ndoshta ju keni misbehaviors ngjashme):
Unë kam DIV shumë është në faqen me të klasës "sectionhead", që është asgjë, por titulli i një seksion në faqe. Pra, unë kam disa stil në kërkim si kjo

. Sectionhead {font-size: 18px; background: # cfcfcf; mbushje: 5px;}

Div bar është një dritë gri me disa tekstin e zi. Çfarë ndodh në IE është disa prej këtyre headers seksion janë shfaqur ok, por disa janë të padukshme, derisa, ju shkoni faqe ose klikoni diçka në faqen etj Dikur ata kanë tendencë të zhduket kur ju klikoni me 'alt kyç kur ju faqe poshtë apo shkoni me bar scroll. Ata nganjëherë duket se rishfaqen kur ju ringarkoni (F5) faqen. I shkurtër një DIV krejtësisht i thjeshtë me një stil të thjeshtë sillet KEQ.
Çfarë mund të shkaktojnë sjellje të tillë një parregullt? E pra! Sinqerisht, NO IDEA!

Zgjidhje e mundshme:
Përsëri nuk do të më pyesni pse, por në shumë raste ky problem priret të zhduket kur ju të shtoni pozitën: në lidhje me sjellje të keq elementet e stilit, si kjo

. Sectionhead {font-size: 18px; background: # cfcfcf; mbushje: 5px; Pozita: relative}

I çuditshëm, por çfarë të thonë? Zoti i bekoftë mua nga IE!

DHE DO SHARE me SHBA, nëse keni pasur probleme të ngjashme.


2008 3 tetor 2008

Thjeshtë, i lehtë, Lightbox Cross Browser për webpage tuaj

Jo se ka vetëm disa Lightbox e që ju mund të gjeni kur ju google. Çështja me shumicën e lightboxes që kam gjetur ishte se ata të gjithë dukeshin të përdorni një ose të tjera strukturat e rënda JavaScript peshe si, jQuery, prototip MOOTOOLS dhe i pëlqen. Ata janë të gjithë të qetë dhe luksoz në kërkim. Por në qoftë se kërkesa juaj është: "Por unë dua që një dorëshkrim i thjeshtë dhe i lehtë Lightbox për web faqen time", atëherë këtu është;

Disa karakteristika bukur të këtij Lightbox

  1. Shumë të lehta
    a. 4kb e Scripts kur mbushura (8 KB unpacked)
    b. 2 kb CSS e
    c. Disa rreshta të HTML për enë Lightbox
  2. Thjeshtë për të kuptuar dhe zbatuar
  3. Mund të ketë Lightboxes të shumta në të njëjtën faqe.
  4. Enë njëjta Lightbox është përdorur për të treguar, përmbajtje të ndryshme (e cila është përfshirë veçmas si ndarjeve të fshehura në faqe), në varësi të lidhjes / opsion që është klikuar.
  5. Automatikisht qendra vetë, duke marrë parasysh të gjithë faktorët si, lartësi dhe gjerësi Window (Rezoluta ekran), shumën faqe rrotull dhe lartësinë e përmbajtjen e Lightbox
  6. Testuar në 7 IE dhe FF

Shiko Demo |
Shkarko Zip Burimi Lightbox (Shkarkuar 1792 herë)


Duke përdorur Lightbox fjalës Files në dosje zip]

jo.js, të jo_pack.js [version mbushura]: - një grup i thjeshtë i OBJEKTEVE JavaScript [JO], i cili përmban, dritare element dhe Scripts pozicionuar dokument. Ju mund të hapur JO.JS në qoftë se ju dëshironi që të merrni duart tuaja të pista me disa Javascripting avancuar, duke krijuar funksione abstrakte, duke u zgjeruar pronat element dhe të tilla. Nëse ju nuk shumë në Javascripting, lëre vetëm.

lightbox.js, lightbox_pack.js [version mbushura]: - Përmbajtja Scripts lehta menaxher kuti. Nëse ju jeni projektues faqe, gjithashtu përgjegjëse me zbatimin e Lightbox në faqe, ju duhet të kuptoni LightBoxManager. LightBoxManager në thelb përmban vetëm dy funksionet showLightBox dhe closeLightBox.

lightbox.css: - Nëse ju e dini CSS, ju mund të luajnë me rreth lightbox.css të rregulloje pamjen-n-ndiheni lightbox.css

index.html: Zbatimi Shembull i Lightbox me dy përmbajtje të ndryshme

lb_underlay_bkg.png: - Kjo është dritë / simi image transparent që është përdorur sfondin për shtresë Lightbox [shtresë është shtresa më poshtë lighbox, e cila parandalon përdoruesit nga klikuar çdo entitet tjetër në faqe, ndërsa Lightbox është e hapur]. Ju mund të përdorni çdo imazh apo edhe një ngjyrë të fortë për këtë qëllim, në varësi të dizajnit faqe dhe kërkesat.

icon_lb_close.gif: - imazhi për të trajtuar Lightbox të ngushtë në të djathtë lartë të kutisë të lehta. Mund të përdorni çdo imazh si për dizajn

Shiko Demo |
Shkarko Zip Burimi Lightbox (Shkarkuar 1792 herë)

Ju lutem na kanë Komentet dhe reagimet tuaja ...


2008 4 shtator 2008

Blocks fikse (Kjo mbetet statike në dritare scroll) Page përdorur CSS Vetëm

Ky post mund të jetë një shembull i mirë për shprehja "Mësimi gjyshe të thith vezë" ... Sepse kjo është vetëm THEMELORE Stuff CSS. Por për ata, si mua pavëmendshëm, kjo mund të jetë një bekim në maskim. Unë gjithmonë kam menduar (unë mund të humb punën time për të thënë këtë), ishte e mundur vetëm për të mbajtur disa pjesë të përmbajtjes së faqes HTML statik (kuptimi, pozicioni i saj mbetet AS IS në libër Window), duke përdorur disa Scripts zgjuar, të bësh të gjitha ato shkencore llogaritjet për të gjetur pozicionin e dinamik, zënë ngjarjet Window.scroll dhe vendosjen e mbarime etj

Asnjëherë mos menduar se mund të thjeshtë si kjo .... Këtu në CSS / HTML më poshtë, unë kam katër blloqe statike, e fiksuar për çdo extrimities e faqe, TOP, DREJTA, BOTTOM dhe LEFT ... panevojshme të thuhet ... ju mund të zgjidhni çdo një ose më shumë në qoftë se duhet të jetë ...

CSS
. Statike {display: block; z-index: 10; color: # ffffff; del nga shtrati-x: fsheur, del nga shtrati-y: fsheur; Pozita: ixed;
}
Përmbajtja msgstr {margin: 100px 150px 0PX 160px; kufirit: 1px solid # e6e6e6}

# Përfundojë-t {top: 0PX; background: # 33CC66; width: 100%; height: 55px;}

# Përfundojë-l {top: 80px; background: # FF9966; height: 300px; width: 150px; kufitare: 2px solid # e6e6e6;}

# Përfundojë-b {bottom: 0PX; background: # 3333CC; width: 100%; height: 55px;}

# Përfundojë-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; kufitare: 2px solid # e6e6e6; drejtë: 0;}

HTML
id="contents"> <div Ju Përmbajtja kryesore page </ div>
<div id="wrap-b" class="static">
Static Content në fund Page
</ Div>
<div id="wrap-t" class="static">
Static Content mbi Faqja Kryesore
</ Div>

<div id="wrap-l" class="static">
Static Content mbi faqe la
</ Div>
<div id="wrap-r" class="static">
Static Content mbi të drejtën Page
</ Div>

Shiko një mostër wroking këtu


2008 2 shtator 2008

CSS hack: Javascript, CSS, HTML for Firefox vetëm

Shumë një herë ndjejmë nevojën për të shkruar hacks shfletuesit specfic (edhe pse kjo nuk është një praktikë e mirë, ne zhvilluesve UI duhet të përdorë për të këqijave të tilla deri në luftërave shfletues të mëdha fjala për një armëpushim). Më parë, unë kam përmendur në këtë artikull Për IES tuaj Vetëm , si për të shkruar një copë CSS se do të jetë e dukshme për shfletuesit IE <IE7 vetëm.

Dje, kam pasur një rast, ku kam kërkuar për të shkruar disa specifike FireFox CSS copra. E pra! Unë nuk jam i sigurt nëse ka një kod CSS për këtë, por ka një HTML. Nuk është një kapur pse, kjo pjesë e doesnot HTML validation kalojë HTML. Por, anywaz! Nëse jeni të mbërthyer keq ose si i tillë, nuk kanë fala-për vlefshmërinë e simbolit diku ne duhet të jemi mizor), ju mund të përdorni e mëposhtme për të deklarojë një lidhje me një stylesheet FF vetëm apo edhe vetëm kodin CSS brenda këtij blloku. Kodi është

<comment> Vendos Firefox tuaj vetëm HTML / CSS / Scripts këtu </ comment>

p.sh.
<comment>
<style>
/ Styles * për FF vetem * /
FIELDSET {border: solid 1px # dddddd;}
</ Style>
</ Comment>

I "m i lumtur për momentin ...


2008 15 Mar 2008

Boxes irrituese Zgjidhni dukshme përmes Divizioneve Popup

Në disa raste, duke bërë Layouts faqe me ndarjet Popup / lightboxes / Këshilla etj ndeshemi me situata ku disa objekte Formoni SELECT ndodh të jetë nën këtyre Divizioneve popup, me dashje dhe kjo tregon përmes .... Yuk!

E pra! ju lehtë mund të rregullojmë këtë, duke rregulluar vlerat Z-index tuaja në mënyrë të përshtatshme për FF dhe IE7. Por mirë Vjetër (lojë fjalësh qëllim) IE6 nuk sillet si qëllim .... Emisioni SELECT BOX përmes, edhe pasi që ju aplikoni disa në mënyrë drastike të larta Z-index vlerave të Division tuaj Popup ... zhgënjim!

Nuk ka rregullime për këtë problem, por nuk janë, besoj, më shumë se një mënyrë pak për të punuar rreth këtij problemi, por Im këtu për t'ju thënë zgjidhje të thjeshtë që kam përdorur, i cili punon mirë për mua, në shumicën e raste ....

Msgstr "Fshih Kutin ZGJIDH Rouge kur ju tregoni Popup"

Thjesht në copë tuaj shkrimit ku ju tregoni popup tuaj, shtoni një pjesë e shkrimit për të vendosur dukshmërinë e Kutisë SELECT për të "fshehur"

document.getElementById ('my_select') style.visibilty = "hidden".;

Dhe mbani mend për të vendosur atë përsëri në fund të Divizionit tuaj Popup

. ('my_select') document.getElementById style.visibilty = "dukshme";

ku "my_select" është ID e Kutisë acarim SELECT

Hope this helps ...

PS. Ka opsione të tjera si ofcourse dinamike positionining një (madhësia e njëjtë si ju Popup pëlqeu iframe nën DIV Popup ... Kjo punon shumë mirë, por me shtimin e ngarkesa të Elemente DOM, scripts dhe dhimbje koke. Unë kam përdorur këtë zgjidhje shumë, dhe nëse ju keni nevojë për ndonjë ndihmë me këtë opsion, nuk më lejoni të dinë. Do të jetë i gatshëm për ndihmë!


NDK shtëpi | Duke shprehur IT | qiellëz shprehur | Penmenship shprehur | frikë shprehur | shprehur Myself