2010 04 maaliskuu 2010

Linjaaminen valintanappi tekstin

Koska valintanappia ja teksti ovat inline, niin teksti tasataan itsensä pohjaan valintanapin, teksti näyttää olevan hieman alle valintanappi.
Jos haluat nämä yhdenmukaistaa alkuun, sinun täytyy asettaa radion ja teksti erillisiin säiliöihin, kuten divs tai jännevälit (tarvittaessa) ja he hoitavat yhdenmukaistaminen. Olisi helpompaa käyttää taulukon soluihin myös oman suunnittelu lyhyt sallii sen.

Tämä ei näytä samalta jokaisessa selaimessa, koska jokainen selain näyttää radiot hieman eri tavalla, joten siellä tulee aina olemaan kooltaan asioita mitä teet.

ei kommentteja | lähetetty selaimessa koukero , HTML

2010 08 tammikuu 2010

Mitä HTML5 tuo?

HTML5 on vielä luonnos. Kun kirjoitan, Työ HTML 5, joka alkoi vuonna 2004, on edelleen antaa muodon yhteisillä toimilla W3C HTML WG ja WHATWG . Sana on, että seuraavan sukupolven HTML on parannuksia ja ominaisuuksia, joita olisi uusi rakenne ja semantiikka, lomake, API, multimedia tunnisteet jne..

Yksinkertaisissa Englanti ... mitä se merkitsee meille UI kehittäjille ...

  • Siellä tulee myös rakenteellisten tunnisteet eli. <article>, <section>, <header>, <aside> ja <nav>, joka korvaisi suurimman osan <div> s käytetään web-sivulle, mikä sivusi hieman semanttinen, mutta mikä tärkeintä, helpommin lukea.
    Hei! Kuvittele vaivaa tallennetaan seikkaan, että yhden puuttuvan lähes DIV tag.
    esim. 
  <body>
   <header> ... </ header>
   <nav> ... </ NAV>
   <article>
     <section>
       ...
     </ Osa>
   </ Artikkeli>
   <aside> ... </ sivuun>
   <footer> ... </ alatunniste>
 </ Body>

Sen sijaan, että 

  <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>
  • With kynnyksellä ääni-ja videosisältöä, kuten YouTube, käyttö sulautettujen multimedia verkkosivun ovat increaded by kertaiseksi. Kun tämä otetaan huomioon, nyt on tarkoitus lisätä natiivin tuen upottamisen video-ja audio-selaimeen itse, joten käyttäjät voivat toistaa, keskeyttää, pysäyttää, etsiä ja säätää äänenvoimakkuutta builtin DOM API skriptejä ohjata toistoa.

esim. 

  <video poster="poster.jpg">
     <Source src = "video.3gp" type = "video/3gpp"
     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>
  • Paremmin määritelty semanttiset roolit nykyistä elementtejä mm. <strong> ja <em> voi nyt todellakin olla erilaisia ​​merkityksiä eli ne käyttäytyvät eri tavalla.

On monia muitakin muutoksia / päivityksiä uudempaan versioon ... Päivitämme tätä virkaa olen törmännyt mitään kiinnostavaa hyötyä niistä .... Tilaihme

Tätä asiakirjaa ei saa antaa tarkkoja tietoja HTML 5 eritelmä on edelleen aktiivisesti mukana kehittämisessä. Jos olet epävarma, tarkista aina HTML 5 eritelmä täällä .

1 comment | tags: | posted in HTML

2009 18 lokakuu 2009

HTML & XHTML

  • Document Type julistuksessa on oltava läsnä alussa asiakirjan, joka käyttää HTML-syntaksia. Sitä voidaan valinnaisesti käyttää sisällä XHTML syntaksi, mutta se ei ole välttämätöntä. XHTML asiakirjaa ei tarvitse sisällyttää DOCTYPE koska XHTML asiakirjat toimitetaan oikein käyttämällä XML MIME tyyppi ja käsitellään XML-selaimissa on aina suoritettu ei quirks tilassa.
  • XHTML-tagi nimet ovat isot ja määritellään yleensä on kirjoitettu pienillä kirjaimilla. HTML kuitenkin tag nimet eivät ole tunteettomia, ja voidaan kirjoittaa isoja tai isoja, mutta yleisin yleissopimus on kiinni pieniä. Jos alku ja loppu tagit ei tarvitse olla sama, mutta johdonmukainen ei tee koodi näyttää puhtaampaa.

Etuja käyttämällä HTML

  • Taaksepäin yhteensopiva nykyisten selainten
  • Tekijät tuntevat jo syntaksia
  • Lieviä ja anteeksiantava syntaksi sitä ei tule käyttäjän vihamielinen " Yellow Screen of Death ", jos virhe vahingossa liukastuu kautta
  • Kätevä pika syntaksi, kuten kirjoittajat voivat jättää osan tunnisteet ja määreet

Etuja käyttämällä XHTML

  • Tiukka XML syntaksin kannustaa kirjoittamaan hyvin muodostuneita markup, jota jotkut kirjoittajat saattavat löytää helpompi ylläpitää
  • Integroituu suoraan muiden XML-sanastojen, kuten SVG-ja MathML
  • Mahdollistaa käytön XML Processing, jota jotkut kirjoittajat käyttävät osana muokkaus ja / tai julkaisemalla prosesseja

no comments | tags: | lähetetty HTML - Web Developer

2009 24 maaliskuu 2009

Ei ole käytössä = "true" ja käytössä = "false" sama?

Tässä niistä old school, mutta kuten tavallista, se on minun muisti lisä ...
Joten ei ole käytössä = "true" ja käytössä = "false" sama? Kyllä
... Älä usko, hyvin! thats miten se on ... täällä on muutamia nopeita selitys ...
"Pois päältä" on ominaisuus minkäänlaista elementin / kenttä, ja näin ollen voi hyväksyä arvoa luonteeltaan.

Niin kauan kuin tämä määrite on läsnä, elementti poistetaan käytöstä riippumatta sen arvosta. esim..
<input type="text" value="This on disabled" disabled>
<input type="text" value="This on disabled" disabled="disabled">
<input type="text" value="This on disabled" disabled="true">
<input type="text" value="This on disabled" disabled="false">

Kaikki edellä mainitut tekee tämän luetteloa "käytössä".

Yksinkertaisesti ei tuota määritettä "Disabled" pitää Field "ABLED" ... kuten alla

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

Muistakaa "Mikä tahansa arvo (tai lainkaan arvoa) vammaisten määritteen selain tekevät sen käytöstä". Jotta asiat selväksi mielessämme W3C suosittelee, että käytämme käytössä = "vammaiset" näissä tilanteissa.

Tämä ero kuitenkin kun käyttää tätä ominaisuutta javascript ...

document.form.element.disabled = true; / / elementti poistetaan käytöstä
document.form.element.disabled = false; / / elementti on käytössä

Edellä argumentit pätevät myös näiden attribuuttien:

  • tarkastetaan (valintanappi ja valintaruutu)
  • valittu (optio)
  • nowrap (td)

1 comment | tags: | lähetetty HTML - JavasScript

2008 17 joulukuu 2008

Mis-käyttäytyy IE8: CSS Layout katkenneita (kohdistaminen selainversiota käyttäen meta IE8)

Jos olet css henkilö, tietäisit kipua saada teidän asettelut toimivat rajat selaimen. IE8 on jälleen kapuloita teokset meille kehittäjille. Anywaz! Jos osut tätä kysymystä, kuten tein eilen, missä täydellisesti toimivat CSS IE7 (ja aiemmin) ja Firefox on yhtäkkiä alkanut heittää kiukuttelut IE8, kokeile ... Se kauniisti näytti korjata ongelmani tällä hetkellä ....

Käyttämällä Meta ilmoitus, voimme määrittää renderoija haluaisimme IE8 käyttää. Joten pakottaa IE8 tehdä kuin IE7 ... Lisää seuraavat Metakoodi osaksi pään sinun asiakirjan: -

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

Oletuksena IE Meta olisivat: -

<META http-equiv="X-UA-Compatible" content="IE=8" />
mikä tekisi IE8 tehdä sivulle uusia standardeja tilassa.

Haluttaessa syntaksi voidaan käyttää mahtuu muiden selaimien kuten alla:

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

MORE About DOCTYPES:

Jos et vielä tunne sellaista eläintä nimeltään "DOCTYPE" ... tässä on muutamia nopeita lukea
Mitä DOCTYPES? Mitkä ovat selain koukero & STRICT tila?
Asettaminen DOCTYPE on XSL

Saat syvällisempi ymmärrys DOCTYPES, voit käydä nämä linkit ...
List Apart: Fix sivustosi oikea DOCTYPE!
List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, ja IE8

Huomautus: Vaikka monet meistä HTML / CSS ihmiset ovat laiminlyönnistä merkitys DOCTYPE decleration meidän asiakirjojen asettaminen oikea DOCTYPE, yleensä vastauksen useimpiin eri selaimet.

1 comment | tags: , , , , | posted in Browser koukero , HTML

2008 04 lokakuu 2008

Katoaminen HTML / DIV elementtien Internet Explorer [IE]

Kuten tavallista, yksi monista outoja ongelmia IE, ja tämä on riveissä TOP 10 IE oikkuja.

ONGELMA RAHOITUSLASKELMA (Tämä oli minun ongelmani, ehkä sinulla vastaavia misbehaviors):
Minulla on monia DIV se on sivun class "sectionhead", joka on vain otsikko osio sivulla. Olen siis tyyliä tämännäköistä

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

Div on kevyt harmaa palkki mustalla tekstillä. Mitä tapahtuu IE on joitakin näistä osien otsikot näkyvät ok, mutta jotkut ovat näkymättömiä, kunnes selaat sivulta tai klikkaa jotain sivun jne. Joskus ne häviävät yleensä, kun klikkaa "alt-näppäintä, kun sivu alas tai selaa kanssa vierityspalkkia. Ne joskus tuntua näkyviin, kun lataat (f5) sivulla. Olen lyhyt aivan yksinkertaista DIV hieman yksinkertainen tyyli toimii BAD.
Mikä voisi aiheuttaa niin arvaamaton käyttäytyminen? No! Suoraan sanottuna NO IDEA!

MAHDOLLINEN RATKAISU:
Jälleen älä kysy miksi, mutta monissa tapauksissa tämä ongelma yleensä katoaa, kun lisäät asema: suhteessa mis käyttäytyvät elementit tyyliin, tähän tapaan

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

Weird mutta mitä sanoa? Jumala siunaa minua IE!

Ja jaamme Yhdysvaltain, JOS oli samanlaisia ​​ongelmia.

no comments | tags: , , , | posted in Browser koukero , CSS , HTML

2008 03 lokakuu 2008

Yksinkertainen, kevyt, Cross Browser valopöydälle oman verkkosivun

Ei siksi, että on olemassa vain muutamia LightBox n että löydät kun google. Asia useimpien valopöytien löysin oli se, että he kaikki näyttivät käyttää yhtä tai muun raskaan JAVASCRIPT puitteet kuten jQuery, prototyyppi, MooTools ja tykkää. Ne ovat kaikki hienoja ja upea näköinen. Mutta jos vaatimus on "Haluan HELPPO JA KEVYT LightBox SCRIPT FOR MY SITE", niin tässä se on;

Muutamia kivoja ominaisuuksia tämän lightboxiin

  1. Erittäin kevyt
    . 4KB skriptejä pakattuna (8 kb ilman pakkausta)
    b.. 2 KB CSS
    c. Muutaman rivin HTML lightboxiin säiliön
  2. Helppo ymmärtää ja toteuttaa
  3. Voi olla useita valopöydät samalla sivulla.
  4. Sama lightboxiin kontteja käytetään osoittamaan, eri sisältö (joka on erikseen sisällytetty piilotettu divisioonaa sivulla), riippuen linkkiä / vaihtoehto napsautetaan.
  5. Automaattisesti keskittää itsensä, ottaen huomioon kaikki seikat, kuten Ikkunan korkeus ja leveys (resoluutiosta), sivu siirry määrästä ja korkeudella sisällön lightboxiin
  6. Testattu IE 7 & FF

Katso esittely |
Lataa Lightbox Lähde Zip (Downloaded 1804 kertaa)

Käyttämällä Lightbox [Tiedostot zip-tiedosto]

jo.js, jo_pack.js [pakattu versio]: - yksinkertaisia ​​JAVASCRIPT ESINEET [JO], joka sisältää elementti, ikkuna-ja asiakirja paikannus skriptejä. Voit avata JO.JS jos haluat saada kädet likainen joidenkin Advanced Javascripting, luoda abstrakti toimintojen laajentaminen elementin ominaisuuksia ja tällaisia. Jos et ole liikaa Javascripting, jätä se rauhaan.

lightbox.js, lightbox_pack.js [pakattu versio] - sisältävät valolaatikosta johtaja skriptejä. Jos sivun suunnittelija, vastaa myös toimeenpanossa lightboxiin sivulla, sinun täytyy ymmärtää LightBoxManager. LightBoxManager periaatteessa sisältää vain kaksi tehtävää showLightBox ja closeLightBox.

lightbox.css: - Jos tunnet CSS, voit leikkiä lightbox.css mukauttaa look-n-tuntuu lightbox.css

index.html: Näyte täytäntöönpano lightboxiin kaksi erilaista sisältöä

lb_underlay_bkg.png: - Tämä on kevyt / samankal läpinäkyvä kuva, jota käytetään taustalla lightboxiin Aluskatteen [Alusta on kerroksen alla lighbox, joka estää käyttäjää klikkaamalla muulta sivulta, kun lightboxiin on auki]. Voidaan käyttää mitä tahansa kuvan tai jopa yksivärinen tätä tarkoitusta varten, riippuen sivu suunnitteluun ja vaatimus.

icon_lb_close.gif: - kuva lähes lightboxiin kahva oikeassa yläkulmassa Valolaatikko. Voiko käyttää mitä tahansa kuvaa kohti suunnitteluun

Katso esittely |
Lataa Lightbox Lähde Zip (Downloaded 1804 kertaa)

Pyydämme teitä antamaan meille palautetta ja kommentteja ...

no comments | tags: , | posted in CSS , Downloads , HTML , JavasScript , UI Components

2008 04 syyskuu 2008

Kiinteä (Se pysyy paikallaan ikkuna-scroll) Page Blocks CSS Only

Tämä viesti voisi olla hyvä esimerkki lause "Opettaminen mummolle imeä munaa" ... Koska tämä on vain perus CSS jutut. Mutta niille, kuten huomaa minua, tämä voi olla siunaus valepuvussa. Ajattelin aina (voisin menettää työni sanoessani tämän), se oli vain mahdollista säilyttää osaan HTML-sivun sisällön STATIC (merkityksen, sen asema säilyy vieraslajien Window Scroll), käyttäen joitakin älykkäitä skriptejä, Doing kaikki tieteelliset laskelmien löytää dynaamista asentoon, ansastusta Window.scroll tapahtumia ja aikakatkaisut jne.

Uskonut, että voisi yhtä yksinkertaista kuin tämä .... Täällä CSS / HTML alla, minulla on neljä staattista korttelin, yksi kiinteä jokaiseen extrimities sivun, TOP, RIGHT, BOTTOM ja jäljellä ... turha sanoa ... voit valita yhden tai useamman tarvittaessa ...

CSS
. Staattinen {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; sijainti: ixed;
}
# Sisältö {margin: 100px 150px 0px 160px; reunusta: 1px solid # e6e6e6}

# Wrap-t {top: 0px background: # 33CC66, leveys: 100%; height: 55px;}

# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; reunusta: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px background: # 3333CC, leveys: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF, korkeus: 300px; width: 140px; reunusta: 2px solid # e6e6e6, oikea: 0;}

HTML
<div id="contents"> Sinä etusivu sisältö </ div>
<div id="wrap-b" class="static">
Staattinen sisältö sivulla alhaalla
</ Div>
<div id="wrap-t" class="static">
Staattinen sisältöä Sivun alkuun
</ Div>

<div id="wrap-l" class="static">
Staattinen sisältö sivulla vasemmalle
</ Div>
<div id="wrap-r" class="static">
Staattinen sisältö sivulla oikealla
</ Div>

Näytä wroking näyte täällä

no comments | tags: | posted in CSS , HTML

2008 02 syyskuu 2008

CSS hack: Javascript, CSS, HTML ja vain Firefox

Monta kertaa me tunnemme tarvetta kirjoittaa selaimeen pyrkien hakata (vaikka se ei ole hyvä käytäntö, meillä UI kehittäjät turvautua niin pahaa, kunnes suuri Selaimet Wars tulee aselepo). Aiemmin olin maininnut tässä artikkelissa Oman IEs vain , kuinka kirjoittaa CSS-pätkä, joka näkyisi IE-selaimissa <IE7 vain.

Eilen minulla oli tapaus, jossa halusin kirjoittaa joitakin FireFox CSS määritellään katkelmia. No! En ole varma, onko CSS koodi tähän, mutta on HTML. On CATCH vaikka tämä pala HTML doesnot pass HTML validointi. Mutta, anywaz! Jos olet juuttunut pahasti tai sellaisenaan, ole-osalta validointi (joskus meidän täytyy olla julma), voit käyttää seuraavia julistaa linkin FF vain tyylitiedoston tai edes koodata CSS tämän lohkon. Koodi on

<comment> Laita vain Firefox HTML / CSS / Scripts täältä </ comment>

esim.
<comment>
<style>
/ * Styles FF vain * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comment>

I "m iloinen hetki ...

no comments | tags: , , | posted in Browser koukero , CSS , HTML , JavasScript

2008 15 maaliskuu 2008

Ärsyttää Valitse laatikot näkyy läpi Popup alueet

Useasti, kun teet sivuasettelut kanssa popup osastojen / valopöytien / Vinkkejä jne. Olemme törmänneet tilanteisiin, joissa jonkinlainen Valitse objektit sattuu olemaan näissä POPUP toimialojen suunniteltu ja se näkyy läpi .... Yök!

No! voit helposti korjata tämän muuttamalla Z-indeksin arvot asianmukaisesti FF ja IE7. Mutta Good Old (pun tarkoitettu) IE6 ei toimi tarkoitetulla tavalla .... SELECT BOX näkyy läpi, vaikka asentamisen jälkeen jotkut rajusti korkea Z-INDEX arvoja ponnahdusikkunoiden Division ... Bummer!!

EI ole PISTEET tähän ongelmaan, mutta uskoakseni enemmän kuin muutama työmatka-kiertää tämän ongelman, mutta Im täällä kertoa yksinkertaisin ratkaisu, jota käytän, joka toimii hyvin minulle, useimmissa tapauksissa ....

"Piilota ROUGE SELECT BOX Kun näytät POPUP"

Yksinkertaisesti sinun script katkelmassa, jossa näytät popup, lisää pala käsikirjoituksen asettaa näkyvyyttä SELECT Box on "näkymätön"

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

Muista asettaa se takaisin päättyessä ponnahdusikkunoiden Division

document.getElementById ("my_select '). style.visibilty =" näkyvä ";

missä "my_select" on tunnus ärsytystä SELECT Box

Toivottavasti tämä auttaa ...

PS. On tietysti muita vaihtoehtoja, kuten dynaamisesti positionining IFRAME (samaa kokoa kuin sinä PopUp) mukaan Popup DIV ... Tämä toimii hyvin myös, mutta lisätty kuormien DOM Elements, skriptit ja päänsärky. Olen käyttänyt tätä ratkaisua myös, ja jos et tarvitse mitään apua tämän vaihtoehdon, älä kerro minulle. On ilo auttaa!

no comments | tags: , , , , | posted in Browser koukero , CSS , HTML , JavasScript

NDK home | Ilmaiseminen IT | ilmaiseminen Palate | ilmaiseminen Penmenship | ilmaiseminen Awe | ilmaista itseäni