2010 Mar 4 2010

, Lygiavimas radijo mygtuką su tekstu

Kadangi radijo mygtuką ir tekstas yra inline, kad tekstas bus suderinti mygtuką apačioje, tekstas atrodo šiek tiek pagal mygtuką.
Jei norite suderinti į viršų, jūs turėsite radijo ir tekstą į atskirus konteinerius, pavyzdžiui, DIV ar driekiasi (atitinkamai) ir jie rūpinsis derinimą. Būtų lengviau naudoti lentelės langelius, jūsų dizainas trumpas, tai leidžia.

Tai neatrodo pats kiekvienoje naršyklėje, nes kiekviena naršyklė rodo radijo šiek tiek skirtingai, todėl visada bus dydžio klausimus, nesvarbu, ką jūs darote.

Nėra komentarų | posted in Browser Photoshop , HTML

2010 Sau 8 2010

Kokia bus "HTML5 atnešti?

"HTML5 yra dar projektas. Kaip aš rašau, Darbas HTML 5, kuris prasidėjo 2004 metais, vis dar yra bendromis pastangomis tarp W3C HTML WG ir WHATWG, šiek tiek skiriasi . Žodis yra tai, kad šalia Geną HTML turės priedus ir funkcijas, kurios naujoji struktūra ir semantika, formos valdiklių, API, multimedijos žymes ir tt.

Paprasta anglų kalba ... ką tai reiškia, kad mus UI kūrėjams ...

  • Yra papildymas kai kurios struktūrinės žymes viz. <article>, <section> <header>, <aside>, ir <nav>, kuris pakeis <div> s dalį, naudojamą interneto puslapyje, kad jūsų puslapiuose šiek tiek daugiau semantinis, bet dar svarbiau, lengviau skaityti.
    Sveiki! Tik įsivaizduokite, kaip rasti tą vieną trūkstamą glaudų DIV tegus pastangas išsaugoti.
    pvz. 
  <body>
   <header> ... </ Pavadinimas>
   <nav> </ NAV>
   <article>
     <section>
       ...
     </ Section>
   </ Article>
   <aside> ... </ nuošalyje>
   <footer> </ poraštės>
 </ Body>

Vietoj 

  <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>
  • Su garso ir vaizdo turinio, pavyzdžiui, "YouTube", įdėtąją multimediją tinklalapio naudojimo atsiradimo increaded kartus. Atsižvelgiant į tai, dabar planas yra pridėti gimtoji paramą įtraukiant vaizdo ir garso į naršyklę, todėl leidžia vartotojams žaisti, pauzė, stabdyti, ieškoti, ir reguliuoti garsą, naudojant builtin DOM API scenarijų kontroliuoti atkūrimą.

pvz. 

  <video poster="poster.jpg">
     <Šaltinis src = "video.3gp" type = "video/3gpp"
     žiniasklaida = "rankinis">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Garso>
  • Geriau apibrėžta semantinius vaidmenis esamų elementų pvz. <strong> ir <em> dabar iš tikrųjų gali turėti skirtingas prasmes, ty jie elgsis skirtingai.

Yra daug daugiau pakeitimų atnaujinimus naujausią versiją ... Ar nuolat atnaujinti šį pranešimą, nes aš atėjau šakų visame bet įdomių naudingų tie .... Stebėkite šią erdvę

Šis dokumentas gali pateikti tikslią informaciją, kaip HTML 5 specifikacija vis dar aktyviai kuriama. Jei abejojate, visada patikrinkite HTML 5 specifikacija čia .

1 komentaras | tags: | parašė į HTML

2009 Spa 18 2009

HTML ir XHTML

  • Dokumento tipas deklaracija turi būti pateikti dokumente, kuris naudoja HTML sintaksę pradžioje. Pasirinktinai gali būti naudojama per XHTML sintaksė, bet ji neprivalo. XHTML dokumentas nereikia įtraukti į DOCTYPE nes XHTML dokumentai, kad būtų pateikta teisingai naudojant XML MIME tipą ir tvarkomi kaip XML naršyklėse, visuomet teikiamos be Photoshop režimu.
  • XHTML tegus pavadinimai yra didžiosios ir mažosios raidės ir paprastai yra apibrėžta, turi būti parašytas mažosiomis raidėmis. HTML tegus vardai didžiąsias ir mažąsias raides ir galima rašyti visas didžiąsias arba mišri atveju, nors labiausiai paplitęs konvencija yra klijuoti su mažosiomis raidėmis. Pradžios ir pabaigos žymes atveju neturi būti tokia pati, bet nuosekliai, kad kodas atrodo švaresnis.

NAUDA naudojant HTML

  • Atgaliniai suderinama su esamų naršyklių
  • Autoriai jau yra susipažinę su sintaksę
  • Atlaidus ir atlaidus sintaksė reiškia, kad nebus naudoti priešiškas " Geltona Screen of Death ", jei klaida atsitiktinai slysta per
  • Patogus sutrumpinimas sintaksė, pvz. Autoriai gali praleisti kai kuriuos žodžius ir atributų reikšmių

Privalumai XHTML

  • Griežtai XML sintaksė skatina autorius rašyti gerai suformuotą žymėjimą, kai kurie autoriai gali rasti lengviau išlaikyti
  • Tiesiogiai integruojasi su kitomis XML žodynų, pavyzdžiui, SVG ir MathML
  • Leidžia naudoti XML apdorojimo, kurią kai kurie autoriai naudoja kaip dalį jų redagavimo ir (arba) leidybos procesų

Nėra komentarų | Žymos: | posted in HTML , Web Developer

2009 Kov 24 2009

Yra išjungtas = "true" ir neįgaliųjų = "false", jis pats?

Tai tie metai mokykloje, tačiau, kaip įprasta, ji yra mano atmintis papildas ...
Taigi yra išjungtas = "true" ir išjungtas = "fiktyviai"?
... Netikiu, gerai! Thats kaip ji ... čia yra šiek tiek trumpas paaiškinimas ...
"Neįgalus asmuo" yra bet kokios formos elemento srityje / atributas, ir todėl gali priimti bet kokią vertę, pagal savo pobūdį.

Tol, kol šis atributas yra elementas bus išjungtas, nepriklausomai nuo jos vertės. pvz.
<input type="text" value="To yra disabled" disabled>
<input type="text" value="To yra disabled" disabled="disabled">
<input type="text" value="To yra disabled" disabled="true">
<input type="text" value="To yra disabled" disabled="false">

Visa tai, kas išdėstyta pirmiau, ši forma laukas "Disabled".

Tiesiog neteikia atributą "NEĮGALIEJI" saugo Lauko "ABLED" ..., kaip nurodyta toliau

<input type="text" value="To yra ne disabled", />

Prisiminti "atributo neįgaliesiems jokios vertės, ar ne vertė ne visi), naršyklė kad ji išjungta". Kad viskas būtų aišku, mūsų protai W3C rekomenduoja, kad mes naudojame išjungtas = "neįgaliesiems" šiose situacijose.

Tai yra skirtumas nors, kai mes naudoti šį požymį, javascript ...

document.form.element.disabled = true; / / elementas bus išjungtas
document.form.element.disabled = false; / / elementas, bus įjungta

Minėti argumentai taip pat yra tiesa, dėl šių savybių ir elementų:

  • patikrinta (radijo mygtuką ir langelius)
  • pasirinktas (galimybė)
  • nowrap (td)

1 comment | tags: | posted in HTML , JavasScript

2008 2008 Gru 17 d.

Netinkamo elgesio IE8: CSS Layout įtrūkimų, Nukreipimas naršyklės versiją, naudodami meta žymeles IE8)

Jei esate CSS asmuo, turėtumėte žinoti, gauti savo maketus darbo įvairių naršyklių skausmą. IE8 yra dar vienas veržliaraktis mus kūrėjų darbais. Anywaz! jei paspausite ant šio klausimo, Kaip aš padariau vakar, kur yra jūsų puikiai dirba CSS IE7 (ir anksčiau) ir Firefox staiga pradėjo mėtyti tantrums IE8, pabandykite šį ... Jis gražiai atrodė, kad išspręsti savo problemas šiuo metu ....

Naudojant meta deklaracijos, mes galime nurodyti atvaizdavimo variklį, mes norėtume IE8 naudotis. Taigi, norint priversti IE8 padaryti kaip IE7 ... Įdėkite šį meta žymeles į savo dokumentą galvos: -

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

Pagal nutylėjimą IE meta būtų: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
padaryti IE8 padaryti puslapį naudojant naujus standartus režimą.

Jei reikia, ši sintaksė gali būti naudojami apgyvendinti kitų naršyklių, kaip nurodyta toliau:

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

Smulkiau apie DOCTYPES:

Jei esate dar susipažinę su gyvūno rūšies, vadinamas "DOCTYPE" ... čia yra kai greitai skaityti
Kas yra DOCTYPES? Kas yra Naršyklės Quirks & ABSOLIUČIĄ Mode?
DOCTYPE XSL nustatymas

Į išsamų supratimą apie DOCTYPES, pabandykite aplankyti šias nuorodas ...
A List Apart: Fix Teisė DOCTYPE savo svetainę!
A List Apart: Beyond DOCTYPE: Web Standartai, nusiųsti Suderinamumo ir IE8

Pastaba: Nors daugelis iš mūsų HTML / CSS žmonės buvo atsižvelgiama DOCTYPE decleration svarbą mūsų dokumentus, Tinkamo DOCTYPE, paprastai atsakymas į labiausiai kryžminių naršyklės klausimais.

1 komentaras | tags: paskelbtas naršyklės Photoshop , HTML , , , , |

2008 Oct 4 2008

Znikaj HTML / DIV elementai internetu Explorer [IE]

Kaip įprasta, vienas iš daugelio keistų problemų su IE ir tai vienas misą gretas Top 10 IE Photoshop.

PROBLEMA ATASKAITA (Tai buvo mano problema, gal turite panašių misbehaviors):
Turiu daug DIV tai su klasės "sectionhead", puslapyje, kuriame yra nieko, bet pavadinimas puslapyje skyriuje. Taigi aš kai stilius atrodo taip

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

Div šviesiai pilka juosta su kai juodu tekstu. Kas nutinka, IE, yra kai kurie iš šių skyrių antraštėse rodomi ok, bet kai kurie yra nematomi, kol jūs slinkite puslapį arba spustelėkite ką nors puslapio ir pan. Kartais jie linkę dingti, kai paspausite 'Alt "klavišą, kai jūs puslapis arba slinkti su slinkties juostos. Kartais atrodo, kad vėl atsiras, kai perkrauti (F5) puslapį. Aš trumpas visiškai paprastas DIV su paprasta stiliaus elgiasi blogai.
Kas galėtų sukelti tokį chaotiškai elgesį? Gerai! Atvirai kalbant, ne idėja!

GALIMI SPRENDIMO:
Nepakanka paklausti manęs kodėl, tačiau daugeliu atvejų ši problema paprastai išnyksta, jei norite pridėti poziciją: palyginti su IVS elgiasi elementų stilių, kaip tai

. Sectionhead {font-size: 18px; fonas: # cfcfcf; padding: 5px; padėtis: santykinis}

Keista, bet ką pasakyti? Dievaži iš IE!

IR DO Pasidalink su JAV, jei turite panašių problemų.

Nėra komentarų | tags: , , , | posted in Browser Photoshop , CSS , HTML

2008 Oct 3 2008

Paprastas, lengvas, kryžius Naršyklė švieslentė jūsų svetainei

Ne todėl, kad yra tik keletas švieslentė, kad jūs galite rasti, kai jūs google. Su dauguma švieslentes, kad aš rasiu problema buvo ta, kad jie visi atrodė, kad naudoti vieną ar kitų sunkiųjų svorio JavaScript bazės, pavyzdžiui, JQuery, prototipas MooTools ir pan. Jie visi yra kietas ir swanky ieškote. Bet jeigu jūsų reikalavimas yra "Bet aš noriu paprastas ir lengvas švieslentės Mano svetainė" scenarijų, tada čia yra;

Keletas naudingų funkcijų šio švieslentę

  1. Labai lengvas
    a. 4KB scenarijų, kai supakuotiems 8 KiB išpakuota)
    b. 2 kb CSS
    c. Keletas eilučių HTML švieslentės konteinerį
  2. Paprasta suprasti ir įgyvendinti
  3. Gali turėti keletą švieslentes tame pačiame puslapyje.
  4. Pats švieslentę konteineris yra naudojamas norint parodyti kitokį turinį, kuris yra atskirai įtrauktos kaip paslėptų padalinių puslapio), priklausomai nuo to, kad yra paspaudėte nuorodą / option.
  5. Automatiškai centrų, atsižvelgiant į visus veiksnius, pvz., Lango aukštis ir plotis ekrano skiriamoji geba), puslapio slinkties suma ir švieslentę turinį aukštį
  6. Išbandyta 7 IE ir FF

Žiūrėti Demo |
Parsisiųsti švieslentė Šaltinis Pašto (Siuntėsi 1797 kartus)

Naudojant švieslentė [Failai zip faile]

jo.js, jo_pack.js [supakuoti versija]: - objektai Javascript paprastas nustatyti [: JO], kuriame yra elementas, langą ir dokumentų padėties scenarijus. Jūs gali atidaryti JO.JS, jei norite gauti savo rankas purvinas su kai kurių pažangių Javascripting, kuriant abstrakčias funkcijas, išplečiant elementų savybės ir tokių. Jei jūs ne per daug, Javascripting Palikite jį ramybėje.

lightbox.js, lightbox_pack.js [supakuotas versija]: - šviesos dėžės menedžeris scenarijus. Jei esate projektuotojas, taip pat atsakingas įgyvendinimo švieslentę puslapyje, jums reikia suprasti LightBoxManager. LightBoxManager iš esmės yra tik dvi funkcijos showLightBox ir closeLightBox.

lightbox.css: - Jei žinote, CSS, galite pažaisti su lightbox.css pritaikyti išvaizdos n--jaustis lightbox.css,

index.html: pavyzdys su dviem skirtingo turinio švieslentę įgyvendinimas

lb_underlay_bkg.png: - Tai lengvas / Simi skaidrus vaizdas, kuris yra naudojamas švieslentės dangą fonas [Pagrindas yra žemiau į lighbox, sluoksnis, kuris apsaugo vartotoją spustelėdami bet kurio kito subjekto puslapyje, o švieslentę yra atvira]. Galite naudoti bet kokį atvaizdą ar net kietas spalvų šiam tikslui, priklausomai nuo puslapio dizaino ir reikalavimo.

icon_lb_close.gif: - glaudžiai švieslentės rankena įvaizdis šviesos lango viršuje, dešinėje. Galima naudoti bet kokį vaizdą kaip už dizainą

Žiūrėti Demo |
Parsisiųsti švieslentė Šaltinis Pašto (Siuntėsi 1797 kartus)

Prašome leiskite mums turėti savo komentarus ir atsiliepimus ...

Nėra komentarų | Žymos: , | Posted CSS , Downloads , HTML , JavasScript , UI komponentai

2008 Sep 4 2008

Ilgalaikis (Tai yra statinis lange pereikite) Page blokai naudojant CSS tik

Šis pranešimas gali būti geras pavyzdys frazė "Mokymo močiutė čiulpia kiaušinius" ... Priežastis tiesiog PAGRINDINIS CSS Daiktai. Bet tiems, kaip pamiršo mane, tai gali būti persirengęs palaiminimas. Aš visada maniau (aš galėtų prarasti savo darbą, sakydamas tai), tai buvo tik įmanoma išlaikyti šiek tiek HTML puslapio turinio STATINIAI dalį reikšmė, jo pozicija lieka KAIP YRA Window Scroll), naudojant kai kurių protingas scenarijus, Daro visi tie, mokslo skaičiavimai rasti dinamišką poziciją, gaudymas spąstais Window.scroll įvykius ir nustatant pertraukas ir tt

Niekada maniau, kad galėtų būti taip paprasta, kaip .... Čia, CSS / HTML, esantį žemiau, turiu keturis statinės blokų, vienas, pritvirtintas prie kiekvienos puslapio extrimities,, TOP, dešinės, apačios ir kairės ... Nereikia nė sakyti ... galite pasirinkti bet kurio iš jų ar daugiau, jei reikia būti ...

CSS
Statinis {kalbomis: blokas, z-index: 10; spalva: # FFFFFF; overflow-x: paslėptas; perpildymo Y: paslėptas; padėtis: ixed;
}
# Turinys {margin: 100px 150 vaizdo elementų 0px 160px; border: 1px solid # e6e6e6}

# Wrap-t {viršų: 0px background: # 33CC66; plotis: 100%, aukštis: 55 taškų;}

# Wrap-l {top: 80px; background: # FF9966; aukštis: 300px; plotis - 150 vaizdo elementų; siena: 2px kietas # e6e6e6;}

# Wrap-b {apačioje: 0px; fonas: # 3333CC, plotis: 100%, aukštis: 55 taškų;}

# Wrap-r {top: 80px; background: # 6666FF; aukštis: 300px; Plotis: 140px; siena: 2px kietas # e6e6e6; teisę: 0;}

HTML
<div id="contents"> titulinis turinys </ div>
<div id="wrap-b" class="static">
Puslapio apačioje Statiškas Turinys
</ Div>
<div id="wrap-t" class="static">
Statiškas Turinys Page Į viršų
</ Div>

<div id="wrap-l" class="static">
Statiškas Turinys Page paliko
</ Div>
<div id="wrap-r" class="static">
Statiškas Turinys puslapio dešinėje
</ Div>

Peržiūrėti wroking mėginį čia

Nėra komentarų | Žymos: | posted in CSS , HTML

2008 Sep 2 2008

CSS Hack: JavaScript, CSS, HTML tik "Firefox"

Daug kartų mes tikime, kad reikia parašyti naršyklės specfic hacks (nors tai nėra gera praktika, mes UI kūrėjai turi imtis tokių blogybių iki didžiųjų naršyklių karų ateina paliaubų). Anksčiau buvo minėta šiame straipsnyje, savo IES tik , kaip parašyti CSS kodo fragmentą, kad būtų matoma <IE7 tik IE naršyklėmis.

Vakar turėjau atvejį, kai aš norėjau parašyti šiek tiek Firefox specifinę CSS fragmentus. Gerai! Aš nesu įsitikinęs, jei yra CSS kodas, bet yra HTML Yra sugavimo Nors, šis HTML doesnot pass HTML patvirtinimo aktas. Tačiau, anywaz! Jei jūs negalite išeiti blogai ar kaip, pavyzdžiui, neturi-linkėjimus Įteisinimas (kažkada mes turime būti žiaurus), galite naudoti šiuos paskelbti nuorodą į FF tik stilių ar net tiesiog kodas CSS per šio bloko. Kodas

<comment> Įdėkite savo "Firefox" tik html / css / Skriptai čia </ comment>

pvz.
<comment>
<style>
/ * Stiliai tik FF * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Komentaras>

Aš laimingas metu ...

Nėra komentarų | tags: , , | Posted naršyklės Photoshop , CSS , HTML , JavasScript

2008 Kov 15 2008

Dirgina Pasirinkite Dėžės, matomas per Popup skyrių

Kelis kartus, o daro puslapio maketus su iššokantį padalinių ir (arba) švieslentes gudrybės ir tt mes susidurti su atvejais, kai tam tikra forma pasirinkti objektus vyksta pagal šių POPUP skyrių, projektavimo ir ji rodo per .... Yuk!!

Gerai! galite lengvai išspręsti šią problemą nustatydami Jūsų Z indekso reikšmių tinkamai FF ir IE7. Bet senas geras (pun intended) IE6 neturi elgtis taip, kaip numatyta .... PASIRINKITE LANGELIS šou, net po to, kai taikote keletą drastiškai aukštos Z indekso reikšmių iškylančių langų skyrius ... velnias!!!!

Yra NE KOREKCIJOS šią problemą, tačiau, manau, daugiau nei keletą pakeliui į darbą, apie šią problemą, bet jiems čia pasakyti paprasčiausią sprendimą, kad aš naudoju, kuris veikia gerai man, į labiausiai iš atvejų ....

"Slėpti Rouge SELECT lauke, jei jūs Rodyti popup"

Tiesiog jūsų scenarijų fragmentą, kur jūs parodysite savo iššokantį pridėti scenarijų gabalas nustatyti SELECT Box "matomumą" slaptų "

document.getElementById ("my_select) style.visibilty =" paslėptas ".;

Ir prisiminti jį atgal ant CLOSE iškylančių langų skyriaus

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

kur "my_select" yra dirginimo SELECT langelyje ID

Hope this helps ...

PS. Yra Žinoma kitos galimybės, pavyzdžiui, ir dinamiškai positionining pagal iškylančių langų DIV IFRAME pat dydžio kaip iškylančių) ... Tai veikia taip pat gerai, bet to apkrovų DOM elementų, skriptus ir galvos skausmas. Aš naudoju šį sprendimą, Jei jums reikia pagalbos su šia galimybe, tai let me know. Bus malonu Jums padėti!

No comments | tags: , , , , | posted in Browser Photoshop , CSS , HTML , JavasScript

NDK namo | Išreikšdami IT | Išreikšti paletė | Išreikšti Penmenship | Išreikšti Awe | Išreikšti Pats