2010 04 martie 2010

Buton radio Alinierea cu textul

Din butonul radio şi text sunt în linie, astfel încât textul se va alinia la partea de jos a butonului radio, textul va apărea pentru a fi uşor de sub butonul de radio.
Dacă doriţi ca acestea să se alinieze la partea de sus, veţi avea de a plasa radio şi textul în containere separate, cum ar fi divs sau trece peste (după caz) şi vor avea grijă de aliniere. Ar fi mai uşor de utilizat celule de tabel de asemenea, de scurtă de design-l permite.

Acest lucru nu va arata la fel in fiecare browser, ca de fiecare browser-ul afişează radio uşor diferit, deci nu e întotdeauna o să fie probleme de dimensiuni, indiferent de ceea ce faci.

comentarii | postat în quirks Browser , HTML

2010 08 ianuarie 2010

Ce va aduce HTML5?

HTML5 este încă un proiect. Aşa cum am scrie, lucru pe HTML 5, care a început în 2004, este încă în curs de dat formă printr-un efort comun între W3C HTML WG şi WHATWG . Cuvântul este faptul că Next Gen HTML va avea îmbunătăţiri şi caracteristici, care ar fi noua structură şi semantică, controalele de formular, API-uri, tag-uri multimedia, etc.

În limba engleză simplu ... ceea ce ar însemna pentru dezvoltatori UI noi ...

  • Nu va fi adăugarea unor anume structurale etichetele. <article>, <section>, <header>, <aside>, şi <nav>, care ar putea înlocui majoritatea <div> e folosit pe o pagina web, făcând paginile un pic mai mult semantic, dar mai important, mai uşor de pentru a citi.
    Hei! Imaginaţi-vă efort salvat în găsirea de faptul că lipseşte o etichetă DIV aproape.
    de exemplu, 
  <body>
   <header> ... </ header>
   <nav> ... </ NAV>
   <article>
     <section>
       ...
     </ Secţiune>
   </ Articol>
   <aside> ... </ deoparte>
   <footer> ... </ subsol>
 </ Corp>

În loc de 

  <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>
 </ Corp>
  • Odată cu apariţia de conţinut audio şi video precum YouTube, utilizarea multimedia integrate de pe pagina web a increaded de ori. Luând în considerare acest lucru, Acum, planul este de a adăuga suport nativ pentru integrarea video şi audio în browser-ul în sine, prin urmare, permite utilizatorilor să joace, pauză, stop, căuta, şi ajustaţi volumul folosind interna DOM API-uri pentru script-uri pentru a controla redarea.

de exemplu, 

  <video poster="poster.jpg">
     <Sursa src = "video.3gp" type = "video/3gpp"
     mass-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>
  • Mai bine-definite roluri semantice pentru elementele existente, de exemplu. <strong> şi <em> acum s-ar putea de fapt, au semnificaţii diferite, adică, ele se vor comporta diferit.

Există mult mai multe schimbari / upgrade la versiunea mai nouă ... va păstra actualizarea acest post ca am venit din toata nici pe cele interesante, utile .... Uita-te la acest spaţiu

Acest document nu poate oferi informaţii exacte ca HTML 5 caietul de sarcini este încă activ în dezvoltare. Atunci când în dubiu, verificaţi întotdeauna HTML 5 caietul de sarcini aici .

1 comentariu | Tags: | postat în HTML

2009 18 octombrie 2009

HTML şi XHTML

  • Declaraţia Tip de document trebuie să fie prezent la începutul unui document care utilizează sintaxa HTML. Acesta poate fi, opţional, utilizate în cadrul sintaxa XHTML, dar nu este necesar. Document XHTML nu trebuie să includă DOCTYPE, deoarece documentele XHTML, care sunt livrate cu ajutorul corect XML tip MIME şi sunt prelucrate în XML de browsere, sunt întotdeauna redate în nici un modul quirks.
  • În XHTML, denumirile tag-urilor sunt cazuri sensibile şi sunt de obicei definite să fie scrise cu litere mici. In HTML, cu toate acestea, denumirile tag-urilor sunt insensibil caz şi pot fi scrise în toate cazurile, majuscule sau mixte, deşi Convenţia de la cel mai comun este să rămânem cu litere mici. Cazul etichetele de început şi sfârşit, nu trebuie să fie aceeaşi, dar fiind în concordanţă nu face curat aspectul codul.

Beneficiile utilizarii HTML

  • Compatibil cu browserele existente
  • Autorii sunt deja familiarizaţi cu sintaxa
  • Sintaxa îngăduitor şi iertător înseamnă că nu va fi nici un utilizator nu-ostile " Screen galben de moarte ", în cazul în care o greşeală accidental alunecă prin
  • Sintaxa stenografie convenabil, de exemplu, autorii pot omite unele etichete şi valorile atributelor

Beneficiile utilizarii XHTML

  • Strict sintaxa XML încurajează autorii să scrie marcare bine-formate, pe care unii autori ar putea găsi mai uşor de a menţine
  • Integrează direct cu alte vocabulare XML, cum ar fi SVG şi MathML
  • Permite utilizarea de XML de prelucrare, care unii autori folosesc, ca parte a lor de editare şi / sau procese de publicare

comentarii | Tag-uri: | postat în HTML , Web Developer

2009 24 martie 2009

Este dezactivat = "true" şi cu handicap = "false" la fel?

Această şcoală a celor vechi, dar ca de obicei aceasta este un supliment mea de memorie ...
Deci, este dezactivat = "true" şi cu handicap = "false", acelaşi lucru? Da
Nu cred că ..., bine! Asta e modul în care este ... aici este o explicaţie rapidă ...
"Handicap" este un atribut de orice element de formular / domeniu şi, prin urmare, poate accepta orice valoare, prin natura sa.

Atâta timp cât acest atribut este prezent, elementul va fi dezactivat, indiferent de valoarea sa. de ex.
<input type="text" value="This este disabled" disabled>
<input type="text" value="This este disabled" disabled="disabled">
<input type="text" value="This este disabled" disabled="true">
<input type="text" value="This este disabled" disabled="false">

Toate cele de mai sus se va face în domeniul această formă "Disabled".

Pur şi simplu nu oferă atributul "Disabled" pastreaza Rubrica "permis luarea" ... ca de mai jos

<input type="text" value="This nu este disabled" />

Amintiţi-vă "Orice valoare (sau nici o valoare, la toate), a persoanelor cu handicap atribut, browser-ul va face dezactivat". Pentru a păstra lucrurile clar în mintea noastră W3C recomandă pe care le folosim dezactivat = "handicap" în aceste situaţii.

Aceasta este diferenţa, deşi atunci când vom folosi acest atribut în javascript ...

document.form.element.disabled = true; / / element va fi dezactivat
document.form.element.disabled = false; / / element va fi activat

Argumentele de mai sus sunt, de asemenea, valabil şi pentru aceste atribute şi elemente:

  • verificate (butonul radio şi checkbox)
  • selectat (opţiune)
  • nowrap (TD)

1 comentariu | Tags: | postat în HTML , JavasScript

2008 17 decembrie 2008

Mis-care se comportă IE8: CSS layout (rupturi de direcţionare o versiune de browser cu ajutorul Meta Tag-uri în IE8)

Dacă sunteţi CSS persoană, ar trebui să ştii durerea în obţinerea de aspectele dvs. de lucru cross-browser. IE8 este încă o altă cheie în lucrările pentru dezvoltatori noi. Anywaz! dacă te-a lovit pe această problemă, aşa cum am făcut ieri, în cazul în care CSS-ul perfect de lucru în IE7 (şi mai devreme), şi brusc Firefox a început să arunce cu accese de furie în IE8, încercaţi acest ... Se părea bine pentru a remedia problemele mele pentru moment ....

Folosind declaraţie Meta, putem specifica motorul de randare ne-ar dori să folosească IE8. Deci, pentru a forţa IE8 pentru a face ca IE7 ... Introduceţi Tag Meta următoarele în capul a documentului: -

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

În mod implicit Meta IE ar fi: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
care ar face IE8 face de start, folosind noul mod de standarde.

Dacă este necesar, această sintaxă ar putea fi folosite pentru a gazdui pentru alte browsere ca de mai jos:

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

Mai multe despre doctypes:

Dacă nu sunteţi încă familiarizat cu fel de animal numit "doctype" ... aici este un rapid citit
Ce sunt doctypes? Care sunt quirks BROWSER si modul strict?
Setarea DOCTYPE în XSL

Pentru o mai înţelegere în profunzime despre doctypes, încercaţi să vizitaţi aceste link-uri ...
A List Apart: Fix site-ul cu DOCTYPE dreapta!
A List Apart: Dincolo de DOCTYPE: Standarde web, înainte de compatibilitate, şi IE8

Notă: Deşi mulţi dintre noi, HTML / CSS de persoane au fost neglija importanţa de decleration DOCTYPE în documentele noastre, Setarea DOCTYPE dreapta, este, de obicei, răspunsul la problemele browser-ului pentru cele mai multe.

1 comentariu | Tags: , , , , | postat în quirks Browser , HTML

2008 04 octombrie 2008

Dispariţia HTML / DIV elemente în Internet Explorer [IE]

Ca de obicei, una din cele mai multe probleme ciudate cu IE şi aceasta trebuie să rândurile în TOP 10 al quirks IE.

Formularea problemei (Aceasta a fost problema mea, poate ai abateri similare):
Am multe DIV este, în pagina cu clasa "Sector", care nu este nimic, dar titlul de o secţiune de pe pagina. Deci, am un stil arata ca acest

Sector {font-size: 18px; fundal: # cfcfcf; padding: 5px;}.

Div este un bar de culoare gri deschis, cu un text negru. Ce se întâmplă în IE este unele dintre aceste anteturi secţiune sunt afişate ok, dar unele sunt invizibile, până când, în care se derulează pagină sau faceţi clic pe ceva pe pagina, etc Uneori, ele tind să dispară atunci când faceţi clic pe "Alt" cheie atunci când pagina de jos sau derula cu bara de defilare. Uneori ele par să reapară atunci când reîncărcaţi (F5), pagina. Am scurt un DIV perfect simplu, cu un stil simplu, se comportă BAD.
Ce ar putea cauza un astfel de comportament haotic? Ei bine! Sincer, nici o idee!

POSIBILE SOLUŢIE:
Din nou, nu ma intrebati de ce, dar în multe cazuri această problemă tinde să dispară atunci când se adaugă poziţia: faţă de un comportament greşit elementele de stil, cum ar fi acest

Sector {font-size: 18px; fundal: # cfcfcf; padding: 5px; poziţia: relativă}.

Ciudat, dar ce să spun? Dumnezeu mă binecuvânteze din RO!

I DO Partajaţi-le cu SUA, dacă aţi avut probleme similare.

comentarii | Tags: , , , | postat în quirks Navigator , CSS , HTML

2008 03 octombrie 2008

Simplu, Lightbox uşoare, Crucea browser pentru pagina dvs. de Web

Nu faptul că există doar câteva lightbox lui pe care le puteţi găsi atunci când Google. Problema cu cele mai multe lumini pe care am găsit a fost că toţi păreau a utiliza una sau alte cadre grele, JavaScript greutate, cum ar fi jQuery, Prototype, mootools şi îi place. Acestea sunt toate rece şi swanky cautati. Dar dacă cerinţa este "dar vreau un SCRIPT lightbox SIMPLU şi uşoară pentru Site-ul meu", atunci aici este;

Unele caracteristici ale acestui frumos lightbox

  1. Foarte uşor
    o. 4KB de scripturi atunci când ambalate (8 kb despachetat)
    B. 2 KB din CSS
    C. Câteva linii de cod HTML pentru containere lightbox
  2. Simplu să înţeleagă şi să pună în aplicare
  3. Poate avea mai multe lumini de pe aceeaşi pagină.
  4. Container Lightbox este folosit pentru a arăta, conţinut diferit (care este inclus separat ca diviziuni ascunse în pagină), în funcţie de link-ul / opţiunea care se face clic.
  5. Automat centre, luând în considerare toţi factorii, cum ar fi, înălţimea şi lăţimea ferestrei (rezoluţia ecranului), valoarea pagina de defilare şi înălţimea a conţinutului de lightbox
  6. Testat în IE 7 şi FF

Vezi Demo |
Descarca Sursa Zip Lightbox (Downloaded 1804 ori)

Utilizarea Lightbox [Fişiere în fişierul zip]

jo.js, jo_pack.js [versiunea ambalat]: - un set simplu de OBIECTE JAVASCRIPT [JO], care conţine elementul, ferestre şi script-uri de poziţionare a documentelor. Puteţi deschide JO.JS dacă doriţi să obţineţi mâinile murdare cu unele Javascripting avansată, crearea de funcţii abstracte, extinderea unor astfel de proprietăţi şi a elementelor. Dacă nu se prea mult în Javascripting, Lasă-l singur.

lightbox.js, lightbox_pack.js [versiune plin de]: - Contine scripturi de lumina caseta de Manager. Dacă sunteţi proiectantul paginii, de asemenea, responsabil cu punerea în aplicare a lightbox pe pagina, aveţi nevoie pentru a înţelege LightBoxManager. LightBoxManager conţine practic doar două funcţii showLightBox şi closeLightBox.

lightbox.css: - Dacă ştii CSS, poţi să te joci în jurul cu lightbox.css pentru a personaliza aspectul-N-simt lightbox.css

index.html: punerea în aplicare Exemplu de lightbox cu două conţinut diferit

lb_underlay_bkg.png: - Aceasta este lumina / Simi imagine transparentă, care este folosit de fundal pentru stratul de baza lightbox [Covorul este stratul de mai jos lighbox, care împiedică utilizatorul de la clic pe orice altă entitate pe pagină, în timp ce lightbox este deschis]. Puteţi utiliza orice imagine sau chiar o culoare solida pentru acest scop, în funcţie de designul paginii şi cerinţa.

icon_lb_close.gif: - imagine pentru mâner lightbox aproape de partea din dreapta sus a casetei de lumină. Pot folosi orice imagine ca pe proiectarea

Vezi Demo |
Descarca Sursa Zip Lightbox (Downloaded 1804 ori)

Vă rugăm să ne comentariile dumneavoastră şi feedback-ul ...

Nu sunt comentarii | Tags: , | Posted in CSS , Downloads , HTML , JavasScript , UI Components

2008 04 septembrie 2008

Blocuri stabilite (Asta rămâne static pe fereastră de defilare) Page folosind CSS Numai

Acest post ar putea fi un exemplu bun pentru fraza "bunica Predarea de a suge ouă" ... Pentru că aceasta este doar BASIC Lucruri CSS. Dar pentru cei care, ca şi uită-mă, acest lucru ar putea fi o binecuvântare în deghizare. Intotdeauna am crezut ca (am putea pierde slujba pentru a spune acest lucru), aceasta a fost posibilă numai pentru a păstra o parte din conţinutul paginii HTML statice (sensul, poziţia sa rămâne CA ATARE pe Defilaţi Window), utilizarea unor script-uri inteligente, Fac toţi cei ştiinţifice calcule pentru a găsi poziţia de dinamic, capcană evenimente Window.scroll şi stabilirea time-out, etc

Niciodata nu gandit ca ar putea la fel de simplu ca acest lucru .... Aici, în de mai jos CSS / HTML, am patru blocuri statice, unul fixat la fiecare extrimities de pagini, sus, dreapta, jos şi stânga ... inutil sa spun ... puteti alege una sau mai multe în cazul în care trebuie să fie ...

CSS
Static {display: block; Z-index: 10; color: # FFFFFF; overflow-x: ascuns; overflow-y: ascuns; poziţie:. Ixed;
}
Conţinutul # {margin: 0px 100px 150px 160px; de frontieră: 1px solid # e6e6e6}

# Wrap-T {top: 0px; fundal: # 33CC66; latime: 100%; inaltime: 55px;}

# Wrap-L {top: 80px; fundal: # FF9966; inaltime: 300px; lăţime: 150px; de frontieră: 2px solid # e6e6e6;}

# Wrap-b {jos: 0px; fundal: # 3333CC; latime: 100%; inaltime: 55px;}

# Wrap-R {top: 80px; fundal: # 6666FF; inaltime: 300px; lăţime: 140px; de frontieră: 2px solid # e6e6e6; dreapta: 0;}

HTML
id="contents"> <div Voi conţinutul pagina principala </ div>
<div id="wrap-b" class="static">
Continut static pe partea de jos pagina
</ Div>
<div id="wrap-t" class="static">
Continut static pe Începutul paginii
</ Div>

<div id="wrap-l" class="static">
Continut static pe pagina din stânga
</ Div>
<div id="wrap-r" class="static">
Continut static pe dreapta paginii
</ Div>

Vezi un eşantion wroking aici

comentarii | Tag-uri: | postat în CSS , HTML

2008 2 septembrie 2008

CSS hack: Javascript, CSS, HTML pentru numai pentru Firefox

De multe ori ne simţim nevoia de a scrie hacks browser specfic (deşi nu este o practică bună, am dezvoltatorii UI trebuie să recurgă la astfel de rele până la marile razboaie Browsere ajunge la un armistiţiu). Mai devreme, am menţionat în acest articol Pentru schimburile de dvs. Numai , cum să scrie un fragment de CSS care ar fi vizibil pentru browserele IE <IE7 numai.

Ieri, am avut un caz, în cazul în care am vrut să scrie unele FireFox specific CSS fragmente. Ei bine! Eu nu sunt sigur dacă există un cod CSS pentru acest lucru, dar există un HTML. Există o captură Deşi, această bucată de cod HTML doesnot trece de validarea HTML. Dar, anywaz! Dacă sunteţi blocat prost sau ca atare, nu au ceea ce priveşte, pentru validare (uneori trebuie să fie crud), aţi putea folosi următorul text pentru a declara o legătură într-o foaie de stil numai FF sau chiar doar codul CSS în acest bloc. Codul este

Pune <comment> Firefox doar HTML / CSS / Scripturi aici </ comentariu>

de exemplu,
<comment>
<style>
/ * Stiluri de numai FF * /
FIELDSET {frontieră: 1px solid # dddddd;}
</ Style>
</ Comment>

Eu "m fericit pentru moment, ...

comentarii | Tags: , , | Posted in quirks Navigator , CSS , HTML , JavasScript

2008 15 martie 2008

Iritante Cutii Selectaţi vizibil prin diviziile Popup

La ocazii mai multe, în timp ce faci machete de pagini cu divizii pop-up / lumini / Sfaturi, etc am ajuns în situaţii în care unele obiecte de formular SELECT se întâmplă să fie în conformitate cu aceste diviziunile pop up, de proiectare şi arată, prin .... YuK!

Ei bine! ai putea rezolva cu usurinta acest lucru prin ajustarea dvs. Z-INDEX valori corespunzător pentru FF si IE7. Dar, bun vechi (joc de cuvinte destinate), IE6 nu se comporta ca destinate .... Arată BOX SELECT, prin, chiar şi după aplicarea unor drastic ridicate Z-INDEX valori de la Divizia de PopUp ... Dezamăgire!!

Nu există soluţii pentru această problemă, dar există, cred eu, mai mult decât o modalitate de a lucra câteva, în jurul valorii de această problemă, dar im aici să vă spun mai simplă soluţie pe care am folosi, care functioneaza bine pentru mine, în cea mai mare parte cazuri ....

"Ascunde ROUGE BOX Selectaţi când SHOW POPUP"

Pur şi simplu, în fragmentul de script-ul dvs. în cazul în care va arăta pop-up, adăugaţi o bucată de script pentru a seta vizibilitatea Box SELECT pentru a "ascuns"

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

Şi amintiţi-vă să-l dăm înapoi pe Închidere a diviziei de PopUp

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

în cazul în care "my_select" este ID-ul de Box iritare SELECT

Sper că acest lucru ajută la ...

PS. Există opţiuni, cum ar fi desigur alte positionining dinamic un IFRAME (aceeasi dimensiune ca ai pop-up) în conformitate cu DIV Popup ... Acest lucru functioneaza prea bine, dar cu un plus de incarcatura de elemente DOM, Scripturi si dureri de cap. Am folosit această soluţie de asemenea, şi dacă aveţi nevoie de ajutor cu această opţiune, nu să-mi spuneţi. Va fi bucuros să vă ajute!

nici un comentariu | Tags: , , , , | postat în quirks Navigator , CSS , HTML , JavasScript

NDK acasă | Exprimarea IT | Gust Exprimarea | Penmenship Exprimarea | Awe Exprimarea | a mă exprima