2010 4. ožujka 2010

Usklađivanje radio gumb s tekstom

Budući da je radio gumb i tekst su u liniji, tako da tekst će se poravnati na dno radio gumb, tekst će se pojaviti biti malo pod radio gumb.
Ako želite to poravnati na vrhu, morat ćete staviti radio i tekst u zasebne kontejnere kao što divs ili premošćuje (prema potrebi) i oni će voditi brigu o usklađenosti. Bilo bi lakše koristiti tablice stanice previše, je vaš dizajn kratak to dopušta.

To neće izgledati isto u svakom browseru, kao i svaki preglednik prikazuje radio malo drugačije, tako da je uvijek će biti veličine problema bez obzira na to što radite.

nema komentara | Posted in Browser Igra riječima , HTML

2010 8 siječanj 2010

Što će HTML5 donijeti?

HTML5 je još uvijek nacrt. Kao što sam pisati, Rad na HTML-u 5, koji je započeo u 2004, još uvijek se daje oblik koje zajednički napor između W3C HTML RS i WHATWG . Riječ je da će se sljedeći HTML gen imat će poboljšanja i značajke, što bi nova struktura i semantika, oblik kontrole, API, multimedija oznake itd..

U jednostavnom engleskom jeziku ... što bi značilo da nas UI programere ...

  • Tu će se dodatak od neke strukturne oznake viz. <article>, <section>, <header>, <aside> i <nav>, koji će zamijeniti većinu <div> ih koristi na web-stranici, čineći vaše stranice malo više semantičku, ali je još važnije, lakše čitati.
    Hej! Zamislite napor spremljene u nalaz da nedostaje jedan bliski DIV tag.
    npr. 
  <body>
   <header> ... </ zaglavlje>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Dio>
   </ Članak>
   <aside> ... </ strani>
   <footer> ... </ podnožje>
 </ Body>

Umjesto 

  <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>
  • Pojavom audio i video sadržaja kao što su YouTube, korištenje ugrađenih multimedija na web-stranici je increaded strane puta. Uzimajući to u obzir, sada planira dodati podršku za ugradnju rodni video i audio u samom pregledniku, stoga dopustiti korisnik to play, pause, stop, tražiti, i podesite glasnoću pomoću Ugrađen DOM API-ja za skripte za kontrolu reprodukcije.

npr. 

  <video poster="poster.jpg">
     <Izvor src = "video.3gp" type = "video/3gpp"
     Mediji = "ručni">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio>
  • Bolje definirane semantičke uloge postojećih elemenata za npr.. <strong> i <em> sada zapravo može imati različita značenja, odnosno oni će se ponašati drukčije.

Postoji mnogo više promjena / nadogradnje na noviju verziju ... Hoće li zadržati ažuriranja ovaj post kao što sam naići sve one zanimljive korisni .... Pogledajte ovaj prostor

Ovaj dokument se ne može dati točne informacije kao HTML 5 specifikacija je još uvijek aktivno u razvoju. Kada su u nedoumici, uvijek provjerite specifikacije HTML 5 ovdje .

1 comment | Tags: | posted in HTML

2009 18. listopada 2009

HTML i XHTML

  • Deklaracija Document Type treba biti prisutan na početku dokumenta koja koristi HTML sintaksu. Po izboru se može koristiti u XHTML sintaksi, ali to nije potrebno. XHTML dokument ne treba uključiti DOCTYPE jer XHTML dokumenti koji se isporučuju ispravno pomoću XML MIME tip i obrađuju kao XML za preglednike, uvijek donesena ni u kojem Igra riječima modu.
  • U XHTML, oznake imena su velika i mala slova i obično se definira biti napisan malim slovima. U HTML-u, međutim, oznake imena su velika i mala slova, a može biti napisan u svim veliko ili mješoviti slučaj, iako je najčešći konvencija na štapiću, s malim slovima. Slučaj od početka i završetka oznakama ne moraju biti isti, ali se u skladu čini čistač kod izgled.

Prednosti Korištenje HTML

  • Unatrag kompatibilan s postojećim preglednicima
  • Autori su već upoznati sa sintaksom
  • Blag i prašta sintaksa znači da neće biti user-neprijateljske " Žuta boja Zaslon od Smrt ", ako pogreška slučajno klizi kroz
  • Zgodan sintaksa stenogram, npr. autori mogu izostaviti neke oznake i vrijednosti atributa

Prednosti Korištenje XHTML

  • Strogo XML sintaksa potiče autori pisati dobro oblikovan oznake, što neki autori mogu pronaći lakše održavati
  • Integrira izravno s drugim XML rječnika, kao što su SVG i MathML
  • Omogućuje korištenje XML obrade, što neki autori koriste kao dio njihove montaže i / ili objavljivanje procesa

nema komentara | Tags: | posted in HTML i Web Developer

2009 24. ožujak 2009

Onemogućen = "true" i osobe s invaliditetom = "false", isti?

Ovo one old school, ali kao i obično, to je moja memorija dodatak ...
Tako je onemogućen = "true" i osobe s invaliditetom = "false", isti? Da
... Ne vjerujem, dobro! taj način je to ... ovdje je neke brzo objašnjenje ...
"Onemogućena" je atribut bilo kojem obliku elementa / polja i stoga može prihvatiti nikakvu vrijednost po svojoj prirodi.

Dokle god ovaj atribut je prisutan, element će biti onemogućen bez obzira na njegovu vrijednost. 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">

Sve gore navedeno će to polje obrasca "Disabled".

Jednostavno ne pruža atribut "Disabled" drži Field "ABLED" ... kao što je ispod

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

Sjeti se "bilo koju vrijednost (ili ne vrijednost na sve) za osobe s invaliditetom atributa, preglednik će donijeti je onemogućen". Da bi stvari jasno u našim umovima W3C preporučuje da mi koristimo onemogućen = "osobe s invaliditetom" u takvim situacijama.

To je razlika da kad smo koristiti ovaj atribut u JavaScriptu ...

document.form.element.disabled = true / / element koji će biti onemogućen
document.form.element.disabled = false; / / element koji će biti omogućen

Navedeni argumenti su također vrijedi i za tih atributa i elementima:

  • provjeriti (radio gumb i okvir)
  • odabrani (opcija)
  • nowrap (td)

1 comment | Tags: | Posted in HTML i JavasScript

2008 17. prosinca 2008

Mis-ponašaju IE8: CSS Layout lomovima (Ciljanje preglednika verziju pomoću meta oznaka u IE8)

Ako ste css osoba, ti bi znati bol u uzimajući vaše izglede radnih cross-preglednik. IE8 je još jedan ključ u djelima za nas programere. Anywaz! ako pritisnete na ovom pitanju, kao što sam učinio jučer, gdje je vaš savršeno radno CSS u IE7 (i ranije) i Firefox odjednom počela bacati tantrums u IE8, probajte ovaj ... to lijepo izgledalo popraviti moje probleme za sada ....

Korištenje Meta izjavi, možemo odrediti rendering engine smo željeli IE8 koristiti. Tako na snagu IE8 donijeti kao IE7 ... Umetnite sljedeće meta oznaku u glavu dokumenta: -

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

Prema zadanim postavkama IE Meta će biti: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
što bi IE8 donijeti stranicu koristeći nove standarde rada.

Ako je potrebno, ova sintaksa može se koristiti za smještaj u drugim preglednicima kao ispod:

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

VIŠE O DOCTYPES:

Ako ste još uvijek nisu upoznati s vrstom životinja pod nazivom "DOCTYPE" ... ovdje je neke brzo čitanje
Što su DOCTYPES? Što su BROWSER quirks i strogom načinu?
Postavljanje DOCTYPE u XSL

Za više u dubinu razumijevanja o DOCTYPES, posjetite ove linkove ...
Popis Osim: Popravite svoje stranice s pravom DOCTYPE!
Osim Popis: Beyond DOCTYPE: Web standardi, Naprijed Kompatibilnost i IE8

Napomena: Iako mnogi od nas HTML / CSS ljudi su zanemarujući važnost DOCTYPE decleration u našim dokumentima, Podešavanje pravu DOCTYPE, obično je odgovor na većinu pitanja križ preglednika.

1 komentar | Tags: , i i i | Posted in Browser Igra riječima i HTML

2008 4. listopad 2008

Nestaju HTML / DIV elementi u Internet Explorer [IE]

Kao i obično, jedan od mnogih nekih čudnih problema sa IE i to se mora redova u TOP 10 u IE Igra riječima.

PROBLEM IZJAVA (Ovo je bio moj problem, možda imate slične misbehaviors):
Imam mnogo DIV je na stranici s klase "sectionhead", što je ništa drugo nego naslov dijela na stranici. Tako sam neki stil izgleda kao ovaj

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

Div je svijetlo siva bar s nekim crnim tekstom. Što se događa u IE je neke od tih sekcija zaglavlja prikazuju ok, ali neki su nevidljivi, sve dok se pomičete stranice ili kliknite na nešto na stranici itd. Negdje oni imaju tendenciju da nestanu kad kliknete na 'alt' ključ kada stranica dolje ili se pomaknite s trake za pomicanje. Oni se ponekad čini da se ponovno pojaviti kada se ponovno (F5) stranice. Sam kratko savršeno jednostavan DIV s nekim jednostavnim stilom ponaša loše.
Što bi moglo uzrokovati takvu čudno ponašanje? Dobro! Iskreno, pojma!!

MOGUĆE RJEŠENJE:
Opet ne pitajte me zašto, ali u mnogim slučajevima taj problem ima tendenciju da nestanu kada dodate Pozicija: u odnosu na prikrati ponašaju elementi stila, kao što je ovaj

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

Čudno, ali što reći? Bog Blagoslovi me od IE!

I DO Podijeli s SAD, ako je imao slične probleme.

nema komentara | Tags: i i i | Posted in Browser Igra riječima i CSS i HTML

2008 3. listopad 2008

Jednostavan, lagan, križ Browser Lightbox za svoju web stranicu

Nije da postoji samo nekoliko Lightbox je da možete pronaći kada google. Problem s većinom od lightboxes koje sam našao je da su svi oni kao da koristite jedan ili drugi težinom kao JavaScript okvire jQuery, Prototype i MOOTOOLS i voli. Oni su svi cool i swanky tražite. No, ako je vaš zahtjev "Ali ja želim jednostavan i lagani Lightbox skriptu za moje stranice", onda ovdje je;

Neki lijepo značajke ovog Lightbox

  1. Vrlo lagan
    . 4KB skripti kada pakirane (8 KB nespreman)
    b. 2 kb CSS
    c. Nekoliko redaka HTML-a za Lightbox kontejner
  2. Jednostavan za razumijevanje i provedbu
  3. Može imati više Lightboxes na istoj stranici.
  4. Isto Lightbox kontejner se koristi za pokazati, drugačiji sadržaj (koji se zasebno uključeni skrivenih odjeljaka po stranici), ovisno na link / mogućnost da se kliknuli.
  5. Automatski centri, uzimajući u obzir sve čimbenike kao što su, visine i širine prozora (Razlučivost zaslona), stranica dođite iznos i visina sadržaja Lightbox
  6. Ispitano u IE 7 i ff

Pregled Demo |
Preuzmite Lightbox Izvor Zip (Downloaded 1801 puta)

Korištenje Lightbox [datoteke u zip datoteku]

jo.js i jo_pack.js [pakiran verzija] - jednostavan set JavaScript OBJEKTE [JO], koji sadrži element, prozor i dokumenata pozicioniranja skripte. Možete otvoriti JO.JS ako želite da biste dobili vaše ruke prljave s nekim naprednim Javascripting, stvarajući apstraktne funkcije, koja se širi elemenata svojstva i takve. Ako niste previše u Javascripting, ostavite ga na miru.

lightbox.js, lightbox_pack.js [upakiran verzija] - Sadrže svjetlo skripte okvira upravitelja. Ako ste stranica dizajner, i odgovoran je s implementacijom u Lightbox na stranici, morate razumjeti LightBoxManager. LightBoxManager u osnovi sastoji od samo dvije funkcije showLightBox i closeLightBox.

lightbox.css: - Ako znate CSS, možete se poigrati s lightbox.css prilagoditi pogled-n-osjećati lightbox.css

index.html: Uzorak provedba Lightbox s dva različita sadržaja

lb_underlay_bkg.png: - To je svjetlo / slični transparentni prikaz koji se koristi pozadinu za Lightbox podloge [podloge sloj ispod lighbox, koji sprečava korisnik iz kliknete bilo koji drugi subjekt na stranici, a Lightbox je otvoren]. Možete koristiti bilo koju sliku ili čak solid boja za tu svrhu, ovisno o dizajnu stranice i zahtjev.

icon_lb_close.gif: - slika za blisku Lightbox ručkom na gornjem desnom kutu light box. Možete koristiti bilo koju sliku po dizajnu

Pregled Demo |
Preuzmite Lightbox Izvor Zip (Downloaded 1801 puta)

Molimo Vas da nas imaju svoje komentare i povratne informacije ...

nema komentara | Tags: , | Objavljeno u CSS-om i download i HTML , JavasScript , UI komponente

2008 4. rujan 2008

Fiksni (koja ostaje statična na prozoru pomaknite) Stranica blokova pomoću CSS Samo

Ovaj post bi mogao biti dobar primjer za izraz "Nastava baka sisati jaja" ... Jer ovo je samo BASIC CSS stvari. Ali za one poput mene nesvjestan, to može biti blagoslov maskirati. Uvijek sam mislio (ja mogao izgubiti svoj posao za Time), to je jedino moguće da neki dio HTML sadržaj stranice statički elektricitet (značenje, njegova pozicija ostaje kao na Windows pomicanje), koristeći neke pametne scenarije, Doing svima znanstveni izračuni pronaći dinamički položaj, stupičarenje Window.scroll događaje i postavljanje timeouts itd.

Nikad ne misli da bi mogao kao jednostavan kao ovaj .... Ovdje u CSS / HTML u nastavku, imam četiri statičke blokova, jedan pričvršćen za svaki extrimities na stranici TOP, desni i donji i lijevi ... Nepotrebno je reći ... možete odabrati bilo jedan ili više ako treba ...

CSS
. Static {display: block; z-index: 10, color: # FFFFFF; overflow-x: skriveno; overflow-y: skriveno; položaj: ixed;
}
# Sadržaji {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

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

# Wrap-l {top: 80px; background: # FF9966; visina: 300px; širina: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {dno: 0px; background: # 3333CC, širina: 100%, visina: 55px;}

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

HTML
<div id="contents"> Vi glavni sadržaj stranica </ div>
<div id="wrap-b" class="static">
Statični Sadržaj na dnu stranice
</ Div>
<div id="wrap-t" class="static">
Statični Sadržaj na stranice Vrh
</ Div>

<div id="wrap-l" class="static">
Statični Sadržaj na stranici lijevo
</ Div>
<div id="wrap-r" class="static">
Statični Sadržaj stranice na desnoj strani
</ Div>

Pogledajte wroking uzorak ovdje

nema komentara | Tags: | Objavljeno u CSS i HTML

2008 2. rujan 2008

CSS hack: Javascript, CSS, HTML za Firefox

Mnogi puta osjećamo potrebu napisati preglednika specfic hack (iako to nije dobra praksa, mi UI programeri morati posegnuti za takvim zla do velikog preglednici rata dolazi do primirja). Ranije sam spomenuo u ovom članku za svoj ​​IES Samo , kako napisati CSS isječak koji će biti vidljiva IE preglednici <IE7 samo.

Jučer sam imao slučaj, gdje sam htjela napisati nešto Firefox određeni CSS isječke. Dobro! Ja sam ne siguran ako je CSS kod za to, ali tu je HTML. POSTOJI ULOV iako, ovaj komad HTML doesnot pass HTML validaciji. No, anywaz! Ako ste zapeli ili loše kao takav ne-pozdrav za vrednovanje (negdje moramo biti okrutna), možete koristiti sljedeće objaviti link na FF samo stylesheet ili čak samo kodirati CSS unutar tog bloka. Kod

<comment> Stavite Firefox HTML / CSS / skripte ovdje </ comment>

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

I "m sretna u tom trenutku ...

nema komentara | Tags: , , | Posted in Browser Igra riječima i CSS i HTML , JavasScript

2008 15. ožujka 2008

Odaberite iritantne Kutije vidljiv kroz popup odjeljenja

U nekoliko navrata, a radi izgleda stranice sa popup podjelama / lightboxes / Savjeti i sl. susrećemo se situacije u kojima neki oblik odabir objekata se dogoditi da se pod tim popup odjeljenja, po dizajnu i to pokazuje kroz .... Yuk!

Dobro! možete jednostavno popraviti podešavanjem Z-indeksa prikladno za FF i IE7. No Good Old (dosjetka namijenjen) IE6 ne ponaša onako kako smo zamislili .... SELECT BOX Prikaži putem, čak i nakon što primijeniti neke drastično visoke Z-indeksa za popup Odjel ... sori!!

Nema popravaka za ovaj problem, ali tu su, vjerujem, više od nekoliko putu do posla-oko ovog problema, ali im ovdje da vam reći najjednostavnije rješenje da sam koristiti, koji radi u redu za mene, u većini slučajevi ....

"Skrivanje BOX Rouge odabrati kada SHOW POPUP"

Jednostavno u vašoj skripti isječak gdje vam pokazati vaš popup, dodajte komad skripte za postavljanje vidljivost SELECT Box na "Hidden"

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

I ne zaboravite da ga vrati na kraju popup odjeljenja

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

gdje je "my_select" je ID od iritacije SELECT Box

Nadam se ovo pomaže ...

PS. Postoje ofcourse druge opcije kao što su dinamički positionining IFRAME (iste veličine kao što Popup) pod popup DIV ... To dobro radi previše, ali s dodatkom hrpe DOM elemenata, skripte i glavobolja. Koristio sam ovo rješenje također, a ako to učinite je potrebna pomoć s ovom opcijom, ne pustiti mene znati. Biti će nam drago pomoći!

nema komentara | Tags: i i i i | posted in Browser Igra riječima i CSS i HTML , JavasScript

NDK dom | Izražavajući IT | Izražavajući Ukus | Izražavajući Penmenship | Izražavajući strahopoštovanje | Izražavajući Sebe