2009 Мар 18 2009

Додавање ДропСхадов Да слика помоћу ЦСС

Још један брзи тут. Овде је нешто једноставно и лепо Користећи моћ ЦСС ... али је било тешко цонциеве (и то сигурно нисам ја) да се почне са. Додавање Дропсхадов, можда пеице колача за многе од нас, користећи неку слику као што су алатке за обраду Пхотосхоп АНФ Фиреворкс итд
Разлог зашто сам се определила за дроп сенке помоћу ЦСС је да, обично при прављењу странице дизајн / ХТМЛ код апликације, захтеви задржати итератинг. Хоћу да кажем, У постојећем веб сајт са пуно слика, попут оних које приказују фреиндс листу или галерију слика, то ће бити тешко да репроцесс цео оптерећења од слика које су већ истоварени да додате или уклоните сенке, за које ствар.
Дакле, ако сте урадили мало напред размишљања, док стварање ХТМЛС да додате ове додатне дивизије или обично је ситуација да имате петљу логике генерисање ове иконе / сличице у КССЛ, ПХП. ЈАВА или било који други програм / скрипт језик, можете га додати у било које време, онда је само питање емисије и скривао ове сенке помоћу ЦСС Дисплаи имовину, као по клијенте икада мењају услове ... Ја хавн'т урадио ову врсту размишљања напред пре тога ... али ахев почео сада!

У следећем примеру, оригинална слика је сенка бесплатан и дропсхадовс се примењују по потреби! Такође, сам отишао мало више, користећи трикове мог ранијег тут (Велл! ово вероватно најкраће сорта туторијала, тако да је оправдано само називајући их "Тут" 'а) око Коришћење ЦСС Цлип објекат за покажете само

Оригинална слика

original_image

ЦСС ДропСхадов Резултати
css_dropshadow_results
Погледај Демо се | Довнлоад соурцефилес


2009 Мар 17 2009

Ундерстанднг ЦСС Цлип објекат

Зашто желим да разумем ово? Хумм ...!

Већина писаца ЦСС сложити да ЦСС цлип имовина је вероватно један од највише коришћених УН-ЦСС својства. Било је тако истина и за мене и био најсрећнији да га занемарују, док нисам почео допунама МооТоолс ДВА дугме (ПИН) клизача компоненту са опсега степена) .

Постојао је добар предлог једног од саставних корисницима да измените компоненту клизача користећи поткресаног бацкгроуд слике (против променљиве ширине поделе) да укаже на опсег клизача. Тако је дошао мој тренутак да уђу у забавно, али УН-овлашћених (за мене наравно) воде на ЦСС Цлип имовине.

Добро! Колико тешко може бити? Није уопште много ... ДА и НЕ. Синтакса за коришћење ЦСС Цлип имовине је веома усправно, али значење / усуаге је мало црооцкед. Са меморијом као што је моја, несто сам да седим обрадом на мом клизачем скрипте ... Имам токееп мислећи назад на коришћење овај клип имовине, да се подсетим логику да сам створио, у мом писму .... Отуда! Сматра се да оловком га, са надом да запамтите да будућност (као и за добробит оних који су изгледа запањен по ЦСС Цлип имовини)

Шта ЦСС цлип ради?

Клип је део визуелне ефекте модулу ЦСС 2.1. Једноставно речено, њен задатак је да ставите видљив прозор на врху објекта која се прикачен, па цлиппинг фотографија и креирање сличице, без потребе да креирате додатне датотеке (што сам већ ставио ову функцију да боље употреби на клизачу компоненте :) )

Коришћење ЦСС Цлип имовине, можете да креирате исечак користећи рецт облик. Као и многе друге ЦСС својства (као маргина, Преграда итд), користећи рецт захтева четири координате врх, десно, доле, лево (ТРБЛ). Црооцкед природа овог имовине одражава када изблиза погледате снимак како се израчунава клипинга регион, помоћу ова четири координате (мозак шаље у жреб за неко време). Сада да вас збуни дно почиње од врха, као и право почиње са леве стране. :) . Видиш шта сам рекао? .... Дакле овај пост ...

Ова мала конфузија може лако нестати, са овим визуелним објашњење ЦСС Цлип / рецт имовине као испод!

ЦСС Цлип Захтеви

Задатак смо почели да је снимак на следеће сличице у скуарер гледа слике (као и широкоугаони слика)

original_image clip_demo
Оригинални Тхумбнал / Слика Цлип Захтеви за Скауре Тхумбмаил

ЦСС Цлип Резултати

clip_results

Погледај Демо се | Довнлоад соурцефилес


2009 Јан 2 2009

Како укључити ВордПресс Блог у другом сајту

Ово питање пало на памет неколико пута раније, када сам радила на сајтовима раније превише, који се користи да покаже ВордПресс блогове или нову врсту садржаја у неком делу сајта / портал.Беинг почетник у ПХП и око ВордПресс, наставио сам да процастинатинг га, мислећи "то није мој пеице колача". Коначно! Овај захтев је дошао Упто мог носа, када је почео око Диггин мало за решење.
Био сам изненађен да откријете да је стварно било лакше него што сам стварно мислио да је то, да бисте приказали листу наслова или последњи пост на било које друге странице изван УордПресс погон делу, користећи само мало ПХП и ВордПресс АПИ .

Ево шта да урадите: -
Ради објашњења, претпоставити да је Ваш сајт хттп://ввв.инцхембур.цом/ и имате секцију за вести на овом сајту хттп://невс.инцхембур.цом/~~побј (који је покренут ВордПресс). Сада је услов да се покаже последњи пост од хттп://невс.инцхембур.цом/~~побј на насловној страници главног сајта, тј хттп://ввв.инцхембур.цом/индек.пхп

Корак 1: У вашем индек.пхп додајте следеће пеице кода, укључите УордПресс АПИ фајл. Можете да додате ово на врху странице коју желите да се појави ваш пост на.

<ПХП?
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme дефине ('ВП_УСЕ_ТХЕМЕС', фалсе); / / Дисбабле коришћење УордПресс Тема
рекуире ('/ вар / невс.инцхембур.цом / вп-блог-хеадер.пхп'); / / инцлуде ВордПресс АПИ
; // Get Latest Post куери_постс ('сховПостс = 1'); / / Гет латест пост
>?

У наведеном пеице инцлуде, ми добијамо само једну најновију поруку. ако желите да испробате више варијација слободно да копају у, query_posts() .

Корак 2: Сада, у делу Индек / Главна страна на којој желите да прикажете последњи пост у ВордПресс хттп://невс.инцхембур.цом , користите следећи код. Непотребно је рећи, слободно оглас своје стилске поделе, распона и класе по вашим дизајнерским потребама.

Корак 3: Не постоји Корак 3 ... Тхатс ит ... сте урадили!


Наравно, можете покушати неколико варијације по вашим захтевима (као што сам раније поменуо, погледајте query_posts() ). Херес неки тастера ...

Како показују одређени пост / страницу насупрот последњи пост: -
Ово може лако остварили променом аргументе да query_posts() укључи ИД страницу или страницу гутљај

) ; куери_постс ('паге_ид = 7');
) ; куери_постс ('пагенаме = око');

или можете да контролишете број порука:
) ; куери_постс (сховПостс = 3);


2008 Оцт 25 2008

Динамички Лоадинг су ЈаваСцрипт

Понекад да пагевеигхт доле ... ми смо подељени у фрагментима наше скрипте ... Ови фрагменти јавасцрипт може да се учита као и када је то потребно (на неком догађају или кликом на линк или дугме итд).

Лоадинг Јавасцриптс динамички је прилично једноставна и равно напред испод ...

= “text/javascript” > <Сцрипт типе = "тект / ЈаваСцрипт">
Функција лоадНевСцрипт (извор) {
вар а = доцумент.цреатеЕлемент ('писмо');
с.сетАттрибуте ('тип', 'тект / јавасцрипт ");
с.сетАттрибуте ('срц', извор);
доцумент.боди.аппендЦхилд (а);
}
</ Сцрипт>

и можете имати следећи линк позива било где у телу, или можете имати ову скрипту "онЛоад" од самог документа ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a >хреф = "јавасцрипт: лоадНевСцрипт ('миДинамицСцрипт.јс');"> Динамичка оптерећења скрипте </>

или

<боди онлоад="лоадНевСцрипт('миДинамицСцрипт.јс');">


2008 Оцт 17 2008

Мис-понашају ИЕ8: ЦСС Лаиоут бреакагес (Циљање на верзију претраживача помоћу мета тагова у ИЕ8)

Ако сте ЦСС особа, требало би да знате бол у добијање своје радне распореде унакрсно бровсер. ИЕ8 је још један кључ у ради за нас програмере. Аниваз! ако погодите на овом питању, као што сам урадио јуче, где је ваш савршено ради ЦСС у ИЕ7 (и раније) и Фирефок је изненада почели да бацају озлојеђено у ИЕ8, пробајте ово ... То је лепо изгледало да решите своје проблеме у овом тренутку ....

Користећи Мете декларације, можемо навести рендеринг енгине желимо ИЕ8 за коришћење. Тако да натера да донесе ИЕ8 као ИЕ7 ... Убаците следећу метаознаку у глави документа: -

<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=7" />

По подразумеваној вредности ИЕ Мета би била: -

<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=8" />
што би ИЕ8 рендерује страницу користећи нове стандарде режим.

Ако је потребно, ова синтакса може да се користи да се прими за другим прегледачима као што следи:

<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=8;ФФ=3;ОтхерУА=4" />


ВИШЕ О ДОЦТИПЕС:

АКО сте још увек нисте упознати са врстом животиња под називом "ДОЦТИПЕ" ... овде је неки брз чита
Шта су ДОЦТИПЕС? Шта су БРОВСЕР КУИРКС и ОДРЕЂЕНОЈ Моде?
Подешавање ДОЦТИПЕ у КССЛ

За више у дубину разумевања о ДОЦТИПЕС, покушајте да посетите ове линкове ...
Списак Апартман: Поправите свој сајт са добром ДОЦТИПЕ!
Списак Апартман: Иза ДОЦТИПЕ: Веб стандарди, Напред компатибилности и ИЕ8

Напомена: Иако су многи од нас ХТМЛ / ЦСС људи били занемарујући значај ДОЦТИПЕ децлератион у нашим документима, Подешавање праву ДОЦТИПЕ, обично је одговор на већину питања цросс-бровсер.


2008 Нов 9 2008

Једноставно Рингишпил Са Пејџинг Коришћење Моотоолс

Са разних Цароуселс тамо, за многе Моотоолс као добро, ја ипак одлучио да напише сопствену Цласс Рингишпил, за неких добрих разлога
1. Желео пејџинг функцију (да би могли да скочи одређени слајд / корак у карусел).
2. Вантед слобода са пласманом на левом и десном тастеру / линкови, где год хоћу.
3. Више контроле над слајдова корака.

Ја сам успео да створи нову карусел, са наведеним карактеристикама ... као испод ... Слободно да предложи било какве измене које би захтевале!

Мом примеру изгледа овако ... [ Погледај демо ]
Моотоолс Рингишпил Са Пејџинг

Погледај Демо се | Довнлоад Моотоолс карусел Са пејџинг Версион 1.0 (Довнлоадед 1971 тимес)


1. Рингишпил Пејџинг

Можете лако да додате пагинг то иоур карусел, једноставно постављање пејџинг заставу, која је прошле паратер прошао приликом креирања инстанцу МооЦароусел на тачно желите (пејџинг) или фалсе (донот желе пагинг).

вар = цароусел1 нови МооЦароусел ('цароусел1_враппер', 'цароусел1_итемс_цонтаинер', 'цароусел1_мовелефт "," цароусел1_моверигхт ", ц_нс, ц_ссс, труе); / / НС = број слајдова, ССС = слајд корак величина

И наравно можете да промените изглед-Н-стил ових пејџинг ацхорс што Вас изменом њиховог ЦСС.

Цароусел_пагинг {тект-алигн: лефт; паддинг: 10пк 0 0 5пк;}.
Цароусел_пагинг струја, цароусел_пагинг страна {Оутлине: нико, ширина:.... 15пк; висина: 15пк; лине-хеигхт: 15пк; тект-алигн: центер; дисплаи: блоцк; флоат: лефт; бацкгроунд: # Д8Д8ЕБ; маргин: 0 1пк 0 0; тект-алигн: лефт;}

Цароусел_пагинг: ховер, цароусел_пагинг струја {бацкгроунд: # 4Д4Д9Б; цолор: # фффффф;}...

Добро! мада постоји мали проблем, Тхе пејџинг сидра, ако скуп, онда ће се увек генерисана после Рингишпил компоненте. Желео сам да га као динамичан, али онда само да скрипту за дување од пропорција, одлучио сам да га прескочите.
Али, знате мало Јавасцрипт, можете лако да измените код пејџинг генерације у МооЦароусел класе молимо да ваше потребе.

2. Прилагођавање на леви и десно иконе

Можете променити СМЕШТАЈ, слике или било дисплат имовину Лево и десно дугме просто играјући около са ЦСС. да би могли да промените пласман на Лево и Десно буттомс био стварни разлог за мене да прави мој нашем Рингишпил класе.
Пошто је ово МооЦароусел класа, прихвати ИД је ових тастера, можете заправо да постави ове Дугмад било где на страници, ако се молимо ... не мора да буде елемент у хијерархији, као у мом примеру.

вар = цароусел1 нови МооЦароусел ('цароусел1_враппер', 'цароусел1_итемс_цонтаинер', 'цароусел1_мовелефт "," цароусел1_моверигхт ", ц_нс, ц_ссс, труе);

ЦСС
. Цароусел_цонтаинер_л, цароусел_цонтаинер_р {маргин: 50пк 0 0 0; позиција: релативна, ширина: 23пк; висина: 20пк; флоат: лефт; курсор: показивач;}.

Цароусел_цонтаинер_р {бацкгроунд-позиција: 0-38пк;}.

Цароусел_цонтаинер_л {бацкгроунд-позиција: 0-58пк;}.

3. Прилагођавање слајдова Кораци

Шта мислим МИ Прилагодјавање КОРАЦИ слајду?
Већина Цароуселс повуците пун видљивог прозору. Дакле, кажете да сте имали четири ставке (као у мом узорку горе), то ће померите све четири ставке. Са овим Рингишпил компоненте, можете проћи број слајдова и величину корак по свом избору.

вар = цароусел1 нови МооЦароусел ('цароусел1_враппер', 'цароусел1_итемс_цонтаинер', 'цароусел1_мовелефт "," цароусел1_моверигхт ", ц_нс, ц_ссс, труе);
ц_нс = број слајдова, ц_ссс = слајд корак величина

Такође, у мом екампле1 сам цалцутед слајд корак величину, заснована на логици где, знам број ставки, ширину по свакој ставци и маргине које су дате после сваке ставке у мом ЦСС.

/ * За банчење 1 * /

вар ц1_в = 92; / / банчење Артикал Ширина

вар ц1_н = 10; / / укупан број ставки Цомпарисион банчење

вар ц1_пп = 4 / / Број Цомпарисион ставке банчење перпаге

вар ц1_маргинФацтор = 51;

вар = ц1_ссс ц1_в * ц1_пп; / / ССС = слајд корак величина

вар = ц1_нс парсеИнт (((ц1_в * ц1_н) / ц1_ссс) + .5); / / НС = број слајдова

ц1_ссс + = ц1_маргинФацтор; / / ССС = слајд корак величина, за 51 маргинама


Захтеви: Моотоолс 1.2

Погледај Демо се | Довнлоад Моотоолс карусел Са пејџинг Версион 1.0 (Довнлоадед 1971 тимес)


2008 Нов 2 2008

Једноставно цросс-бровсер Оцена сценарио за Моотоолс

МооРатинг је једноставна (цросс-бровсер, наравно, јер користи моћ МооТоолс библиотеке), лагане и одличан Моотоолс заснива оцену решење. Није назвао као "Стар Рејтинг", једноставно зато што, рејтинг слике која може бити као што сте изабрали (Ја сам звезда, под условом Кафе барови и срца са преузимањем, али можете да креирате сопствени избор и само га спустите у).

Како то изгледа:

Оцена моотоолс са различитим сликама Погледај Демо
Оцена моотоолс са процентом вредности Погледајте демо
Оцена моотоолс са фракционом вредностима Погледај Демо

Преузми Моотолс Звезда Оцена Скрипта (Довнлоадед 714 тимес)

Оцена подаци: цео број, децимални или проценат
Тренутно скрипта је осмишљено да приказује податке као оцена целог вредности (1,2,3,4,5), у децимале (1.24, 3.45 итд) или у процентима (12%, 55% итд). Избор за приказ података у било ком од поменутих формата могу једноставно подесити променом неких застава вредности унутар ЈаваСцрипт (мооратинг.јс)
У основи постоје две е две заставице да играју са, за приказивање вредности у формату по вашем избору ...

вар инперцент = фалсе; / / Постави овај заставу истина, ако вам је потребан проценат вредности које ће бити приказане
вар исФрацтионал = фалсе / / Сет то истина, ако желите фракциони вредности као што су 1.24, 1.25, 4.56, а не 1,2 ... 5

И донт мислим да је било потребно објашњење за то. Штавише. Скрипта је врло једноставна. Ако знате мало јавасцриптинг, можете да измените скрипту да добију сваку врсту вредности приказане. На пример, ако сте желели три децимална места који ће бити приказани ... само подеси скрипту као испод ...

ако (исФрацтионал) {иф (к <= 5 | | к> = 0) моостартвал [И] иннерХТМЛ форматНумбер = (к 3).} / / 2. мења се и 3
елсе {моостартвал [и] = иннерХТМЛ Матх.роунд (к).;

Ажурирање Ратинг вредност:
Ја лука смета писање било АЈАКС скрипте за ажурирање оцене вредност, јер знам из мог искуства то не увек раде она намерава да ажурира рејтинг чим цене кориснички нешто. Ви сте слободни да урадите шта год желите са номиналном вредношћу, Упдате користећи АЈАКС, односно достави га или подесите вредност скривеног поља обрасца, који се достављају са целокупном облику итд

Функција упдатеРатинг (ИД, оцена) {
/ / Алерт (ИД + "," + оцена);
/ / Ради шта и оцене
}

Постоји функција у ЈаваСцрипту под називом "упдатеРатинг". Ова функција је прошло ИД рејтинга Див, да се идентификују као што оцене (уколико постоје више од једне оцене на страници) је измењен и вредност рејтинга [упдатеРатинг (ИД, оцена)]. Можете да одаберете да шта год желите са овим вредностима, као што сам раније поменуо.

Оцена Слика: Старс, срца, Кафе барови или било шта, молим Вас
Промена рејтинг на било који од наведених типова (звезде, срца итд) је веома једноставан. Само направите слику сличну оној под условом и да га спустите унутра Запамтите, ако промените име слике, не чини неопходне измене у ЦСС фајлу, види доле.

Моостар {маргин: 0пк; бордер: 0пк; Преливање: сакривен, ширина: 84пк; висина: 20пк; флоат: лефт; бацкгроунд: урл ('старс.гиф') репеат-к;}.
Моостар п {флоат: лефт; паддинг: 0пк; бордер: 0пк; дисплаи: блоцк; ширина: 84пк; висина: 20пк; тект-алигн: лефт; тект-индент:-9000пк, з-индек: 20;}.
.. Моостар Цурр {бацкгроунд: урл ('старс.гиф') оставио 25пк;}

Највише оцене додаци користите звезду и пола звездице слике са мишем преко дешавања на свакој звезди. Моо Оцене користи једноставну Сприте слику као позадинску слику за постизање потребне визуелне ефекте са врло малим оптерећењем.

Захтеви: Моотоолс 1.2
Преузми Моотолс Звезда Оцена Скрипта (Довнлоадед 714 тимес)


2008 Оцт 20 2008

Трепери курсор у Фирефок - Приступачност Царет Бровсинг

У Фирефок ... понекад можда сте приметили да курсор трепће на екрану. То се може десити када кликнете на било који елеменат на страници, поделу или слику итд трепери курсор у прозору прегледача је заправо ПРИСТУПАЧНОСТ функција Фирефока под називом 'уметање претраживања'. Ово укључује дозвољава / омогуцава корисницима да изаберете текст на страници са тастатуре (које смо иначе склони да уради са употребом нашег миша).

Добро! уколико желите донот ову функцију ... једноставно притисните "Ф7" да га переклиуцхенииа на лажна и обрнуто (ако га желите НА). Можете да откуцате "абоут: цонфиг" у аддресс бар (тип у "уметање" у филтер поље) и једноставно двоструко кликните да промените опцију "аццессибилити.бровсевитхцарет" од "истина" (окрените уметање претраливања на) да "лажни "(окрените уметање претражује ОФФ)


2008 Оцт 24 2008

Моотоолс Клизач Са две дугмади (Дупли Пиннед Клизач) са Ранге Показатељ

Сам био у потрази за двоструког слајдер (клизач Пиннед са два потенциометара, минимум и максимум) користећи моотоолс. Мада, ја сам наћи неколико добро урадио двапут Пиннед клизач у моотоолс форуму, једини проблем је био да све то клизачи напор имају изабраног опсега маркер. Коначно! Одлучио сам да креирате сопствени. Добро! Ја сам користим оригинални код и модификовати га да има позадину клизач који приказује опсег изабран визуелно, као у мом примеру. Тхе Блуе области указује на опсег вредности одабрали.

Погледај Версион 2.2 Демо | Довнлоад Моотоолс Двоструки клизач Пиннед Версион 2.2 (Довнлоадед 11276 пута)
Пиннед моотоолс дупли слајдер

Можете веома лако променити изглед и осећај опсегу индикатора (у плаво у горњем примеру), клизачем Кноб, клизача мелодијама изменом слидер.цсс по потреби.

Да ли ми Дроп коментар ако га пронаћи корисне.


2008 Оцт 12 2008

Вертикално (и хоризонтално) Центар Поравнавање садржаја у ДИВ помоћу ЦСС

Пре него што смо имали да се носе са ЦСС-ом да креирате своје распореде странице, усклађивању неки садржај унутар ћелије табеле изгледало само дечија игра. Једноставно подесите "алигн" или "валигн" власништво табеле да имају поравнање по вашем избору, комад торте!
Са ЦСС распореда, мада имамо "вертицал-алигн" имовину за елементе, не изгледа да буде једноставно као "алигн" или "валигн" својстава. Да би више специфииц "вертицал-алигн" никада не изгледа да реши ниједан од ваших проблема, посебно ако се напише комад крос-бровсер ЦСС.

Без коришћења ХТМЛ табела, ПРОБЛЕМ центрирање на објекту, било да слика или неки текст који садржи унутар поделе, вероватно је био сваки УИ / ЦСС програмери ноћна мора у неком тренутку. Овај проблем додатно ектраполатес ваше бриге о усклађивању, ако објекат да буде центриран је динамичан у природи, односно када је њена висина је променљива (непозната висина).

Иако не постоји познати равно напред решење које ће радити преко опсега претраживача морамо бавити, решење које сам покушао да дође изгледа да раде у неколико прегледачима које сам пробао у (ИЕ6, ИЕ 7 , фф).

РЕШЕЊЕ:
У прегледачима као што су Мозилла, Опера и Сафари и чудно се понаша "вертицал-алигн" имовина може бити изведени пред својим чулима, једноставно постављање "Екран" имовину која садржи поделе на "стони ћелије" (приказ: табела-ћелија) .

Проблем и даље остаје са ИЕ бровсер породице, који, ипак изгледа да не разуме шта то са "табле-целл" имовине и незналице као што су они, само они га игноришу. Решење дато у наставку, иако једноставне, рекламе неколико ДОМ више елемената у ХТМЛ да би се ствари дешавају.

ЦСС и ХТМЛ изгледа овако
.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;
}

ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер">
<див цласс="обј"> <имг срц="имаге1.јпг"/> <бр/> виевс: 3456 </ див>
</ Див>
</ Див>

Резултат изгледа овако: -

ХТМЛ_ЦСС_вертицал_алигн_вертицал_миддле_алигнед_имагес

видите овде демо се | Довнлоад изворне датотеке (Довнлоадед 446 тимес)


Разумевање решење:
За претраживаче који разумеју Приказ: табеле и приказ: табела-карактеристике ћелија, то ретко потребно никакво објашњење. За ИЕ, уз коришћење ИЕ специфичан хацк (хеш хацк), ми смо апсолутно позиционира контејнер објекат (обј_цонтаинер) у половини висине расположивог. Тада објекат (обј) у оквиру позиција је релативно и преселио се за половину своје висине ... Па! Чини ми се да разумем изглед на Вашем лицу, али ради. Пробајте!
Поменуте технике се комбинују да дају нам крст изнад решење прегледача.


ЦСС може да се лако модификује као испод да се постигне, вертицал-алигн: топ или вертицал-алигн: боттом

ТОП Поравнај ЦСС
.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;
}

ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_топ">
<див цласс="обј_топ"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>

Резултат изгледа овако: -

ХТМЛ_ЦСС_вертицал_алигн_вертицал_топ_алигнед_имагес

БОТТОМ Поравнај ЦСС
.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;
}

ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_боттом">
<див цласс="обј_боттом"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>

Резултат изгледа овако: -

ХТМЛ_ЦСС_вертицал_алигн_вертицал_боттом_алигнед_имагес

видите овде демо | Довнлоад овде


Хоризонтална центрирање објекта једноставно постићи са маргине имовине, тако што ћете подесити маргин-лефт и маргин-боттом да аутоматски

Изгледа као стари, јер сам покушавао да пронађе разумно решење овог проблема поравнање. Али сада са овим решењем, осећам се мало на миру.

Са надом да Сомедаи

  • вертикално поравнавање-имовина у ЦСС ће радити као да ради унутар ћелије табеле, без потребе да се пуно туку око грма
  • У најмању руку, подешавање маргин: ауто и маргин-боттом: Ауто, даће као резултат исти као и са паддинг-лефт и маргин-боттом подесити на Ауто
  • У Бровсер ратови ће бити у неком дану.
  • Ту ће само ЈЕДАН претраживач за СВЕ.

Преузмите ЦСС и ХТМЛ горе наведеног решења овде (Довнлоадед 446 тимес) .. за разумљивост, ЦСС није оптимизована

ПС: И узгред, они су сличице неких слика које сам кликнули ... :)


НДК Почетна | Изражавајући ИТ | Изражавајући Палате | Изражавајући Пенменсхип | Изражавајући страхопоштовање | Изражавајући Ја