2010 04.03.2010

Vyrovnanie prepínač s textom

Vzhľadom k tomu, prepínač a text sú in-line, takže text zarovnať seba na spodnej strane prepínač, bude sa text javí ako mierne pod prepínačmi.
Ak si chcete tieto zladiť na vrchol, budete musieť umiestniť rádio a text do samostatných nádob, ako tagov alebo presahuje (podľa potreby) a oni sa postarajú o vyrovnanie. Bolo by jednoduchšie použiť bunky tabuľky aj vášho návrhu stručný dovolí.

To nebude vyzerať rovnako v každom prehliadači, pretože každý prehliadač zobrazí rádia trochu inak, tak tam vždy bude veľkosť problémy bez ohľadu na to, čo robíte.

žiadne komentáre | zaslaných do prehliadača vtipov , HTML

2010 08.01.2010

Čo bude HTML5 prinesie?

HTML5 je stále návrh. Ako píšem, práca na HTML 5, ktoré sa začali v roku 2004, ešte je utváralo na základe spoločného úsilia medzi W3C HTML WG a WHATWG . Slovo je to, že budúci gén HTML bude mať vylepšení a funkcií, ktoré by nová štruktúra a sémantika, ovládacie prvky formulára, API, multimédiá tagy atď.

V jednoduchej angličtine ... čo by to znamenalo pre nás vývojári užívateľského rozhrania ...

  • Tam bude pridanie niektorých štrukturálnych tagy viď. <article>, <section>, <header>, <aside> a <nav>, ktorý by nahradil väčšinu <div> Používa sa na webovej stránke, aby vaše stránky trochu viac sémantická, ale čo je dôležitejšie, jednoduchšie čítať.
    Hej! Len si predstavte, úsilie uložený v zistení, že jeden chýbajúci úzke tagu div.
    napr 
  <body>
   <header> ... </ header>
   <nav> ... </ NAV>
   <article>
     <section>
       ...
     </ Sekcia>
   </ Článok>
   <aside> ... </ stranou>
   <footer> ... </ päty>
 </ Body>

Miesto 

  <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>
  • S príchodom audio a video obsahu, ako je YouTube, použitie vstavaných multimédií na webovej stránke sa increaded od krát. Vzhľadom na tieto, teraz plánu je pridať natívnu podporu pre vkladanie videa a zvuku do samotného prehliadača, preto užívateľom umožňuje prehrávať, pozastaviť, zastaviť, hľadať a nastavenie hlasitosti pomocou vstavaný DOM API pre skripty pre ovládanie prehrávania.

napr 

  <video poster="poster.jpg">
     <Source src = "video.3gp" type = "video/3gpp"
     média = "handheld">
         <zdroj src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <zdroj src="music.oga" type="audio/ogg">
   <zdroj src="music.mp3" type="audio/mpeg">
 </ Audio>
  • Lepšie definované sémantické role pre existujúce prvky pre napr <strong> a <em> môže teraz skutočne majú rôzne významy, tj že sa budú správať inak.

Existuje mnoho ďalších zmien a upgrady na novú verziu ... Bude mať aktualizovať tento post, ako som prišiel naproti cez nejaké tie zaujímavé užitočné .... Na tomto mieste

Tento dokument nemusí poskytovať presné informácie, ako HTML 5 špecifikáciu je stále aktívna vo vývoji. Ak si nie ste istí, vždy skontrolujte špecifikáciu HTML 5 tu .

1 komentár | Tagy: | zaslaných do HTML

2009 18 október 2009

HTML a XHTML

  • Typ dokumentu Vyhlásenie musí byť prítomný na začiatku dokumentu, ktorý používa HTML syntax. To môže byť voliteľne použiť v syntaxi XHTML, ale to nie je nutné. XHTML dokument nemusí obsahovať DOCTYPE, pretože XHTML dokumenty, ktoré sú dodávané správne používať XML MIME typ a sú spracované vo formáte XML v prehliadačoch, sú vždy poskytované v žiadnom vtipov režimu.
  • V XHTML, tag malé a veľké písmená a sú obvykle definované byť písaný malými písmenami. Vo formáte HTML, ale tag mená sú malé a veľké písmená a môže byť písaný vo všetkých veľkých písmen alebo zmiešané prípade, hoci najviac obyčajná konvencie, je držať sa malými písmenami. Prípad počiatočné a koncové značky nemusia byť rovnaké, ale je v súlade so robiť kód vyzerať čistejšie.

Výhody použitia HTML

  • Spätne kompatibilná s existujúcimi prehliadači
  • Autori sú už oboznámení so syntaxou
  • Zhovievavý a tolerantný syntaxe znamená, že nebude užívateľsky nepriateľský " Žltá obrazovka smrti ", ak chybou nechcene vykĺzne vďaka
  • Pohodlná skratka syntaxe, môže napr autori vynechať niektoré značky a hodnoty atribútov

Výhody použitia XHTML

  • Striktné XML syntax povzbudzuje autori písať dobre vytvorené značky, ktoré niektorí autori sa môžu ľahšie udržiavať
  • Integruje priamo s ostatnými slovníkov XML, ako MathML a SVG
  • Umožňuje použitie XML Processing, ktorý niektorí autori používajú ako súčasť ich editáciu alebo publikovanie procesov

žiadne komentáre | Tagy: | zaslaných do HTML a Web Developer

2009 24 marec 2009

Je zakázaný = "true" a vypnúť = "false" rovnako?

To ty stará škola, ale ako obvykle je to moja pamäť doplnok ...
Tak je zakázaný = "true" a vypnúť = "false" rovnako? Áno
... Neverte, dobre! to je spôsob, akým je ... tu je nejaké rýchle vysvetlenie ...
"Vypnuté" je atribútom akejkoľvek podobe prvku / odbor, a preto môže prijať žiadnu hodnotu vo svojej podstate.

Tak dlho, ako tento atribút prítomný, prvok zakázaná bez ohľadu na jeho hodnotu. napr pre.
<input value="This je disabled" disabled>
<input value="This je disabled" disabled="disabled">
<input value="This je disabled" disabled="true">
<input value="This je disabled" disabled="false">

Všetky vyššie uvedené bude táto forma pole "Disabled".

Jednoducho neposkytuje atribút "Disabled" drží pole "ABLED" ... rovnako ako nižšie

<input value="This nie je disabled" />

Pamätajte, "Akákoľvek hodnota (alebo žiadnu hodnotu vôbec) postihnutého atribútu, prehliadač vyjadriť to zakázané". Aby sa veci jasno v našich mysliach W3C odporúča, aby používame vypnuté = "vypnúť" v týchto situáciách.

To je rozdiel keď keď použijeme tento atribút v javascriptu ...

document.form.element.disabled = true; / / prvok bude zakázaný
document.form.element.disabled = false, / / prvok bude povolený

Vyššie uvedené argumenty platia aj pre tieto atribúty a ich častí:

  • skontrolovať (rádio tlačidlá a zaškrtávacie políčko)
  • vybrané (na želanie)
  • nowrap (td)

1 komentár | Tagy: | Zasláno do HTML a JavasScript

2008 17 december 2008

Mis-choval IE8: CSS Layout rozbíjať ods Zacielenie na verziu prehliadača pomocou meta tagy v IE8)

Ak ste osoba, CSS, mali by ste vedieť, ako sa vaša bolesť v rozvrhnutí pracovného cross-browser. IE8 je ďalší kľúč v prácach pre nás vývojári. Anywaz! Ak narazíte na tento problém, ako som to urobil včera, kde si dokonale fungujúci CSS v IE7 (a skôr) a Firefox sa náhle začali hádzať záchvaty hnevu v IE8, skúste toto ... Je pekne vyzeralo opraviť svoje problémy na chvíľu ....

Pomocou Meta vyhlásenie, môžeme špecifikovať vykresľovací jadro IE8 by sme chceli použiť. Takže nútiť k tomu, ako je IE8 IE7 ... vložte nasledujúce značku metadát do hlavy dokumentu: -

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

V predvolenom nastavení IE Meta bude: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ktorý by IE8 zobrazení stránky pomocou novej normy režimu.

V prípade potreby možno túto syntax použiť na ubytovať u iných prehliadačov ako je uvedené nižšie:

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

VIAC O DOCTYPES:

AK si ešte nepoznajú druh zvieraťa zvané "doctype" ... tu je nejaká rýchla čítať
Čo sú DOCTYPES? Čo sú to internetové Quirks a Prísny režim?
Nastavenie DOCTYPE v XSL

Pre podrobnejšie pochopenie, DOCTYPES, skúste navštíviť tieto odkazy ...
Zoznam APT: Fix vaše stránky So správnym DOCTYPE!
Zoznam APT: Beyond DOCTYPE: Webové štandardy a doprednou kompatibilitu, a IE8

Poznámka: Aj keď mnohí z nás HTML / CSS ľudia boli zanedbávanie význam DOCTYPE decleration v našich dokumentoch, nastavenie správneho DOCTYPE, je zvyčajne odpoveďou na väčšinu otázok priečnych prehliadači.

1 komentár | Tagy: , a a a | Zasláno do prehliadača vtipov a HTML

2008 04.10.2008

Miznúce HTML / DIV prvky v programe Internet Explorer [CZ]

Ako obvykle, jeden z mnohých niektoré podivné problémy s IE a to je potrebné pozícia v TOP 10 IE vtipov.

PROBLÉM VYHLÁSENIE (To bol môj problém, možno budete mať podobné misbehaviors):
Mám veľa DIV je na stránke s triedou "sectionhead", čo nie je nič iné ako názov oddielu na stránke. Tak som sa niektorí štýl vyzerať ako to

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

Div je svetlo šedá lišta s nejakým čiernym textom. Čo sa stane v IE je niektoré z týchto sekcií záhlaví sú zobrazené v poriadku, ale niektoré sú neviditeľné, kým nie, posúvanie stránky alebo kliknite niečo na stránke a pod Niekedy majú tendenciu miznúť, keď kliknite na tlačidlo 'alt' kľúč pri stránku dole alebo prejdite na posuvníka. Niekedy sa zdá sa objaviť, keď znova načítať (F5) stránku. Aj krátka dokonale jednoduché DIV s nejakým jednoduchým štýlom sa chová BAD.
Čo môže spôsobiť také nevyspytateľné správanie? No! Úprimne povedané, NO IDEA!

MOŽNÁ RIEŠENIE:
Opäť nepýtajte sa ma prečo, ale v mnohých prípadoch tento problém zvyčajne zmizne, keď pridáte pozície: vzhľadom k MIS chová prvkov štýlu, ako to

. Sectionhead {font-size: 18px; pozadia: # cfcfcf, padding: 5px; pozície: relatívna}

Divne, ale čo na to povedať? God Bless ma IE!

A DO Zdieľať s USA, ak by ste mali podobné problémy.

žiadne komentáre | Tagy: a a a | Zasláno do prehliadača vtipov a CSS a HTML

2008 03.10.2008

Jednoduchý, ľahký, kríž prehliadač Lightbox pre vaše webové stránky

Nie že by to sú len niektoré Lightbox je, že môžete nájsť, keď Google. Problém s väčšinou lightboxu, že som zistil, bolo, že sa všetko zdalo sa použiť jeden alebo inej ťažkej váhy rámcov JavaScriptu ako jQuery, Prototype MooTools a rád. Všetci sú cool a elegantný hľadáte. Ale Pokiaľ váš požiadavku "Ale ja chcem, jednoduchý a ĽAHKÝ lightbox SCRIPT svojich webových stránok", potom tu je;

Niektoré pekné črty tohto Obľúbených

  1. Veľmi ľahká
    . 4 kB skriptov pri balení (8 kB bez obalu)
    b. 2 kb CSS
    c. Pár riadkov HTML pre lightboxu kontajnera
  2. Jednoduché pochopiť a realizovať
  3. Môže mať viac lightbox na rovnakej stránke.
  4. Rovnaký Obľúbených kontajner sa používa na zobrazenie, iný obsah, ktorý je zahrnutý ako samostatne skrytých oddielov na stránke) v závislosti na odkaz / option, ktorý je klikli.
  5. Automaticky sa centra, pričom do úvahy všetky faktory, ako sú okná výšky a šírky (rozlíšenie monitora), str vyhľadajte množstvo a na výšku obsahu Obľúbených
  6. Testované v IE 7 a FF

Zobraziť Demo |
Stiahnuť Lightbox Zdroj Zip (Stiahnuté 1806 krát)

Použitie Lightbox [súbory v zip súboru]

jo.js a jo_pack.js [zabalené verzia]: - jednoduchý súbor JavaScript OBJEKTOV [JO], ktorý obsahuje prvok, okná a skripty dokumentov polohy. Môžete otvoriť JO.JS, ak chcete, aby vaše špinavé ruky s nejakým pokročilým Javascripting, vytvárať abstraktné funkcie, rozšírenie prvkov vlastnosti a podobne. Ak nemáte príliš v Javascripting, nechá to byť.

lightbox.js, lightbox_pack.js [zbalil verzia] - Obsahuje ľahké skripty okne Správca. Ak ste návrhár stránky, taktiež zodpovedá s vykonávaním lightbox na stránke, musíte pochopiť LightBoxManager. LightBoxManager podstate obsahuje len dve funkcie showLightBox a closeLightBox.

lightbox.css: - Ak viete, CSS, môžete sa pohrať s lightbox.css upraviť vzhľad-n-cítiť lightbox.css

index.html: Ukážka implementácie Obľúbených s dvoma rôznym obsahom

lb_underlay_bkg.png: - To je svetlo / simi transparentný obraz, ktorý sa používa ako podklad pre podloženie lightboxu [podložka sa vrstva pod lighbox, ktorá zabraňuje užívateľovi kliknutím na akýkoľvek iný subjekt na stránke, zatiaľ čo Schránka je otvorená]. Môžete použiť ľubovoľný obrázok, alebo dokonca plná farba pre tento účel, v závislosti na vzhľad stránky a požiadavky.

icon_lb_close.gif: - obrázok pre EL páky na pravej hornej časti svetelného poľa. Možno použiť akýkoľvek obrázok podľa návrhu

Zobraziť Demo |
Stiahnuť Lightbox Zdroj Zip (Stiahnuté 1806 krát)

Prosím, dajte nám majú svoje pripomienky a reakcie ...

žiadne komentáre | Tagy: , | Pridal v CSS a na stiahnutie a HTML , JavasScript , UI komponenty

2008 04.09.2008

Pevné (To zostáva statické na okne vyberte) Stránka bloky pomocou CSS iba

Tento príspevok by mohol byť dobrým príkladom pre výraz "Výučba babička sať vajcia" ... Pretože to je len základný CSS Stuff. Ale pre tých, ako nedbajúca ja, môže to byť šťastie v nešťastí. Vždy som si myslel (som mohol stratiť svoju prácu, že to hovorím), to bolo len možné, aby niektoré časti HTML obsah stránky statické (v zmysle, jeho pozícia zostáva IS na okno Scroll), s použitím niektoré chytré scenáre, robiť všetky tie vedecké Výpočty nájsť dynamické pozície, chytať Window.scroll udalostí a nastavení časových limitov atď

Nikdy by si myslel, že tak jednoduché, ako to .... Tu v CSS / HTML nižšie, mám štyri statické bloky, jeden pripevnený ku každej extrimities na stránke hore, vpravo, dolu a zľava ... netreba hovoriť ... môžete si vybrať jednu alebo viac, ak je potrebné byť ...

CSS
Statické {display: block; z-index: 10, farba: # FFFFFF; overflow-x: hidden; overflow-y: hidden; pozície: ixed;
}
Č obsah {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; pozadia: # 33CC66, šírka: 100%, výška: 55px;}

# Wrap-l {top: 80px; pozadia: # FF9966, výška: 300px; šírka: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {dole: 0px; pozadia: # 3333CC, šírka: 100%, výška: 55px;}

# Wrap-r {top: 80px; pozadia: # 6666FF, výška: 300px; šírka: 140px; border: 2px solid # e6e6e6, vpravo: 0;}

HTML
<div id="contents"> Vy hlavný obsah stránok </ div>
<div id="wrap-b" class="static">
Statický obsah na stránke dole
</ Div>
<div id="wrap-t" class="static">
Statický obsah na stránky Na začiatok
</ Div>

<div id="wrap-l" class="static">
Statický obsah na stránke vľavo
</ Div>
<div id="wrap-r" class="static">
Statický obsah na stránke vpravo
</ Div>

Prezrite si wroking vzorku tu

žiadne komentáre | Štítky: | Pridal v CSS a HTML

2008 02.09.2008

CSS hack: Javascript, CSS, HTML len pre Firefox

Mnoho krát cítime potrebu písať prehliadača specfic hacky (aj keď to nie je dobré praxe, sme UI vývojári sa musia uchyľovať k takýmto zlom až do veľkej vojny prehliadačov je k prímerie). Predtým som sa zmienil v tomto článku Pre vaše IES Iba , ako napísať úryvok CSS, ktorá by bola viditeľná pre IE prehliadača <IE7 iba.

Včera som mal prípad, keď som chcel napísať nejaký konkrétny FireFox CSS úryvky. No! Nie som si istý, či je kód CSS pre toto, ale tam je HTML. Tú však jeden háčik však tento kus HTML doesnot prejdú overením HTML. Ale anywaz! Ak sa lepí zle alebo ako taký, nemá pozdravy pre validáciu (niekedy musíme byť krutí), môžete použiť nasledujúce vyhlásiť odkaz na FF iba štýlom, alebo aj len kódovanie CSS v rámci tohto bloku. Kód

<comment> Dajte si FireFox iba HTML / CSS / scripts tu </ komentár>

napr
<comment>
<style>
/ * Štýl pre FF iba * /
fieldset {border: 1px solid # dddddd;}
</ Div>
</ Comment>

I "m šťastný za chvíľu ...

žiadne komentáre | Tagy: , , | Pridal do prehliadača vtipov a CSS a HTML , JavasScript

2008 15 marec 2008

Dráždivé Vyberte Krabica viditeľná Popup divízií

Na niekoľkých príležitostiach, zatiaľ čo robí rozvrhnutie stránok s vyskakovacie divíziou Lightbox / etc / Tipy dostávame do situácií, keď niektoré formulári vyberte objekty sa stane, že na základe týchto POPUP divízie, a to podľa návrhu presvitá .... Yuk!

No! môžete ľahko opraviť tým, že nastaví svoje Z-INDEX hodnoty primerane pre FF a IE7. Ale dobrý starý (slovná hračka určená) IE6 sa nespráva ako má .... SELECT BOX presvitať, a to aj po inštalácii niektoré výrazne vysoké hodnoty Z-INDEX na váš PopUp divízie ... Bummer!!

Tam sú NO OPRAVY tohto problému, ale tam sú, myslím, viac než pár spôsob obídenia tohto problému, ale im tu, aby som vám čo najjednoduchšie riešenie, ktoré ju používam, ktorý pracuje dobre pre mňa, vo väčšine prípadov ....

"Skryť ROUGE okne Vybrať KEĎ ZOBRAZIŤ POPUP"

Jednoducho v skripte úryvku, kde môžete ukázať svoje okno, pridajte kúsok skriptu nastaviť viditeľnosť SELECT políčko "Skrytý"

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

A nezabudnite nastaviť späť na sklonku svojho PopUp divízie

. Document.getElementById ('my_select ") style.visibilty =" viditeľné ";

kde "my_select" je ID podráždenie okne Vybrať

Dúfam, že to pomôže ...

PS. Samozrejme existujú aj iné možnosti, ako je dynamicky positionining IFRAME (rovnaký rozmer ako ste popup) pod Popup DIV ... To dobre funguje taky, ale s prídavkom zaťaženia DOM elementov, Skripty a bolesť hlavy. Použil som toto riešenie príliš, a keď potrebujeme pomôcť s touto voľbou, dajte mi vedieť. Vám radi pomôžeme!

žiadne komentáre | Tagy: a a a a | zaslaných do prehliadača vtipov a CSS a HTML , JavasScript

NDK domov | Vyjadrenie IT | Vyjadrenie poschodia | Vyjadrenie Penmenship | Vyjadrenie Awe | Vyjadrenie Myself