2010 04.03.2010

Vyrovnání přepínač s textem

Vzhledem k tomu, přepínač a text jsou in-line, takže text zarovnat sebe na spodní straně přepínač, bude se text jeví jako mírně pod přepínači.
Pokud si chcete tyto sladit na vrchol, budete muset umístit rádio a text do samostatných nádob, jako tagů nebo přesahuje (podle potřeby) a oni se postarají o vyrovnání. Bylo by jednodušší použít buňky tabulky i vašeho návrhu stručný dovolí.

To nebude vypadat stejně v každém prohlížeči, protože každý prohlížeč zobrazí rádia trochu jinak, tak tam vždycky bude velikost problémy bez ohledu na to, co děláte.

žádné komentáře | posláno do prohlížeče vtípků , HTML

2010 08.01.2010

Co bude HTML5 přinese?

HTML5 je stále návrh. Jak píšu, práce na HTML 5, které byly zahájeny v roce 2004, ještě je utvářelo na základě společného úsilí mezi W3C HTML WG a WHATWG . Slovo je to, že příští gen HTML bude mít vylepšení a funkcí, které by nová struktura a sémantika, ovládací prvky formuláře, API, multimédia tagy atd..

V jednoduché angličtině ... co by to znamenalo pro nás vývojáři uživatelského rozhraní ...

  • Tam bude přidání některých strukturálních tagy viz. <article>, <section>, <header>, <aside> a <nav>, který by nahradil většinu <div> Používá se na webové stránce, aby vaše stránky trochu víc sémantická, ale co je důležitější, jednodušší číst.
    Hej! Jen si představte, úsilí uložený v zjištění, že jeden chybějící úzké tagu div.
    např. 
  <body>
   <header> ... </ header>
   <nav> ... </ NAV>
   <article>
     <section>
       ...
     </ Sekce>
   </ Článek>
   <aside> ... </ stranou>
   <footer> ... </ zápatí>
 </ Body>

Místo 

  <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 příchodem audio a video obsahu, jako je YouTube, použití vestavěných multimédií na webové stránce se increaded od krát. S ohledem na tyto, teď plánu je přidat nativní podporu pro vkládání videa a zvuku do samotného prohlížeče, proto uživatelům umožňuje přehrávat, pozastavit, zastavit, hledat a nastavení hlasitosti pomocí vestavěný DOM API pro skripty pro ovládání přehrávání.

např. 

  <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ší definované sémantické role pro stávající prvky pro např. <strong> a <em> může nyní skutečně mají různé významy, tj. že se budou chovat jinak.

Existuje mnoho dalších změn a upgrady na novou verzi ... Bude mít aktualizovat tento post, jak jsem přišel naproti přes nějaké ty zajímavé užitečné .... Na tomto místě

Tento dokument nemusí poskytovat přesné informace, jak HTML 5 specifikaci je stále aktivní ve vývoji. Pokud si nejste jisti, vždy zkontrolujte specifikaci HTML 5 zde .

1 komentář | Tagy: | posláno do HTML

2009 18 říjen 2009

HTML a XHTML

  • Typ dokumentu Prohlášení musí být přítomen na začátku dokumentu, který používá HTML syntaxi. To může být volitelně použít v syntaxi XHTML, ale to není nutné. XHTML dokument nemusí obsahovat DOCTYPE, protože XHTML dokumenty, které jsou dodávány správně používat XML MIME typ a jsou zpracovány ve formátu XML v prohlížečích, jsou vždy poskytovány v žádném vtípků režimu.
  • V XHTML, tag malá a velká písmena a jsou obvykle definovány být psán malými písmeny. Ve formátu HTML, ale tag jména jsou malá a velká písmena a může být psán ve všech velkých písmen nebo smíšené případě, ačkoli nejvíce obyčejná konvence, je držet se malými písmeny. Případ počáteční a koncové značky nemusí být stejné, ale je v souladu se dělat kód vypadat čistší.

Výhody použití HTML

  • Zpětně kompatibilní se stávajícími prohlížeči
  • Autoři jsou již obeznámeni se syntaxí
  • Shovívavý a tolerantní syntaxe znamená, že nebude uživatelsky nepřátelský " Žlutá obrazovka smrti ", pokud chybou nechtěně vyklouzne díky
  • Pohodlná zkratka syntaxe, může např. autoři vynechat některé značky a hodnoty atributů

Výhody použití XHTML

  • Striktní XML syntaxe povzbuzuje autoři psát dobře vytvořené značky, které někteří autoři se mohou snadněji udržovat
  • Integruje přímo s ostatními slovníků XML, jako MathML a SVG
  • Umožňuje použití XML Processing, který někteří autoři používají jako součást jejich editaci nebo publikování procesů

žádné komentáře | Tagy: | posláno do HTML a Web Developer

2009 24 březen 2009

Je zakázán = "true" a vypnout = "false" stejně?

To ty stará škola, ale jako obvykle je to moje paměť doplněk ...
Tak je zakázán = "true" a vypnout = "false" stejně? Ano
... Nevěřte, dobře! to je způsob, jakým je ... tady je nějaké rychlé vysvětlení ...
"Vypnuto" je atributem jakékoli podobě prvku / obor, a proto může přijmout žádnou hodnotu ve své podstatě.

Tak dlouho, jak tento atribut přítomen, prvek zakázána bez ohledu na jeho hodnotu. např. pro.
<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">

Všechny výše uvedené bude tato forma pole "Disabled".

Jednoduše neposkytuje atribut "Disabled" drží pole "ABLED" ... stejně jako níže

<input type="text" value="This není disabled" />

Pamatujte, "Jakákoliv hodnota (nebo žádnou hodnotu vůbec) postiženého atributu, prohlížeč vyjádřit to zakázané". Aby se věci jasno v našich myslích W3C doporučuje, aby používáme vypnuté = "vypnout" v těchto situacích.

To je rozdíl když když použijeme tento atribut v javascriptu ...

document.form.element.disabled = true; / / prvek bude zakázán
document.form.element.disabled = false, / / prvek bude povolen

Výše uvedené argumenty platí také pro tyto atributy a jejich částí:

  • zkontrolovat (rádio tlačítka a zaškrtávací políčko)
  • vybrané (na přání)
  • nowrap (td)

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

2008 17 prosinec 2008

Mis-choval IE8: CSS Layout rozbíjet odst. Cílení na verzi prohlížeče pomocí meta tagy v IE8)

Jste-li osoba, CSS, měli byste vědět, jak se vaše bolest v rozvržení pracovní cross-browser. IE8 je další klíč v pracích pro nás vývojáři. Anywaz! Pokud narazíte na tento problém, jako jsem to udělal včera, kde si dokonale fungující CSS v IE7 (a dříve) a Firefox se náhle začali házet záchvaty vzteku v IE8, zkuste toto ... Je hezky vypadalo opravit své problémy na chvíli ....

Pomocí Meta prohlášení, můžeme specifikovat vykreslovací jádro IE8 bychom chtěli použít. Takže nutit k tomu, jak je IE8 IE7 ... vložte následující značku metadat do hlavy dokumentu: -

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

Ve výchozím nastavení IE Meta bude: -

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

V případě potřeby lze tuto syntaxi použít k ubytovat u jiných prohlížečů jak je uvedeno níže:

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

VÍCE O DOCTYPES:

POKUD jsi ještě neznají druh zvířete zvané "doctype" ... tady je nějaká rychlá číst
Co jsou DOCTYPES? Co to ​​jsou internetové Quirks a Přísný režim?
Nastavení DOCTYPE v XSL

Pro podrobnější pochopení, DOCTYPES, zkuste navštívit tyto odkazy ...
Seznam APT: Fix vaše stránky Se správným DOCTYPE!
Seznam APT: Beyond DOCTYPE: Webové standardy a dopřednou kompatibilitu, a IE8

Poznámka: I když mnozí z nás HTML / CSS lidé byli zanedbávání význam DOCTYPE decleration v našich dokumentech, nastavení správného DOCTYPE, je obvykle odpovědí na většinu otázek příčných prohlížeči.

1 komentář | Tagy: , a a a | Zasláno do prohlížeče vtípků a HTML

2008 04.10.2008

Mizející HTML / DIV prvky v aplikaci Internet Explorer [CZ]

Jako obvykle, jeden z mnoha některé podivné problémy s IE a to je třeba pozice v TOP 10 IE vtípků.

PROBLÉM PROHLÁŠENÍ (To byl můj problém, možná budete mít podobné misbehaviors):
Mám mnoho DIV je na stránce s třídou "sectionhead", což není nic jiného než název oddílu na stránce. Tak jsem se někteří styl vypadat jako to

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

Div je světle šedá lišta s nějakým černým textem. Co se stane v IE je některé z těchto sekcí záhlaví jsou zobrazeny v pořádku, ale některé jsou neviditelné, dokud ne, posouvání stránky nebo klikněte něco na stránce apod. Někdy mají tendenci mizet, když klikněte na tlačítko 'alt' klíč při stránku dolů nebo přejděte na posuvníku. Někdy se zdá se objevit, když znovu načíst (F5) stránku. I krátká dokonale jednoduché DIV s nějakým jednoduchým stylem se chová BAD.
Co může způsobit takové nevyzpytatelné chování? No! Upřímně řečeno, NO IDEA!

MOŽNÁ ŘEŠENÍ:
Opět neptejte se mě proč, ale v mnoha případech tento problém obvykle zmizí, když přidáte pozice: vzhledem k MIS chová prvků stylu, jako to

. Sectionhead {font-size: 18px; pozadí: # cfcfcf, padding: 5px; pozice: relativní}

Divně, ale co na to říct? God Bless mě IE!

A DO Sdílet s USA, pokud byste měli podobné problémy.

žádné komentáře | Tagy: a a a | Zasláno do prohlížeče vtípků a CSS a HTML

2008 03.10.2008

Jednoduchý, lehký, kříž prohlížeč Lightbox pro vaše webové stránky

Ne že by to jsou jen některé LightBox je, že můžete najít, když Google. Problém s většinou lightboxů, že jsem zjistil, bylo, že se vše zdálo se použít jeden nebo jiné těžké váhy rámců JavaScriptu jako jQuery, Prototype Mootools a rád. Všichni jsou cool a elegantní hledáte. Ale Pokud váš požadavek "Ale já chci, jednoduchý a LEHKÝ lightbox SCRIPT svých webových stránek", pak tady je;

Některé pěkné rysy tohoto Oblíbených

  1. Velmi lehká
    . 4 KB skriptů při balení (8 kB bez obalu)
    b.. 2 kb CSS
    c.. Pár řádků HTML pro lightboxu kontejneru
  2. Jednoduché pochopit a realizovat
  3. Může mít více lightboxy na stejné stránce.
  4. Stejný Oblíbených kontejner se používá k zobrazení, jiný obsah, který je zahrnut jako samostatně skrytých oddílů na stránce) v závislosti na odkaz / option, který je klepli.
  5. Automaticky se centra, přičemž v úvahu všechny faktory, jako jsou okna výšky a šířky (rozlišení monitoru), str. vyhledejte množství a na výšku obsahu Oblíbených
  6. Testováno v IE 7 a FF

Zobrazit Demo |
Stáhnout Lightbox Zdroj Zip (Staženo 1810 krát)

Použití Lightbox [soubory v zip souboru]

jo.js a jo_pack.js [zabalené verze]: - jednoduchý soubor JAVASCRIPTU OBJEKTŮ [JO], který obsahuje prvek, okna a skripty dokumentů polohy. Můžete otevřít JO.JS, pokud chcete, aby vaše špinavé ruce s nějakým pokročilým Javascripting, vytvářet abstraktní funkce, rozšíření prvků vlastnosti a podobně. Pokud nemáte příliš v Javascripting, nechá to být.

lightbox.js, lightbox_pack.js [sbalil verze] - Obsahuje lehké skripty okně Správce. Pokud jste návrhář stránky, rovněž odpovídá s prováděním lightbox na stránce, musíte pochopit LightBoxManager. LightBoxManager podstatě obsahuje jen dvě funkce showLightBox a closeLightBox.

lightbox.css: - Pokud víte, CSS, můžete si pohrát s lightbox.css upravit vzhled-n-cítit lightbox.css

index.html: Ukázka implementace Oblíbených s dvěma různým obsahem

lb_underlay_bkg.png: - To je světlo / simi transparentní obraz, který se používá jako podklad pro podložení lightboxu [podložka se vrstva pod lighbox, která zabraňuje uživateli kliknutím na jakýkoliv jiný subjekt na stránce, zatímco Schránka je otevřena]. Můžete použít libovolný obrázek, nebo dokonce plná barva pro tento účel, v závislosti na vzhled stránky a požadavku.

icon_lb_close.gif: - obrázek pro EL páky na pravé horní části světelného pole. Lze použít jakýkoliv obrázek dle návrhu

Zobrazit Demo |
Stáhnout Lightbox Zdroj Zip (Staženo 1810 krát)

Prosím, dejte nám mají své připomínky a reakce ...

žádné komentáře | Tagy: , | Přidal v CSS a ke stažení a HTML , JavasScript , UI komponenty

2008 04.09.2008

Pevné (To zůstává statické na okně vyberte) Stránka bloky pomocí CSS pouze

Tento příspěvek by mohl být dobrým příkladem pro výraz "Výuka babička sát vejce" ... Protože to je jen základní CSS Stuff. Ale pro ty, jako nedbající já, může to být štěstí v neštěstí. Vždycky jsem si myslel (jsem mohl ztratit svou práci, že to říkám), to bylo jen možné, aby některé části HTML obsah stránky statické (ve smyslu, jeho pozice zůstává IS na okno Scroll), s použitím některé chytré scénáře, dělat všechny ty vědecké Výpočty najít dynamické pozice, chytat Window.scroll událostí a nastavení časových limitů atd.

Nikdy by si myslel, že tak jednoduché, jak to .... Tady v CSS / HTML níže, mám čtyři statické bloky, jeden připevněný ke každé extrimities na stránce nahoře, vpravo, dolů a zleva ... netřeba říkat ... můžete si vybrat jednu nebo více, pokud je třeba být ...

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

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

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

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

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

HTML
<div id="contents"> Vy hlavní obsah stránek </ div>
<div id="wrap-b" class="static">
Statický obsah na stránce dole
</ Div>
<div id="wrap-t" class="static">
Statický obsah na stránky Začátek
</ Div>

<div id="wrap-l" class="static">
Statický obsah na stránce vlevo
</ Div>
<div id="wrap-r" class="static">
Statický obsah na stránce vpravo
</ Div>

Prohlédněte si wroking vzorek zde

žádné komentáře | Štítky: | Přidal v CSS a HTML

2008 02.09.2008

CSS hack: Javascript, CSS, HTML pouze pro Firefox

Mnoho krát cítíme potřebu psát prohlížeče specfic hacky (i když to není dobré praxe, jsme UI vývojáři se musí uchylovat k takovým zlem až do velké války prohlížečů je k příměří). Dříve jsem se zmínil v tomto článku Pro vaše IES Pouze , jak napsat úryvek CSS, která by byla viditelná pro IE prohlížeče <IE7 pouze.

Včera jsem měl případ, kdy jsem chtěl napsat nějaký konkrétní FireFox CSS úryvky. No! Nejsem si jist, zda je kód CSS pro toto, ale tam je HTML. Tu však jeden háček však tento kus HTML doesnot projdou ověřením HTML. Ale anywaz! Pokud se lepí špatně nebo jako takový, nemá-pozdravy pro validaci (někdy musíme být krutí), můžete použít následující prohlásit odkaz na FF pouze stylem, nebo i jen kódování CSS v rámci tohoto bloku. Kód

<comment> Dejte si FireFox pouze HTML / CSS / scripts zde </ komentář>

např.
<comment>
<style>
/ * Styl pro FF pouze * /
fieldset {border: 1px solid # dddddd;}
</ Div>
</ Comment>

I "m šťastný za chvíli ...

žádné komentáře | Tagy: , , | Přidal do prohlížeče vtípků a CSS a HTML , JavasScript

2008 15 březen 2008

Dráždivé Vyberte Krabice viditelná Popup divizí

Na několika příležitostech, zatímco dělá rozvržení stránek s vyskakovací divizí Lightboxy / etc / Tipy dostáváme do situací, kdy některé formuláři vyberte objekty se stane, že na základě těchto POPUP divize, a to podle návrhu prosvítá .... YuK!

No! můžete snadno opravit tím, že nastaví své Z-INDEX hodnoty přiměřeně pro FF a IE7. Ale dobrý starý (slovní hříčka určena) IE6 se nechová jak má .... SELECT BOX prosvítat, a to i po instalaci některé výrazně vysoké hodnoty Z-INDEX na váš PopUp divize ... Bummer!!

Tam jsou NO OPRAVY tohoto problému, ale tam jsou, myslím, víc než pár způsob obejití tohoto problému, ale im tady, abych vám co nejjednodušší řešení, které ji používám, který pracuje dobře pro mě, ve většině případů ....

"Skrýt ROUGE okně Vybrat KDYŽ ZOBRAZIT POPUP"

Jednoduše ve skriptu úryvku, kde můžete ukázat své okno, přidejte kousek skriptu nastavit viditelnost SELECT políčko "Skrytý"

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

A nezapomeňte nastavit zpět na sklonku svého PopUp divize

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

kde "my_select" je ID podráždění okně Vybrat

Doufám, že to pomůže ...

PS. Samozřejmě existují i ​​jiné možnosti, jako je dynamicky positionining IFRAME (stejný rozměr jako jste popup) pod Popup DIV ... To dobře funguje taky, ale s přídavkem zatížení DOM elementů, Skripty a bolest hlavy. Použil jsem toto řešení příliš, a když potřebujeme pomoci s touto volbou, dejte mi vědět. Vám rádi pomůžeme!

žádné komentáře | Tagy: a a a a | posláno do prohlížeče vtípků a CSS a HTML , JavasScript

NDK domů | Vyjádření IT | Vyjádření patra | Vyjádření Penmenship | Vyjádření Awe | Vyjádření Myself