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.


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é 1813 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é 1813 krát)

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


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


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 ...


2008 15 júla 2008

IE 8 prísny režim a CSS opacity ... Ďalší postup

Oh No! V predchádzajúcej príspevok o niekoľko dní späť, pokiaľ ide krytie v IE8, som zabudol spomenúť dôležitú vec, že "IE 8 prísny režim neumožňuje CSS opacity".
Pre tých, ktorí donot pochopili, čo tým myslím prísnom režime, tu je rýchly návod .

Práce okolo tohto (Pred IE Dev Team si uvedomujú, že pripravilo cestu pre re-pracovnej rutiny na celom svete, webových stránok pomocou pop-up lightbox s nejakým krytím, a dať späť podporu pre nepriehľadnosť) je použitie čiastočne priehľadný obrázok ... najlepšie vo formáte PNG (mal som zlú skúsenosť dostať transparentný GIF obrázky pracovať ako oni mali). Vytvorte PNG o farby a percento priehľadnosti sa vám páči, vo vás obľúbený editor obrázkov a použiť ju ako obrázok na pozadí pre váš lightboxu prekrytie.

tj
Namiesto toho, aby niečo také

. Lighbox_overlay {
background-color: # FFFFFF;
z-index: 1001;
-Moz-opacity: 0.6;
opacity: 0.60;
Filter: alpha (opacity = 60);
}

Urob to ....

. Lighbox_overlay {
background: url (bkg.png) repeat;
}

To skúsiť, KLIKNITE TU! | NA STIAHNUTIE, KLIKNITE TU!


2008 06.07.2008

Nie "Krytie" v IE8

Ak si prezeráte túto stránku v IE8, potom musí byť vidieť celý nepriehľadné biele pozadie za tento príspevok. Včera, môj kolega upozornil na to, aby mi (ako som som jedným z tých ľudí, ktorí sa prispôsobujú zmenám pomaly a postupne ... predovšetkým prehliadača. By sa povedať, som zbabelec, ale tak je to .... Ako autor UI, som stále hovno strach z novej verzie prehliadačov ... viete, čo Im tlaking o tom, že?)

Vykopanej okolo chvíli, snaží sa nájsť riešenie, ako opraviť to a potom to, čo ...
Tentokrát naše CELÚ DOBU FAVORIT prehliadač má to urobil znova, že vypúšťa všetku podporu pre krytie CSS. Neštandardné `filter: alpha (opacity = # #)` CSS vlastnosť bola odstránená, Nice, ale aj úplne zabudol pridať podporu CSS3 krytia (napr. ako sa všetky ostatné prehliadače pekne držali ho). Takže prvýkrát, pretože Boh nám povedal o CSS opacity (od IE 5.0, myslím), bude webový prehliadač nepodporuje CSS opacity.
A teraz k tomu krém na vrchole: Oficiálne slovo od IE 8 tímu? Je to "návrhu" a "budeme považovať to v budúcej verzii IE".

PS: Skúste túto stránku vo FF, prisahám, že vyzerá čistý!


2008 02.07.2008

Používame Faux absolútnej polohy: Brilliant CCS Vybavenie

Keď som čítal tento článok na A List Apart " Faux absolútnu umiestnenie
Eric Sol ", som nič iné než dojem. Tiež som bol v depresii majorly, pretože, úprimne som si hovoril, prečo nemôžem prísť s niečím, pretože to báječné.

Zvyčajne, keď sme sa vytvoriť rozvrhnutie CSS, používame "Position" alebo "pláva", alebo veľmi zlú kombináciu oboch. Eric Sol a jeho tím definovať vedľa dokonalé technike nového typu techniky rozvrhnutie CSS, ktoré boli pokrstil ako "Faux absolútnej polohy" po faux stĺpca techniku, ktorá simuluje prítomnosť stĺpca.

Viete, že problém nás všetkých CSS vývojári sa rozpadajúcich rozloženie (The neočakávané zmeny obsahu, ktoré spôsobujú celé stĺpce, ktoré so zábalom, kedy používame plávajúcich rozloženie) ... No! Zdá sa, že história!!
Toto usporiadanie technika je ešte veľmi mladý, a musí sa vyhodiť do koša všetky tie guru CSS tam, než sa stane nie písaný štandard. Som rád, že ju použiť NOW! ... A som už v polovici svojej konverzii skôr problematické / plávajúce un-nutne rozvrhnutie do dispozície FAP už ... a som rád, "sme sa už používajú Faux absolútnej polohy tohto blogu aj" ... GO vyskúšať, TERAZ!

Kudos Eric Sk!


2008 20 júna 2008

Prázdne miesto Chyba v Radový / Zoznam položiek (LI) v IE6

Ak ste niekedy robil alebo ods robiť jedného) vertikálne menu pomocou položky zoznamu (LI) tagy a CSS, môže dôjsť, to ďalšia chyba v Internet Exploreri, kde IE 6 vloží tieto medzery medzi položkami zoznamu, ktoré obsahujú prvky na úrovni bloku a tj ak existuje medzera medzi položkami zoznamu na značky. Vďaka, ale nie vďaka, verzia IE 7, zdá sa z tohto problému.
Pokiaľ sa rovnako ako ja a mnoho ďalších, patríte do tejto skupiny frustrovaných vývojárov, ktorí ešte majú dostať svoje nové rozvrhnutie, pracujúci v IE6 príliš, potom by to mohlo byť užitočné. Pozrite sa ...

Ukážka značky:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> O </ a> </ li>
<li> <a href="#"> služby </ a> </ li>
<li> <a href="#"> portfólio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontaktujte nás </ a> </ li>
</ Ul>

Môžete si vytvoriť nejaké CSS, podobne ako ten dole, aby transfrom vyššie uvedené značky do zvislej ponuke ....

Ukážka CSS ...
# Menu {
margin: 0; padding: 0; pozadia: # FF9900;
list-style-type: none; šírka: 150px;
}
# Menu Ak {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Výsledky uvidíte ...
null

Riešenie tejto chyby ... (upravené / pridaná CSS tučnou kurzívou)

# Menu {
margin: 0; padding: 0; pozadia: # FF9900; list-style-type: none; šírka: 150px;
float: left; / * toto obsahuje plávajúcich položky zoznamu * /
}
# Menu Ak {
margin: 0; padding: 0;
float: left; / * Tento opravy * /
šírka: 100%; / * medzera chyba v IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Ak vyššie uvedené riešenie doesnot Zdá sa, že práca (z dôvodov známych iba IE6) ... skúste túto metódu miesto

Stačí pridať tento ďalší IE6 iba štýly do značky ...

<- [Ak lt IE 7>
<style type="text/css">
# Menu Ak {display: inline-block;}
# Menu Ak {display: block;}
</ Div>
<[Endif] ->


2008 24 apríla 2008

Best Practices: Práca s CSS

Dajte štýly na začiatok

Ak chcete stránku načítať postupne, to znamená, chceme, aby prehliadač zobrazí obsah bez ohľadu na to má, akonáhle je to možné, dať CSS v hornej časti stránky vo vnútri dokumentu HEAD. Tým stránky sa zdajú byť rýchlejšie načítanie, pretože to uľahčuje postupné vykresľovanie stránky. To je dôležité najmä pre stránky s množstvom obsahu a pre užívateľa na pomalšom pripojení k Internetu.

Je zdokumentované, že pre celkové zlepšenie užívateľského prostredia, je dôležité, aby indikátory a vizuálnej spätnej väzby. Aby sa predišlo nutnosti prekreslenie prvkov na stránke, v prípade, ak ich štýly sa menia, niektoré prehliadače vrátane IE, bloky stvárnenie stránky, kým CSS je úplne zaplnený. Pretože toto, používateľ uvidí prázdna biela stránka.

V W3 HTML špecifikácie "ďalej uvádza, že CSS je mi zahrnúť do HEAD časti stránky HTML. at the bottom of the page, so it's best not to use it. Tiež si všimnite, že v IE @import sa chová rovnako ako pri použití <link> v dolnej časti stránky, takže je to najlepšie, aby ju používať.

Vyhnite sa použitie prehliadača špecifiká

Filtre: Použitie filtra zvyšuje spotrebu pamäte a aplikuje sa na prvok, a to za snímku, takže je problém sa násobí. Tiež Filtre sú IE Vlastné, bude teda fungovať podľa plánu v iných prehliadačoch. Ak chcete priehľadné pozadie alebo prechod, použite 1Pixel s obrázkami.
Výrazy: CSS výrazy sú pekná vlastnosť mať v CSS, ale stále je IE špecifické funkcie. Tiež je dôležité si uvedomiť, že tieto výrazy sú hodnotené, ak je stránka vydanie a veľkosť, posúvať a dokonca aj keď používateľ presunie kurzor myši na stránke. Netreba hovoriť, že by to mohlo ovplyvniť výkon vašej stránky. Preto v jednoduchých slov, nepoužívajte CSS výrazy, ak si myslíte, ich klady "váži viac ako jeho cons"

Externalizovať vám CSS

Pomocou externého CSS bude mať za následok rýchlejšie načítanie stránky, pretože JavaScript a CSS súborov sú ukladané do vyrovnávacej pamäte prehliadača. Inline CSS v dokumentoch HTML si stiahnuť každom dokumente HTML je požadované. To by v skutočnosti mohli znížiť počet HTTP požiadaviek vyrobených ale následne sa zväčší veľkosť dokumentu HTML. Externý CSS, sú uložené v prehliadači, veľkosť dokumentu HTML je znížená bez zvýšenia počtu HTTP požiadaviek.

Vezmite prosím na vedomie, že ak užívatelia na svojich stránkach majú viac zobrazení stránky na zasadnutí a mnoho z vašich stránok znova použiť rovnaké skripty a štýly, tam je väčší potenciálny prínos z externých súborov uložených vo vyrovnávacej pamäti.

Zabaľte svoj CSS súbor

Balenie alebo škrípať vaše CSS je prax odstránenie zbytočných znakov z kódu znížiť jeho veľkosť a tým zlepšuje načítanie krát.

CSS je mi praskali tým, že odstráni všetky pripomienky a nežiadúce znaky, ako je bielych miest, nové riadky pod


2008 12.04.2008

CSS Cross prehliadač Minimálna výška Hack

Príspevok IE 6, MSIE bol taký láskavý, že nám UI vývojárov tým, že pridá ešte niekoľko ďalších vlastností CSS štandardné pre väčšinu ostatných štandardných prehliadačov. Jeden taký užitočné majetok "min-height". Docela rovno vpred majetok, ktorý nepotrebuje dlhú zubořezu vysvetlenie. Ak je nastavená min-height pre rozdelenie, vždy si zachováva nastavenú výšku, že keď obsah je tu zaberá menej ako to môže mať a hlavne (na rozdiel od plain vanilla "Height" majetku) váhy, alebo v slovách CSS, chová sa ako divízie ktorých "výška" je nastavený na "AUTO" ...

Pre niektoré z nás chudobných vývojárov, ktorí ešte sú nutné pre CSS kód, ktorý musí tiež pracovať v IE6, by ne-dostupnosť "min-height", ukázať show zátky niekedy ... donot zúfalstva.

Našťastie máme dosť vtipy v IE, ktoré by sme použili na von výhodu a zaseknúť našu cestu k dosiahnutiu nášho cieľa ... teda urobiť Oddelenie Oddelenie, ako by jeho min-height v IE6

Riešenie 1: Použitie Podtržítkový hack [ ... Prečítajte si viac ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>


Riešenie 2: pomocou atribútu CSS hack Selector

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

Atribút CSS Selector Hack využíva skutočnosť, že starší prehliadača IE6 tha ignoroval atribútom voliča. Na vedomie, že iné rozdelenie kontajnera s class = "someclass". Len presense zo atribút class pre túto divíziu, prepíše výšky späť na auto pre Opera, Mozilla a MSIE7 a novšie. IE6, ktorý nepodporuje atribútom selektory, ignoruje ju.

Zobraziť ukážku z min-height hacku pre IE6



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