2010 4. marec 2010

Poravnava radio gumb z besedilom

Ker radio gumb, besedilo pa sta vrstici, tako da bo besedilo se uskladi na dno gumb, se bo besedilo videti nekoliko pod radijski gumb.
Če želite to uskladiti do vrha, boste morali postaviti radio in besedilo v ločenih zabojnikih, kot so divs ali povezuje (po potrebi) in bodo poskrbeli za uskladitev. To bi bilo lažje za uporabo celic tabele tudi za vaš dizajn kratko to dovoljuje.

To ne bo videti enako v vsakem brskalniku, kot vsak brskalnik prikaže radio nekoliko drugače, tako da je vedno bo velika vprašanja, ne glede na to, kaj počnete.

ni komentarjev | posted brskalnika quirks , HTML

2010 8. januar 2010

Kaj bo prinesla HTML5?

HTML5 je še vedno osnutek. Kot sem napisal, Delo na HTML 5, ki se je začel leta 2004, še vedno daje obliko s skupnim prizadevanjem, med W3C HTML delovne skupine in WHATWG . Beseda je, da bo naslednji HTML gen imajo dodatno opremo in funkcije, ki bi nova struktura in semantika, obliko nadzora, API, multimedia oznake itd.

V preprostem angleškem jeziku ..., kaj bi to pomenilo, da nas uporabniškega vmesnika razvijalce ...

  • Tam bodo poleg nekaterih strukturnih viz oznake. <article>, <section>, <header>, <aside> in <nav>, ki bi nadomestil večino <div> ih, ki se uporablja na spletni strani, zato vaše strani malo bolj semantična, vendar je še pomembneje, lažje brati.
    Hej! Zamislite si prizadevati shranjeno ugotovila, da ena manjka tesno DIV oznako.
    npr. 
  <body>
   <header> ... </ header>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Del>
   </ Article>
   <aside> ... </ na stran>
   <footer> ... </ noge>
 </ Body>

Namesto 

  <body>
   <div id="header"> ... </ p>
   <div id="nav"> ... </ p>
   <div class="article">
     <div class="section">
       ...
     </ P>
   </ P>
   <div id="aside"> ... </ p>
   <div id="footer"> ... </ p>
 </ Body>
  • S prihodom avdio in video vsebin, kot so YouTube, uporabo vgrajenih multimedijskih na spletni strani je increaded s krat. Ob upoštevanju tega, zdaj načrt je, da dodate vgrajeno podporo za vstavljanje video in zvok v brskalniku sam, s tem omogočajo uporabnikom, da igrajo, premor, ustavi, je treba poiskati, in prilagodite glasnost z uporabo vgrajeno DOM API za skripte za nadzor predvajanja.

npr. 

  <video poster="poster.jpg">
     <Vir src = "video.3gp" type = "video/3gpp"
     mediji = "ročni">
         <vrata_vira> src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <vrata_vira> src="music.oga" type="audio/ogg">
   <vrata_vira> src="music.mp3" type="audio/mpeg">
 </ Audio>
  • Bolje opredeliti semantične vloge za obstoječe elemente, npr. <strong> in <em> lahko zdaj dejansko imajo različne pomene, kar bodo obnašajo drugače.

Obstaja veliko več spremembe / nadgradnje na novejšo različico ... Bo vodi posodabljanje na tem položaju, ko sem prišel oglasov rabljenih strojev iz vse zanimive uporabne tisti .... Oglejte si ta prostor

Ta dokument ne more zagotoviti natančne informacije v HTML 5 specifikacija še vedno aktivno na področju razvoja. Če ste v dvomih, vedno preverite HTML 5 specifikacija tukaj .

1 komentar | Tags: | posted in HTML

2009 18 oktober 2009

HTML in XHTML

  • Vrsta dokumenta Izjava mora biti prisoten na začetku dokumenta, ki uporablja HTML sintakso. To se lahko po želji uporabljajo v skladnji XHTML, vendar se ne zahteva. Dokument XHTML ni treba vključiti, ker DOCTYPE XHTML dokumente, ki so dostavljene pravilno uporabo XML MIME tip in se obdelujejo kot je XML, ki jih brskalniki, so vedno opravljene v nobenem načinu quirks.
  • V XHTML, tag imena so velike in male črke, in so običajno opredeljeni biti napisani z malimi črkami. V HTML, vendar tag imena občutljivo na velikost črk in se lahko napisana v vseh velike črke ali mešani primeru, čeprav najpogostejši konvencije je, da se držijo z malimi črkami. Primer oznak začetni in končni ni treba biti isti, vendar pa v skladu ne bi čistilo kodo videz.

Prednosti uporabe HTML

  • Nazaj združljiv z obstoječimi brskalniki
  • Avtorji so že seznanjeni s sintakso
  • Mile in tolerantna sintaksa pomeni, da ne bo uporabniku sovražno " Rumena zaslon smrti ", če napaka slučajno zdrsne skozi
  • Priročna okrajšava sintaksa, lahko na primer avtorji izpustiti nekatere oznake in vrednosti atributov

Prednosti uporabe XHTML

  • Stroga XML sintaksa spodbuja avtorje, da pišejo dobro oblikovana oznake, ki jih lahko najdejo nekateri avtorji lažje vzdrževati
  • Integrira neposredno z drugimi XML besednjakov, kot sta SVG in MathML
  • Omogoča uporabo XML obdelavo, kar nekateri avtorji uporabljajo kot del njihovega urejanja oziroma objavljanje procesov

nobenih pripomb | Tags: | Objavljeno v HTML in Web Developer

2009 24. marec 2009

Onemogočena = "true" in onemogočil = "false" isto?

To tisti, stara šola, ampak kot ponavadi je moj spomin dodatek ...
Tako je onemogočena = "true" in onemogočil = "false" isto? Da
... Ne verjamem, no! thats načinu, kako je ... tukaj je nekaj hitro pojasnilo ...
"Onemogočeno" je lastnost vseh oblik elementa / poljska in zato lahko sprejme nobene vrednosti po svoji naravi.

Dokler je ta atribut prisoten, bo element, ne glede onemogočil njegove vrednosti. za npr.
<input type="text" value="This je disabled" disabled>
<input type="text" value="This je disabled" disabled="disabled">
<input type="text" value="This je disabled" disabled="true">
<input type="text" value="This je disabled" disabled="false">

Vse navedeno bo polje ta oblika "Onemogočeno".

Preprosto ne zagotavlja atribut "Onemogočeno" ohranja Field "ABLED" ... kot je spodaj

<input type="text" value="This ni disabled" />

Ne pozabite, "nobene vrednosti (vrednost ali ne sploh) za invalide atributa, bo brskalnik postal je onemogočeno". Če želite, da se stvari jasne misli v našem W3C priporoča, da jih uporabljamo invalidi = "invalidi" v teh situacijah.

To je razlika, čeprav, ko smo uporabijo ta atribut javascript ...

document.form.element.disabled = true; / bodo / element invalide
document.form.element.disabled = false; / bodo / element omogočen

Zgoraj navedeni argumenti so tudi za te lastnosti in elementov:

  • preveriti (radio gumb in polje)
  • izbrana (opcija)
  • nowrap (td)

1 komentar | Tags: | Objavljeno v HTML in JavasScript

2008 17. december 2008

Mis-IE8 vedel: CSS postavitev lome (usmerjenost na spletno različico z Meta Tags v IE8)

Če ste oseba, css, pa ti veš, bolečine v pridobivanje vaš postavitev delovne navzkrižno brskalnik. IE8 je še en ključ v del za nas razvijalce. Anywaz! Če ste zadeli na to vprašanje, kot sem storil včeraj, kjer je vaš popolnoma deluje CSS v IE7 (in prej) in Firefox nenadoma začeli metati tantrums v IE8, poskusite to ... To lepo zdelo, da se določi moje težave za zdaj ....

Uporaba izjava Meta, lahko določite upodabljanja motor, mi bi radi IE8 za uporabo. Tako prisiliti, da postane IE8 v IE7 ... vstavite naslednjo oznako Meta v glavi dokumenta: -

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

Privzeto bi IE Meta je: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ki bi IE8 zagotavljajo, da je stran z uporabo nove standarde način.

Če je potrebno, bi se to sintaksa se uporablja za namestitev v drugih brskalnikih, kot spodaj:

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

VEČ O DOCTYPES:

Če ste še ne poznajo neke vrste žival, imenovano "DOCTYPE" ... tukaj je nekaj hitro branje
Kaj so DOCTYPES? Kaj so BROWSER quirks in strogem načinu?
Nastavitev DOCTYPE v XSL

Za bolj poglobljeno razumevanje o DOCTYPES, poskusite obiskom te povezave ...
Seznam Apart: Fix vaše spletne strani z desno DOCTYPE!
Seznam Apart: Beyond DOCTYPE: Spletni standardi, Forward združljivost in IE8

Opomba: Čeprav mnogi od nas HTML / CSS ljudje so zanemarili pomen VrstaDok decleration v naših dokumentih, v katerem pravi DOCTYPE, je običajno odgovor na večino vprašanj, navzkrižno brskalnika.

1 komentar | Tags: , , ki in in | Objavljeno v brskalnika quirks in HTML

2008 4. oktober 2008

Izginjajo HTML / DIV elementi v Internet Explorerju [IE]

Kot ponavadi, eden od mnogih nekaj čudnih težav z IE in to treba je uvršča v TOP 10 IE quirks.

PROBLEM IZJAVA (To je bil moj problem, morda imate podobne misbehaviors):
Imam veliko DIV je na stran z razreda "sectionhead", ki je nič drugega kot naslov odseka na strani. Tako sem nekaj stil videti takole

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

Div je svetlo sivo bar z nekaj črno besedilo. Kaj se zgodi v IE, je nekatere od teh odsekov glave so prikazani v redu, nekateri pa so nevidni, dokler se pomikate po strani ali pa kliknite na nekaj strani, itd Včasih se nagibajo k izginili, ko boste kliknili na tipko »Alt želiš, ko stran navzdol ali se pomaknite z drsnega traku. Včasih se zdi, da znova pojavijo, ko osvežite (F5) strani. Skratka sem popolnoma preprosta DIV z nekaj preprostega stila obnaša BAD.
Kaj bi lahko povzročilo takšno nenadzorovano vedenje? No! Odkrito povedano, pojma nima!

MOŽNA REŠITEV:
Še enkrat, ne sprašuj me zakaj, ampak v veliko primerih ta problem ponavadi izginejo, ko dodate položaj: v primerjavi z MIS z vedenjem elementov slog, kot to

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; položaj: relativna}

Čudno, ampak kaj naj rečem? Bog me je Bless od IE!

IN DO DELEŽ z nami, če bi imeli podobne težave.

nobenih pripomb | Tags: in in in | Objavljeno v brskalnika quirks in CSS in HTML

2008 3. oktober 2008

Enostavno, Lahka, Cross Browser Lightbox za svojo spletno stran

Saj ne, da obstaja le malo Lightbox-jev, ki jih lahko najdete, ko google. Vprašanje z večino lightboxes da sem našel je bilo, da vse je zdelo, da uporabljajo eno ali drugih težkih okvire JavaScript teže, kot so jQuery, prototip, MOOTOOLS in podobno. Vsi so kul in šopirjenje videti. Toda, če vaša zahteva je, "A rad preprosto in Lahka pošta scenarij svojem mestu", potem je tukaj;

Nekaj ​​lepih lastnosti tega Lightbox

  1. Zelo lahka
    a. 4KB skriptov, ko pakirane (8 kb razpakirati)
    b. 2 kb CSS
    c. Nekaj ​​vrstic HTML za posodo pošta
  2. Enostavno razumeti in izvajati
  3. Imajo lahko več Lightboxes na isti strani.
  4. Enako Lightbox Posoda se uporablja za prikaz, drugačno vsebino, ki je vključena kot ločeno skrite delitve na stran), odvisno od povezave / opcije, ki je kliknil.
  5. Samodejno centrov, ob upoštevanju vseh dejavnikov, kot so, višino in širino Window (ločljivost zaslona), stran se pomaknite znesek, višina vsebine Lightbox
  6. Testiran v IE 7 in FF

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1806 krat)

Uporaba osebni album [datoteke v zip datoteki]

jo.js in jo_pack.js [pakirani version]: - preprosto množica objektov JavaScript [UL], ki vsebuje elementov, ki okno in skripte položaja dokumentov. Odprete lahko JO.JS, če želite, da bi dobili vaše roke umazane z nekaj Napredno Javascripting, ustvarjanje abstraktnih nalog, razširitev lastnosti elementov in take. Če ni preveč v Javascripting, ga pusti pri miru.

lightbox.js, lightbox_pack.js [zapakirane version]: - Vsebuje svetlobne skripte upraviteljev polje. Če ste stran oblikovalec, odgovoren tudi z izvajanjem osebni album na strani, morate razumeti LightBoxManager. LightBoxManager v bistvu vsebuje le dve funkciji showLightBox in closeLightBox.

lightbox.css: - če veste, CSS, lahko igral s lightbox.css, da prilagodite videz-n-počutili lightbox.css

index.html: Vzorec izvajanje Lightbox z dveh različnih vsebin

lb_underlay_bkg.png: - To je lahka / podob pregledno sliko, ki se uporablja ozadje za podlogo pošta [podlogo plast pod lighbox, ki preprečuje uporabniku, s klikom na katero koli drugo osebo, na strani, medtem ko je odprt Lightbox]. Uporabite lahko katero koli sliko ali celo trdne barve za ta namen, odvisno od strani oblikovanja in zahteve.

icon_lb_close.gif: - slike za tesno ročaj pošta v zgornjem desnem kotu svetlobe polje. Lahko uporabite katero koli sliko, kot vsak model

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1806 krat)

Prosimo vas, da nam je vaše komentarje in povratne informacije ...

Ni komentarjev | Tags: , | Objavljeno v CSS in prenosi , ki HTML , JavasScript , UI komponente

2008 4. september 2008

Določene (To je še vedno statičen na oknu se pomaknite) Bloki stran s CSS samo

Ta objava je lahko dober primer za izraz "Poučevanje babica sesati jajca" ... Ker to je samo BASIC CSS Stuff. Toda za tiste, tako kot mene pozablja, to je lahko blagoslov v preobleki. Vedno sem mislil (sem lahko izgubi svoje delo za to rekel), je bilo mogoče, da bo nekaj del HTML vsebino strani statični (kar pomeni, njeno stališče ostaja, KOT SO na zvitka Window), z nekaj pametne skripte, delaš vse tiste znanstvene izračuni, da bi našli dinamično mesto, pastmi Window.scroll dogodkov in nastavitev časovne omejitve itd

Nikoli mislil, bi to tako enostavno, kot je to .... Tu v nadaljevanju CSS / HTML, imam štiri statične bloke, eno pritrdijo na vsako extrimities strani, TOP, desno, spodaj in levo ... da ne govorimo ... lahko izberete eno ali več, če je treba ...

CSS
. Statična {zaslon: blok, z-indeks: 10; color: # FFFFFF; overflow-x: skrito; overflow-y: skrito, lega: ixed;
}
Napake # vsebina {kritja: 100 pik 150px 160px 0px; meja: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66, širina: 100%, višina: 55px;}

# Wrap-l {top: 80px; background: # FF9966, višina: 300px; širina: 150px; meja: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC, širina: 100%, višina: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; višina: 300px; širina: 140px; meja: 2px solid # e6e6e6, desno: 0;}

HTML
<div id="contents"> Vi glavna vsebina strani </ p>
<div id="wrap-b" class="static">
Statična vsebina na dnu strani
</ P>
<div id="wrap-t" class="static">
Statična vsebina na vrh strani
</ P>

<div id="wrap-l" class="static">
Statična vsebina na strani levo
</ P>
<div id="wrap-r" class="static">
Statična vsebina na desni strani
</ P>

Ogled wroking vzorec tukaj

nobenih pripomb | Tags: | Objavljeno v CSS in HTML

2008 2. september 2008

CSS hack: Javascript, CSS, HTML za Firefox samo

Veliko krat smo se čutijo potrebo, da napišete brskalnika specfic hacks (čeprav to ni dobra praksa, smo UI razvijalci morali zateči k te zlo do velikih brskalnikih Wars prihaja na premirje). Pred tem sem že omenil v tem članku Za vašo IES Samo , kako napisati odlomek CSS, ki bi bila vidna v IE brskalnikih <IE7 samo.

Včeraj sem imel primer, kjer sem hotel napisati nekaj posebnega FireFox odrezke CSS. No! Nisem prepričan, če je koda CSS za to pa je HTML. Obstaja ulov Čeprav je ta kos HTML doesnot potrditve prelaz HTML. Ampak, anywaz! Če si zaljubljen slabo ali kot tako, ne-pozdrav za potrjevanje (včasih moramo biti kruto), lahko uporabite naslednje prijaviti povezavo do le slogovne FF ali celo samo kodiranje CSS v tem bloku. Koda je

<comment> Daj samo za Firefox html / css / scripts tukaj </ komentar>

npr.
<comment>
<style>
/ * Slogi za FF samo * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Komentar>

I "m srečen za trenutek ...

nobenih pripomb | Tags: , , | Objavljeno v brskalnika quirks in CSS in HTML , JavasScript

2008 15. marec 2008

Draži Izberite Škatle viden skozi pojavnem oddelkov

Ob različnih priložnostih, medtem ko delaš postavitve strani z popup oddelki / lightboxes / Nasveti itd srečamo primere, ko neko obliko Izberi predmete zgodi, da je v teh Popup oddelkov, pri načrtovanju in kaže skozi .... Yuk!

No! da bi lahko z lahkoto popravite tako s prilagajanjem vaše Z indekse vrednosti primerno za FF in IE7. Dobro, ampak star (pun namenjena) IE6 ne obnašajo kot je bilo predvideno .... SELECT BOX kažejo skozi, tudi potem, ko ste uporabili nekaj drastično visoke Z indekse vrednosti ... tvoj PopUp Division Bummer!!

Ni določa za to težavo, vendar je po mojem mnenju, več kot nekaj poti v službo, to težavo, vendar im tukaj, da vam povem najpreprostejšo rešitev, ki ga uporabljam, ki deluje dobro za mene, v večini primerov ....

"Skrivanje Rouge SELECT polja, ko prikažete POPUP"

Preprosto v vašem scenarija izrezek, kjer pokažete svoje ljudstvo, dodamo košček scenarij za določitev prepoznavnosti oknu Izbira na "skritih"

document.getElementById ("my_select) style.visibilty =" skrito ".;

In ne pozabite, da ga je nazaj na koncu vašega pojavnih oddelka

. document.getElementById ("my_select) style.visibilty =" vidni ";

kjer "my_select" je ID za draženje oknu Izbira

Upam, da to pomaga ...

PS. Obstajajo tudi druge možnosti, kot gredo zraven dinamično positionining tudi IFRAME (enake velikosti, kot ste PopUp) v pojavnem DIV ... To dobro deluje preveč, vendar z dodatkom kupe DOM elementov, skripte in glavobolom. Imam uporabljajo to rešitev, preveč, in če vam potrebujete pomoč pri tej možnosti, pa mi sporočite. Bodo z veseljem pomagali!

brez pripomb | Tags: in in in in | posted brskalnika quirks in CSS in HTML , JavasScript

NDK domov | Ki ga izraža | Izražanje Okus | Izražanje Penmenship | Izražanje Awe | Izražanje Sebe