Išreikšdami IT

Kitas greitas tut. Čia yra kažkas, paprastas ir malonus naudojant CSS POWER ... bet buvo sunku concieve (ir jis tikrai buvo ne man) prasideda. Įrašyta Dropshadow, gali būti torto peice, daugelis iš mūsų, naudojant tam tikrą vaizdo redagavimo įrankiai kaip Photoshop Vidzemes Fejerverkai kt.
Priežastis, kodėl aš pasirinko lašo šešėliu naudojant CSS, kad, paprastai kuriant puslapio dizainas / html paraiškos, reikalavimai nuolat Iteracja. Ką reiškia egzistuojančią svetainę su daugeliu vaizdų, kaip tie, vaizduojančių freinds sąrašą arba vaizdų galeriją, ji bus sunku pakartotiniai perdirbti visas apkrovos vaizdų, kurie jau buvo iškrautos pridėti ar pašalinti šešėlius, kad klausimas.
Taigi, jei jūs turite padaryti šiek tiek į priekį mąstymą kuriant, HTMLS pridėti šiuos papildomus padalinius ar paprastai situacija yra, kad jūs turite Loop Logic, gaminantis šiuos piktogramas arba miniatiūros XSL, PHP,. Java arba bet kuri kita programavimo / skriptų kalba, galite pridėti jį bet kuriuo metu, tada yra tik šou ir, slepiasi šiuos šešėliai, naudojant CSS Ekranas turtą, kaip už klientų nuolat kintančių reikalavimų ... aš havn't, padaryti šį perspektyvi rūšiuoti prieš tai ... bet ahev, pradėjo dabar!

Toliau pateiktame pavyzdyje, originalus paveikslėlis šešėlis nemokamai, ir dropshadows taikoma, kaip reikalaujama! Be to, aš jau šiek tiek daugiau, mano ankstesnio TUT triukus [Well! tai tikriausiai yra trumpiausias įvairovė Mokymas, todėl ji yra pateisinama tik tada, vadindamas juos "Tut" ai) apie Naudojant CSS Clip Nekilnojamas parodyti tik

Originalaus vaizdo

CSS DropShadow rezultatus

Peržiūrėti Demo | Parsisiųsti sourcefiles

Kodėl aš noriu tai suprasti?? ... Humm!!

Dauguma, CSS rašytojų sutiktų, kad CPT Clip nuosavybė yra tikriausiai vienas iš daugelio JT naudojamų nuosavybės CSS. Tai buvo taip tiesa man ir buvo malonu pamiršti jį, kol aš pradėjau keisti MooTools DVIEJŲ rankenėlę (PIN) Slider sudedamoji dalis (su Kategorijos indikatorius) .

Buvo geras pasiūlymas iš vienos sudedamųjų vartotojams pakeisti Slider komponentą naudojant nukirpti backgroud vaizdus (palyginti su kintamo pločio skyriaus) nurodyti slankiklį asortimentą. Taigi atėjo mano laikas įvesti įdomus, bet JT atestuoto (me Žinoma) vandenys CSS Clip turto,.

Gerai! kaip sunku gali būti? Ne visai ... TAIP ir NE. Sintaksė CSS Clip turtą, yra gana stačios, bet reikšmė / usuage, yra šiek tiek croocked. Su pavyzdžiui, mano atmintyje, kaskart Sėdžiu pertvarkyti savo Slider Script ... Turiu tokeep, šio CLIP turto naudojimo, priminti sau tą logiką, kad aš sukūriau savo scenarijų .... Taigi! Manoma, kad švirkštimo priemonę žemyn, su viltimi, jį įsiminti, ateitis (taip pat ir tų, kurie atrodo naudai boggled CSS Clip turto)

Ką CSS Clip daryti?

Klipas yra viena iš modulio Visual Effects CSS 2.1. Paprasčiau tariant, jo darbas yra matomas langą ant objekto, yra nukirpti, taigi joms nukerpant vaizdus ir kurti miniatiūras neturint sukurti papildomus failus (aš jau geriau naudoti šią funkciją Slider komponento )

Naudojant CSS Clip turto, galite sukurti iškarpą naudojant rect formą. Kaip ir daugelyje kitų CSS savybės (kaip maržos, apdaila ir tt), naudojant rect reikalauja viršų keturios koordinatės, Dešinė, Apačia, Kairė (TRBL). Croocked šio turto pobūdis atspindi kai atidžiau pažvelgti, kaip klipas apskaičiuoja iškarpą regioną, naudojant šias keturias koordinates (smegenys siunčia į tam tikrą laiką išmesti). Dabar jums supainioti apačios pradeda nuo viršaus, ir teisė prasideda iš kairės. . Jūs matote, ką aš pasakiau? .... Taigi šis pranešimas ...

Tai šiek tiek painiavos gali lengvai išnykti, šį vizualų paaiškinimą CSS Clip / rect turto, kaip nurodyta toliau!!!

CSS Clip reikalavimai

Užduotis, mes pradėjome klipas šį vaizdelį į Kvadratas ieško paveikslėlio (o taip pat plataus kampo vaizdas)

Pirmapradžio Thumbnal / Vaizdo	Įrašo Reikalavimai Sqaure Thumbmail

CSS Clip rezultatus

Peržiūrėti Demo | Parsisiųsti sourcefiles

Šis klausimas kelis kartus, kol kirto mano protas, kai aš dirbau, svetainėse anksčiau per, kuri naudojama WordPress parodyti dienoraščiai arba naujo tipo turinį, nors svetainė / portal.Being PHP ir aplink WordPress naujokas, aš nuolat procastinating jį, galvoju: "tai ne mano peice vieni". Pagaliau! šis reikalavimas buvo net iki mano nosies, kai pradėjo Diggin aplink šiek tiek tirpalo.
Aš buvau nustebintas, kad ji tikrai buvo lengviau nei aš maniau jis buvo, rodyti antraštes sąrašą ar naujausius pranešimus kitą puslapį už WordPress varomą skyriuje, tiesiog naudodami šiek tiek PHP ir WordPress API .

Štai ką reikia daryti:
Paaiškinimo priežasčių manyti, kad Jūsų svetainė yra http://www.inchembur.com/ ir jūs turite šios svetainės naujienų skyriuje, apie http://news.inchembur.com/~~pobj kuris veikia WordPress). Dabar reikalavimas parodyti naujausius pranešimus nuo http://news.inchembur.com/~~pobj pagrindinės svetainės pagrindiniame puslapyje, ty http://www.inchembur.com/index.php

1 žingsnis: savo index.php pridėti šį peice,, kodas, įtraukti WordPress API failą. Galite įdėti šią nuorodą į puslapį, kurį norite Jūsų skelbiamas pranešimas pasirodys viršuje.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES "," false "); / / Disbable naudojimas WordPress temos
reikalauja ('/ var / news.inchembur.com / wp-blog-header.php "); / / Įtraukti WordPress API
; // Get Latest Post query_posts "showposts = 1") / / Gauti citata
?>

Be pirmiau peice yra, mes gauname tik vieną naujausią pranešimus. jei norite pabandyti daugiau variantų nedvejodami kasti į query_posts() dokumentacijos .

2 žingsnis: Dabar, į Indekso / Namų puslapio, kuriame norite rodyti naujausią WordPress pranešimus iš dalies http://news.inchembur.com , naudoti šį kodą. Nereikia nė sakyti, nedvejodami reklamos savo stiliaus skaidymui, tęsiasi ir klases, kaip už savo dizaino poreikius.

Step3: Nėra Žingsnis 3 ... Thats ... baigsite!

Kaip rodo tam tikrą, o ne po / psl naujausius pranešimus:
Šis gali lengvai achived, pakeičiant argumentus query_posts() puslapio ID arba puslapio šliužas

) ; query_posts "page_id = 7");
) ; query_posts "sugalvotas pavadinimas = apie");

ar galite valdyti pareigybių skaičių:
) ; query_posts straipsnio showposts = 3);

Kartais pageweight žemyn ... mes padalinti mūsų scenarijus į fragmentus ... Šie javascript fragmentai gali būti įkeltas kaip ir kada reikia (įvykio arba paspaudimu nuorodą arba mygtuką ir tt).

Pakrovimo JavaScripts dinamiškai yra paprasta ir gana važiuoti tiesiai į priekį, kaip nurodyta toliau ...

= “text/javascript” > <Scenarijų type = "text / javascript">
. funkcija loadNewScript (šaltinis) {
var s = document.createElement ("script");
s.setAttribute ("tipas", "text / javascript");
s.setAttribute ("src", šaltinis);
document.body.appendChild (-ai);
}
</ Script>

ir jūs galite turėti šių skambučių nuorodą bet kurioje kūno vietoje, arba galite turėti šį scenarijų "onload" pačiame dokumente ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (" myDynamicScript.js); "> apkrovos dinaminio Script'o </ a>.

arba

<body onload="loadNewScript('myDynamicScript.js');">

Jei esate CSS asmuo, turėtumėte žinoti, gauti savo maketus darbo įvairių naršyklių skausmą. IE8 yra dar vienas veržliaraktis mus kūrėjų darbais. Anywaz! jei paspausite ant šio klausimo, Kaip aš padariau vakar, kur yra jūsų puikiai dirba CSS IE7 (ir anksčiau) ir Firefox staiga pradėjo mėtyti tantrums IE8, pabandykite šį ... Jis gražiai atrodė, kad išspręsti savo problemas šiuo metu ....

Naudojant meta deklaracijos, mes galime nurodyti atvaizdavimo variklį, mes norėtume IE8 naudotis. Taigi, norint priversti IE8 padaryti kaip IE7 ... Įdėkite šį meta žymeles į savo dokumentą galvos: -

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

Pagal nutylėjimą IE meta būtų: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
padaryti IE8 padaryti puslapį naudojant naujus standartus režimą.

Jei reikia, ši sintaksė gali būti naudojami apgyvendinti kitų naršyklių, kaip nurodyta toliau:

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

Smulkiau apie DOCTYPES:

Jei esate dar susipažinę su gyvūno rūšies, vadinamas "DOCTYPE" ... čia yra kai greitai skaityti
Kas yra DOCTYPES? Kas yra Naršyklės Quirks & ABSOLIUČIĄ Mode?
DOCTYPE XSL nustatymas

Į išsamų supratimą apie DOCTYPES, pabandykite aplankyti šias nuorodas ...
A List Apart: Fix Teisė DOCTYPE savo svetainę!
A List Apart: Beyond DOCTYPE: Web Standartai, nusiųsti Suderinamumo ir IE8

Pastaba: Nors daugelis iš mūsų HTML / CSS žmonės buvo atsižvelgiama DOCTYPE decleration svarbą mūsų dokumentus, Tinkamo DOCTYPE, paprastai atsakymas į labiausiai kryžminių naršyklės klausimais.

Su įvairių karuselių ten, daugelis taip pat už MooTools, aš vis tiek nusprendė parašyti savo Karuselė klasės, gerų priežasčių
1. Norėjo ieškos funkciją galėtų šokti tam tikrą skaidrę / Step "karuselės").
2. Noriu laisvė su kairiojo ir dešiniojo mygtukų / Nuorodos apgyvendinimas, jei kada nors aš prašom.
3. Daugiau kontrolė per skaidrių žingsniai.

Man pavyko sukurti naują karuselė, su pirmiau nurodytų funkcijų, kaip nurodyta toliau ... Jauskitės laisvai siūlyti bet kokias pakeitimus galėtumėte reikia!!!

Mano pavyzdys atrodo ... [ Peržiūrėti Demo ]

Žiūrėti Demo | Parsisiųsti MooTools Karuselė Su ieškos versija 1.0 straipsnio Siuntėsi 1994 kartus)

1. Karuselė Puslapiuoti

Jūs galite lengvai pridėti ieškai savo karuselės, tiesiog ieškos vėliava, kuri yra naujausia išlaikė parater, kuriant true MooCarousel egzempliorių (noriu ieškos) arba false (donot nori ieškai).

var carousel1 =. naujas MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa); / / ns = skaidrės skaičius, SSS = skaidrių keitimo žingsnio dydis

Žinoma jūs galite pakeisti išvaizdą-n jausti šių ieškos achors, kaip galite pakeisti savo CSS.

Carousel_paging {text-align: teisė; margin: 5px 10px 0 0;}
Carousel_paging srovė, carousel_paging puslapis {outline: nėra; plotis:. 15px; aukštis: 15px; line-height: 15px; text-align: center; kalbomis: bloko; float: left; fonas: # D8D8EB; pelnas: 0 . 1px 0 0; text-decoration: none;}

Carousel_paging: hover, carousel_paging dabartinis {background: # 4D4D9B; spalva: # FFFFFF;}.

Gerai! yra maža problema, nors ieškos inkarai, jei nustatytas, tada jis bus generuojami visada po karuselės komponento. Aš norėjau, kad ji kintamą, taip pat, bet tada tiesiog laikyti Script užpučia proporcijų, aš nusprendžiau praleisti jį.
Bet jūs žinote, šiek tiek "Javascript", galite lengvai keisti ieškos kartos kodą į MooCarousel klasę prašome jūsų poreikius.

2. , Tinkinimas į kairę & Dešiniuoju piktogramos

Talpinimu, vaizdo ar, bet displat nuosavybę KAIRĖN ir DEŠINĖN mygtukus galite pakeisti tiesiog žaisti aplink su CSS. galėtų pakeisti kairiojo ir dešiniojo buttoms vietas buvo tikroji priežastis, kodėl mane dešinėje mano mūsų Karuselė klasės.
Nuo, tai MooCarousel klasė, pritaria id iš šių mygtukų, jūs iš tikrųjų galite įdėti šiuos mygtukus bet kurioje puslapio vietoje, jei galite ... ji neturi būti elementų hierarchijoje, kaip mano pavyzdyje.

var carousel1 =. naujas MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa);

CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; pozicija: giminaitį; plotis: 23px; aukštis: 20px; float: left; žymeklis: rodyklė;}

Carousel_container_r {background-position: 0-38px;}

Carousel_container_l {background-position: 0-58px;}

3. Pritaikyti skaidrių padėtys

Ką reiškia MANO Pritaikyti skaidrių žingsniai?
Dauguma karuselės įstumkite visą matomo lango. Taigi pasakyti jums turėjo keturis elementus (pvz., mano mėginio aukščiau), ji bus skaidrę visus keturis elementus. Su šio Karuselė komponento, Jūs perduoti savo pasirinkimą skaidrių ir žingsnio dydis.

var carousel1 =. naujas MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, tiesa);
c_ns = skaidrių skaičius, c_sss = skaidrių keitimo žingsnio dydis

Be to, mano example1 aš calcuted skaidrių keitimo žingsnio dydis, remiantis logika jeigu aš žinau, elementų skaičių, kiekvieno elemento plotis ir paraštes, kurie po kiekvieno punkto mano CSS.

/ * 1 Bachanalia, * /

var c1_w = 92; / / Bachanalia punktas plotis

var c1_n = 10; / / Viso palyginimui Bachanalia Items

var c1_pp = 4 / / Numeris palyginimui Bachanalia elementai perpage

var c1_marginFactor = 51;

c1_sss var = c1_w * c1_pp; / / sss = skaidrių keitimo žingsnio dydis

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = skaičius skaidres

c1_sss + = c1_marginFactor; / / sss = skaidrių keitimo žingsnio dydis, 51 maržos

Reikalavimai: MooTools 1.2

Žiūrėti Demo | Parsisiųsti MooTools Karuselė Su ieškos versija 1.0 straipsnio Siuntėsi 1994 kartus)

MooRating yra paprastas (kirsti naršyklės, žinoma, kaip ji naudoja, MooTools bibliotekoje galią), lengvos ir puikiai MooTools pagrįstas įvertinimas sprendimą. Tai nėra vadinama "Įvertinimas žvaigždutėmis", tiesiog, nes įvertinimas vaizdas gali būti, kaip jums pasirinkti (aš žvaigždes, Barai ir širdį su atsisiųsti, bet jūs galite kurti savo įvairių ir tiesiog palikite jį).

Kaip tai atrodo:

	MooTools Reitingas įvairius vaizdus Peržiūrėti Demo
	MooTools Reitingas procentiniais vertybių Peržiūrėti Demo
	MooTools su daliniais vertybių Reitingas Peržiūrėti Demo

Parsisiųsti Mootols Įvertinimas žvaigždutėmis Script'o (Siuntėsi 718 kartus)

Reitingas duomenys: sveikasis skaičius, dešimtainis arba procentas
Šiuo scenarijus yra sukurtas rodyti reitingų duomenis, sveikų vertybių 1,2,3,4,5), po kablelio (1,24, 3,45 ir tt) arba procentais (12%, 55% ir tt). Galima tiesiog pakeisti kai kurias vėliavos vertybių javascript moorating.js pasirinkimas parodyti nors iš minėtų formatų duomenis)
Iš esmės yra du e dvi vėliavas žaisti, rodyti reikšmes pasirinktu formatu ...

var inpercent = false; / / Nustatykite shita tiesa, jei reikia, procentinė dalis turi būti rodomas
var isFractional = false / / Nustatome, kad tai tiesa, jei norite dalinės vertybes, pavyzdžiui, 1,24, 1,25, 4,56, o ne 1,2 ... 5

Ir aš nemanau, yra visas reikalingas paaiškinimas. Be to. Scenarijus yra labai paprasta. Jei žinote šiek tiek javascripting, tu gali pakeisti scenarijų gauti jokio rodoma vertė. Pvz jei norite būti rodomi trijų skaitmenų po kablelio ... tiesiog įgnybti scenarijų, kaip nurodyta toliau ...

jei (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);} / / 2 pasikeičia į 3
else {moostartval [i] innerHTML = Math.round (x).

Įvertinimas vertė atnaujinimas:
Aš havent nesiteikė raštu AJAX scenarijus atnaujinimo įvertinimą vertę, nes aš žinau iš savo patirties, kad ne visada ji ketina atnaujinti įvertinimas, kai vartotojo normos kažką. Jūs esate laisvi daryti ką nori su vardinės vertės, atnaujinti naudojant AJAX arba pateikti jį arba Nustatyti paslėptą formos lauko reikšmę, turi būti pateikiami su visa forma ir kt.

funkcija updateRating (id, įvertinimas) {
/ / Alert (id + "" + įvertinimas);
/ / Darykite, ką tik su reitingavimo
}

Yra funkcija javascript, vadinamas "updateRating". Ši funkcija buvo perduota ID Rating Div, nustatyti, kad, reitingai straipsnio, jei yra daugiau nei vienas reitingai puslapyje), buvo atnaujintas ir reitingo vertė [updateRating (id, įvertinimas). Galite pasirinkti ką norite su šiomis vertybėmis, kaip jau minėjau anksčiau.

Reitingas Nuotraukos: žvaigždės, širdys, Strypai ar ko nors prašome.
Keitimas įvertinimas bet kuriai iš minėtų rūšių (žvaigždės, širdys ir tt) yra labai paprasta. Tiesiog sukurkite vaizdą, panašų į tą, kuri numatyta ir upuść jį. Atminkite, jei jūs pakeisite atvaizdo pavadinimą, daryti, padaryti būtinus pakeitimus į CSS failą, žr.

. Moostar {margin: 0px salonas: 0px; perpildymas: paslėptas; plotis: 84px; aukštis: 20px; float: left; background: url ("stars.gif") pakartoti x;}
Moostar span {float: left; marža: 0px salonas: 0px; kalbomis: blokas, plotis: 84px; aukštis: 20px; text-decoration: none; teksto įtrauka: 9000px z-index: 20;}
Moostar Pylimas {background: url ("stars.gif) paliko 25px;}

Dauguma įvertinimai raštai naudoti žvaigždę ir 1/2 žvaigždučių vaizdus su pele ant kiekvienos žvaigždės per renginius. Moo Reitingai naudoja paprastą Sprite atvaizdą kaip fono paveikslėlį, norint pasiekti reikiamus vaizdo efektus su labai mažu važtaraščius.

Reikalavimai: MooTools 1.2
Parsisiųsti Mootols Įvertinimas žvaigždutėmis Script'o (Siuntėsi 718 kartus)

Firefox ... kartais galbūt jau pastebėjote, kad žymeklis ekrane pradeda mirksėti. Tai gali atsitikti, kai paspausite ant bet kurio elemento puslapyje, kvadratas arba atvaizdą ir tt Tai naršyklės lango mirksi kursorius yra faktiškai PRIEINAMUMAS Žanras Firefox vadinamas "Žymeklis naršymo". Šie bruožai leidžia / leidžia vartotojams pasirinkti puslapio tekstą su klaviatūra (kuriuos mes paprastai linkę daryti su mūsų pele).

Gerai! jei donot norite šią funkciją ... paprastas paspauskite "F7" perjungti jį į klaidingas ir atvirkščiai (jei norite jo). Taip pat galite įvesti "about: config" į adreso juostą (tipas "karetkę" filtro lauke) ir tiesiog dukart spustelėkite pakeisti "false parinktį" accessibility.browsewithcaret ", iš" tiesa "(pasukite Caret naršymui) "(įjungti Žymeklis naršyti išjungtas)

Aš ieškojau dvigubo pridėtų šliaužiklį (slankiklį su dviejų rankenėlių, minimalių ir maksimalių), naudojant MooTools. Nors, aš rasti keletą well done dvigubai prisegtą slankiklį MooTools forume, tik problema buvo ta, kad visa tai slankmačiai įdauža pasirinktą nuotolio žymeklį. Pagaliau! Aš nusprendžiau sukurti mano paties. Gerai! Aš naudoti originalų kodą ir pakeisti jį slankiklį foną, nurodytą diapazonas atrenkami vizualiai, nes mano žemiau esančiame pavyzdyje. BLUE sritys rodo pasirinktą vertę spektrą.

Peržiūrėti Versija 2.2 Demo | Parsisiųsti MooTools Dvivietis Svarbi Slider versija 2.2 (atsisiųsta 11809 kartus)

Jūs galite labai lengvai pakeisti išvaizdą ir jausti nuotolio rodiklį mėlynos pirmiau pateiktame pavyzdyje), slankiklio rankenėlė, slankiklio takeliui pakeisti slider.css, kaip reikalaujama.

Ar išskleidžiamajame man komentarą, jei jums naudingas.

Prieš mums teko susidurti su CSS sukurti puslapių maketus, derinant tam tikrą turinį viduje lentelės langelį atrodė tik vaikų žaidimas. Tiesiog nustatykite "align" arba "valign", lentelėje turi savo pasirinkimą derinimą, torto gabalas nuosavybė!
Su CSS išdėstymai, nors mes turime "vertical-align" turtą elementų, jis ne atrodo taip paprasta, kaip "align" arba "valign", savybių. Norėdami būti daugiau specifiic, "vertical-align" niekada, atrodo, išspręsti jūsų problemos, ypač jei yra parašyti įvairių naršyklių CSS gabalas.

Be HTML lentelėse, centravimo ant objekto problema, tai kai per turinčio padalinys vaizdas arba tekstas, tikriausiai kiekvienas UI / CSS kūrėjai košmaras tam tikru momentu. Šis problema toliau Ekstrapoliavusi, savo rūpesčius suderinti, jei objektas turi būti centre, yra dinamiškas pobūdžio, ty kai jos aukštis yra nevienodas (nežinoma aukštis).

Nors nėra žinoma tiesiai į priekį sprendimas, kad būtų vykdomos visose naršyklėse, mes turime spręsti, sprendimas, kad aš bandė atvykti ne daro, atrodo, dirbti, kad aš išbandžiau keletą naršyklių (IE6, IE 7 , FF).

SPRENDIMAS:
Naršyklėse kaip Mozilla, Opera ir Safari, keistai elgiasi, "vertical-align" nuosavybė gali būti patraukti savo pojūčiais, tiesiog "Ekranas" turtą turinčio padalijimo "stalo ląstelių kalbomis: lentelės ląstelių) .

Problema vis dar lieka IE naršyklių šeimai, kuris, tačiau neatrodo, kad suprastų, ką turi "lentelės ląstelių" nuosavybės ir nežino, kaip jie, jie tiesiog ignoruoti. Sprendimas pateikiamas toliau, nors paprastų, Reklamuokitės keletą daugiau DOM elementus į savo HTML padaryti dalykai įvyktų.

CSS ir HTML atrodo taip
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> Peržiūrėjimų skaičius: 3456 </ div>
</ Div>
</ Div>

Rezultatas atrodo taip:

peržiūrėti demo čia | Parsisiųsti šaltinio failus (atsisiųsta 452 kartus)

Top išlygina CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> Peržiūrėjimų skaičius: 1234 </ div>
</ Div>
</ Div>

Rezultatas atrodo taip:

Dugnas Suderinti CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> Peržiūrėjimų skaičius: 1234 </ div>
</ Div>
</ Div>

Rezultatas atrodo taip:

peržiūrėti demo čia | Parsisiųsti čia

Atrodo, amžiaus, nes aš bandžiau rasti tinkamą sprendimą į šią lygiavimo problemą. Bet dabar su šio tirpalo, jaučiuosi šiek tiek taikos.

Su viltimi, kad kažkada

• Vertikalus lygiavimas CSS nuosavybė veiks taip, kaip ji viduje lentelės langelį, BE įveikti daug aplink avilį
• Bent jau margin-top: automatinis ir margin-bottom: automatinis, duos tokį patį rezultatą kaip su margin-left ir marža teisė rinkinys auto
• Naršyklė karai bus per tam tikrą dieną.
• Yra tik viena naršykle.

Parsisiųsti CSS ir HTML Pirmiau pateiktas sprendimas čia (atsisiųsta 452 kartus) .. suprantamumo, CSS nebuvo optimizuotas

PS: Ir beje, tie, kurie miniatiūros kai kurių nuotraukas aš spustelėjo ...