Exprimarea IT

Un alt rapid ah. Aici este ceva simplu si frumos folosind puterea de CSS ... dar a fost concieve greu (şi cu siguranţă nu am fost eu) pentru a începe cu. Adăugarea Dropshadow, ar putea fi o peice de tort pentru mulţi dintre noi, folosind unele unelte de editare a imaginilor ca Photoshop ANF focuri de artificii, etc
Motivul de ce, am optat pentru umbra folosind CSS este că, de obicei, creând în acelaşi timp un design pagină / HTML a unei cereri, cerinţele de tine iterarea. Ce vreau să spun este, intr-un site existent, cu multe imagini, cum ar fi cele care afişează freinds listă sau o galerie de imagini, va fi dificil să se reprocesează întreaga încărcătură de imagini care au fost deja descărcate de a adăuga sau elimina umbrele, pentru că chestiune.
Deci, dacă aţi făcut o gândire puţin înainte în timp ce crearea HTMLS pentru a adăuga aceste diviziuni suplimentare sau, de obicei, situaţia este că aveţi o logică Buclă generatoare de aceste icoane / miniaturi în XSL, PHP. Java sau orice altă programare / limbaj de scripting, îl puteţi adăuga oricând, atunci este doar chestiune de spectacol şi ascunde aceste umbre folosind proprietatea display CSS, ca pe clientii cerinţele în continuă schimbare ... am havn't făcut acest tip de gândire înainte înainte de acest lucru ... dar ahev a început acum!

În exemplul de mai jos, imaginea originală este gratuit, iar umbra dropshadows sunt aplicate cum trebuie! De asemenea, am mers un pic extra, folosind trucuri de Tut mele anterioare (Well! acestea sunt, probabil, cel mai scurt varietate de tutoriale, asa ca este justificată doar numindu-le "Tut", "e) cu privire la utilizarea CSS proprietate clipului pentru a scoate în evidenţă doar

Imaginii originale

CSS DropShadow Rezultate

Vezi Demo | Descarca fişierelor sursă

De ce nu vreau să înţeleagă acest lucru??? Humm ...!!

Cele mai multe dintre scriitori CSS ar fi de acord că proprietatea CSS clipului este, probabil, unul dintre cele mai ne-utilizate proprietăţi CSS. A fost atât de adevărat pentru mine şi a fost cel mai fericit să-l neglijeze, până când am început modificarea mootools DOUA butonul (PIN) Componenta Slider (cu indicator de Range) .

Nu a fost o sugestie buna de la unul din utilizatorii de componente de a modifica componenta Slider folosind imagini tăiate o cercetare (faţă de o divizie de lăţime variabilă) pentru a indica gama slider. Astfel, a venit timpul meu pentru a intra distracţie, dar ne-Chartered (pentru mine, desigur), apele de proprietate Clip CSS.

Ei bine! cât de greu poate fi? Nu de mult la toate ... da şi nu. Sintaxa de a folosi proprietatea CSS clipului este destul de drept, dar sensul / usuage este un pic croocked. Cu o memorie ca a mea, de fiecare data cand stau de a prelucra pe Script Slider mea ... am tokeep de trimitere înapoi la utilizarea de această proprietate CLIP, pentru a reaminti mă logica pe care am creat în script-ul meu .... Prin urmare! gândit să-l stilou, cu o speranţă să-şi amintească că în viitor (şi, de asemenea, pentru beneficiul celor care par boggled de proprietate clipului CSS)

Ce face clipului CSS face?

Clipul este parte din modulul de efecte vizuale de CSS 2.1. Pur şi simplu pune, treaba lui este de a plasa o fereastră vizibil pe partea de sus a unui obiect care se tunde, tăiere, prin urmare, crearea de imagini şi miniaturi fără a crea fişiere suplimentare (am pus deja această funcţie pentru o mai bună utilizare în componenta Slider )

Utilizarea proprietăţii clipului CSS, se poate crea o decupare folosind forma de rect. Ca multe alte proprietăţi CSS (cum ar fi marja, etc padding), folosind rect nevoie de patru coordonate Sus, dreapta, jos, stânga (TRBL). Natura croocked a reflecta această proprietate, atunci când ia o privire mai atentă la modul în care calculează un clip regiunea de tăiere, utilizarea acestor patru coordonate (creierul trimite într-o aruncare pentru un timp). Acum, pentru a vă confunda partea de jos porneşte de la partea de sus, şi începe de la dreapta la stânga. . Puteţi vedea ce am spus? .... Prin urmare, acest post ...

Aceasta confuzie mica poate dispărea cu uşurinţă, cu această explicaţie vizuală a CSS Clip / rect proprietate de mai jos!!

CSS Clip Cerinţe

Sarcina am început este de a decupa imaginea în miniatură urmator intr-o imagine ovala caută (şi, de asemenea, o imagine cu unghi larg)

Thumbnal original / imagine	Cerinţe Clip pentru Sqaure Thumbmail

CSS Clip Rezultate

Vezi Demo | Descarca fişierelor sursă

Această întrebare a trecut prin minte de câteva ori înainte, când am fost de lucru pe site-uri mai devreme de asemenea, care a folosit pentru a arăta WordPress blog-uri sau nou tip de conţinut din o parte a site-ului / portal.Being un novice în PHP şi în jurul valorii de WordPress, am pastrat procastinating ea, gândire ", acest lucru nu este peice mea de tort". În sfârşit! această cerinţă a venit pana la nasul meu, atunci când a început diggin în jurul valorii de un pic de soluţie.
Am fost surprins să afle că într-adevăr a fost mai uşor decât am crezut ca a fost de fapt, pentru a afişa o listă de titluri sau ultimul mesaj pe orice altă pagină în afara secţiunii WordPress-electric, folosind doar un pic de PHP şi API WordPress .

Aici este ceea ce sa faci: -
Din motive de explicaţii, să presupunem că site-ul dvs. este http://www.inchembur.com/ şi aveţi secţiunea de ştiri de pe acest site http://news.inchembur.com/ (care se execută WordPress). Acum, cerinţa este de a arata ultimul mesaj de la http://news.inchembur.com/ pe pagina de start a site-ului principal, şi anume http://www.inchembur.com/index.php

Pasul 1: În index.php, adăugaţi următoarea peice de cod, includ WordPress fişier API. Puteţi adăuga acest la partea de sus a paginii pe care doriţi postul dvs. să apară în.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES ", false); de utilizare / / Disbable Theme WordPress
necesită ('/ var / news.inchembur.com / wp-blog de ​​header.php'); / / include WordPress API
; // Get Latest Post query_posts ("showposts = 1"); / / Get Ultimul mesaj
?>

În peice de mai sus includ, primim doar după cea mai recentă. dacă doriţi să încercaţi mai multe variaţii să nu ezitaţi să sape în, query_posts() documentaţia .

Pasul 2: Acum, în partea a paginii de start / Pagina de start în cazul în care doriţi să afişaţi ultimul mesaj de la WordPress http://news.inchembur.com , utilizaţi codul de mai jos. Inutil să spun, nu ezitaţi să anunţ divizii de styling, se întinde şi a claselor ca pe nevoile dumneavoastra de design.

Pasul 3: Nu este un pas de 3 ... Asta e el ... ai terminat!

Cum arată o anumită pagină post / ca spre deosebire de ultimul mesaj: -
Acest lucru poate uşor achived, prin modificarea argumentele pentru a query_posts() pentru a include ID-ul pagină sau pagina de melc

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = despre ");

sau Aveţi posibilitatea de a controla numărul de posturi:
) ; query_posts (showposts = 3);

Uneori, pentru a menţine pageweight jos ... ne-am împărţit în fragmente de script-uri noastre ... Aceste fragmente JavaScript poate fi încărcat ca şi atunci când este necesar (la un eveniment sau la un clic pe un link sau buton, etc).

Javascripts dinamic de încărcare este simplă şi destul de drept înainte, ca de mai jos ...

= “text/javascript” > <Tip de script = "text / javascript">
Funcţia loadNewScript (sursa) {
var s = document.createElement ("script");
s.setAttribute ("tip", "text / javascript");
s.setAttribute ("src", sursa);
document.body.appendChild (e);
}
</ Script>

şi puteţi avea link-ul următor apel oriunde în corp, sau poti avea acest script "onLoad" a documentului în sine ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (" myDynamicScript.js '); "> Script Sarcină dinamică </ a>

sau

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

Dacă sunteţi CSS persoană, ar trebui să ştii durerea în obţinerea de aspectele dvs. de lucru cross-browser. IE8 este încă o altă cheie în lucrările pentru dezvoltatori noi. Anywaz! dacă te-a lovit pe această problemă, aşa cum am făcut ieri, în cazul în care CSS-ul perfect de lucru în IE7 (şi mai devreme), şi brusc Firefox a început să arunce cu accese de furie în IE8, încercaţi acest ... Se părea bine pentru a remedia problemele mele pentru moment ....

Folosind declaraţie Meta, putem specifica motorul de randare ne-ar dori să folosească IE8. Deci, pentru a forţa IE8 pentru a face ca IE7 ... Introduceţi Tag Meta următoarele în capul a documentului: -

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

În mod implicit Meta IE ar fi: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
care ar face IE8 face de start, folosind noul mod de standarde.

Dacă este necesar, această sintaxă ar putea fi folosite pentru a gazdui pentru alte browsere ca de mai jos:

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

Mai multe despre doctypes:

Dacă nu sunteţi încă familiarizat cu fel de animal numit "doctype" ... aici este un rapid citit
Ce sunt doctypes? Care sunt quirks BROWSER si modul strict?
Setarea DOCTYPE în XSL

Pentru o mai înţelegere în profunzime despre doctypes, încercaţi să vizitaţi aceste link-uri ...
A List Apart: Fix site-ul cu DOCTYPE dreapta!
A List Apart: Dincolo de DOCTYPE: Standarde web, înainte de compatibilitate, şi IE8

Notă: Deşi mulţi dintre noi, HTML / CSS de persoane au fost neglija importanţa de decleration DOCTYPE în documentele noastre, Setarea DOCTYPE dreapta, este, de obicei, răspunsul la problemele browser-ului pentru cele mai multe.

Cu o varietate de Carusel de acolo, de multe pentru mootools ar fi bine, am decis să scriu încă din clasa mea Carousel proprie, pentru câteva motive bune
1. A vrut o caracteristică de paginare (pentru a putea sări într-un diapozitiv special / pas în carusel).
2. Vrut libertate cu plasarea de butoanele Stanga si Dreapta / Link-uri, în cazul în care mai am vă rog.
3. Mai mult control asupra paşi Slide.

Am reuşit să creeze un nou tip carusel, cu caracteristicile de mai sus ... ca de mai jos ... Simţiţi-vă liber să sugereze orice modificare ce ar avea nevoie!

Exemplul meu arata ca acest ... [ Vezi Demo ]

Vezi Demo | Descarca mootools Carusel cu versiunea 1.0 de paging (Descarcat de 2006 ori)

1. Carousel paging

Puteţi adăuga cu uşurinţă de paginare la carusel dumneavoastră, pur şi simplu prin stabilirea de pavilion de paginare, care este ultima parater trecut creând în acelaşi timp instanţă de MooCarousel la TRUE (doresc localizare) sau fals (donot doresc paginare).

var = new carousel1 MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true); / / ns = numărul de diapozitive, SSS = diapozitiv pas dimensiune

Şi desigur puteţi schimba look-n-simt a acestor achors paging cum te rog prin modificarea CSS lor.

Carousel_paging {text-align: right; margin: 10px 0 0 5px;}.
Carousel_paging curent, carousel_paging pagina {contur: none; lăţime:.... 15px; inaltime: 15px; line-height: 15px; text-align: center; display: block; float: left; fundal: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging a: hover, carousel_paging curent {background: # 4D4D9B; color: # FFFFFF;}...

Ei bine! exista o mica problema insa, ancore de paging în cazul în care set, atunci acesta va fi generat întotdeauna după componenta Carousel. Am vrut să fac o dinamică bine, dar apoi doar pentru a păstra Script pentru suflare de proporţii, am decis să-l sari.
Dar ştii un pic Javascript, aţi putea modifica uşor generare a codului de paginare în clasa MooCarousel pentru satisfacerea nevoilor dumneavoastra.

2. Personalizarea Icoane stânga & dreapta

Aveţi posibilitatea să modificaţi de plasament, imagini sau orice proprietate displat dintre butoanele Stanga si Dreapta pur şi simplu de joc în jurul cu CSS. pentru a fi capabil de a schimba de plasare de buttoms stânga şi dreapta a fost motivul real pentru mine la dreapta mea nostru de clasa Carousel.
, Deoarece aceasta clasa MooCarousel, acceptă ID-ul e de aceste butoane, puteţi plasa de fapt, aceste butoane oriunde pe pagina, daca te rog ... nu trebuie să fie în ierarhia element, ca în exemplul meu.

var = new carousel1 MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, adevărat);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; lăţime: 23px; inaltime: 20px; float: left; cursor: pointer;}

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

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

3. Personalizarea Paşi Slide

Ce vreau sa spun MELE PAŞI Personalizarea SLIDE?
Cele mai multe Carusel glisaţi deplină cu a ferestrei vizibile. Deci, spune ca a avut patru elemente (cum ar fi, în proba mea de mai sus), se va aluneca toate cele patru elemente. Cu această componentă carusel, Tu treci numărul de diapozitive şi dimensiunea pas de alegerea ta.

var = new carousel1 MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, adevărat);
c_ns = numărul de diapozitive, c_sss = diapozitiv pas dimensiune

De asemenea, în example1 mea am calcuted pasul diapozitiv, bazată pe logica în cazul în care, ştiu că numărul de articole, latime pe fiecare articol, precum şi marjele de care au dat, după fiecare element în CSS meu.

/ * Pentru beţie 1 * /

c1_w var = 92; / / beţie articol Lăţime

c1_n var = 10; Numar / / total de articole beţie Comparatie

var c1_pp = 4 / / Numărul de beţie perpage Comparatie Articole

c1_marginFactor var = 51;

var = c1_sss c1_w * c1_pp; / / SSS = Mărimea pasului de diapozitive

var c1_ns parseInt = (((c1_w * c1_n) / c1_sss) + 0.5); / / ns = numărul de diapozitive

c1_sss + = c1_marginFactor; / / SSS = Mărimea pasului de diapozitiv, 51 pentru marje

Cerinte: mootools 1.2

Vezi Demo | Descarca mootools Carusel cu versiunea 1.0 de paging (Descarcat de 2006 ori)

Mootools MooRating este un (browser-ul cruce, desigur ca foloseste puterea de a bibliotecii mootools) simplu, usor si excelent soluţie bazată pe evaluare. Acesta nu este numit ca "Star Rating", pur şi simplu pentru că, imaginea de rating ar putea fi ca tu a alege (am furnizat Stele, baruri şi inimile cu descărcare, dar vă puteţi crea propria varietate şi doar o picătură în).

Cum se arata ca:

	Evaluare mootools cu imagini diferite Vezi Demo
	Evaluare mootools cu valori procentuale Vezi Demo
	Evaluare mootools cu valori fracţionare Vezi Demo

Descărcaţi Mootols Star Rating Script (Descarcat de 723 ori)

Evaluare de date: număr întreg, zecimal sau un procent
În prezent, script-ul este conceput pentru a afişa datele de rating ca valori întregi (1,2,3,4,5), în zecimale (1.24, 3.45, etc), sau în procente (12%, 55% etc.) Alegerea de a afişa date în oricare dintre formatele menţionate pot fi stabilite doar prin schimbarea unor valori pavilion în termen de javascript (moorating.js)
În principiu, există două e de două steaguri pentru a juca cu, pentru afişarea valorilor în formatul de alegerea ta ...

var inpercent = false; / / Set acest pavilion pentru a adevărat, dacă aveţi nevoie de valori procentuale, pentru a fi afişate
var isFractional = false / / Set acest adevărat, dacă doriţi valori fracţionare, cum ar fi 1.24, 1.25, 4.56, mai degrabă decât 1,2 ... 5

Şi I dont cred că există vreo explicaţie necesară pentru acest lucru. Mai mult decât atât. Scenariul e foarte simplu. Dacă ştiţi un pic javascripting, ai putea modifica script-ul pentru a obţine orice fel de valoarea afişată. De exemplu, dacă ai vrut trei zecimale pentru a fi afişate ... tweak la fel ca script-ul de mai jos ...

dacă (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (X, 3);.} / / 2 este schimbat la 3
else {moostartval [i] innerHTML = Math.round (x).;

Actualizarea Valoare Evaluare:
I havent deranjat scris orice script-uri AJAX pentru actualizarea valorii Evaluări, pentru ca stiu din experienta mea că nu întotdeauna se intenţionează să actualizeze EVALUARE cât mai curând ceva de utilizator ratele. Eşti liber să faci ce vrei cu valoarea nominală, actualizaţi-le folosind AJAX sau Trimiteţi-l sau Setaţi o valoare de câmp formular ascuns, care urmează să fie prezentată cu întregul formular, etc

Funcţia updateRating (id, evaluare) {
/ / Alert (id + "," + evaluare);
/ / Fă ce CU EVALUARE
}

Există în funcţie javascript numit "updateRating". Această funcţie a fost trecut ID-ul de Div Evaluare, pentru a identifica drept pentru care ratingurile (în cazul în care există mai mult de un rating de pe pagina) a fost actualizată şi valoarea de evaluare [updateRating (id, evaluare)]. Ai putea alege la ce vrei cu aceste valori, după cum am menţionat mai devreme.

Imagine Evaluare: Stele, inima, baruri sau orice altceva, te rog
Schimbarea de rating la oricare dintre tipurile de mai sus (stele, inima, etc), este foarte simplu. Crea o imagine similară cu cea prevăzută şi fixaţi-l inch Amintiţi-vă, dacă vă schimbaţi numele imaginii, nu face modificările necesare în fişierul CSS, a se vedea mai jos.

Moostar {margin: 0px; padding: 0px; depăşire: ascuns; lăţime: 84px; inaltime: 20px; float: left; background: url ("stars.gif"), repeta-x;}.
Moostar durata {float: left; margin: 0px; padding: 0px; display: block; lăţime: 84px; inaltime: 20px; text-decoration: none; text-indent:-9000px, z-index: 20;}.
.. Moostar pac {background: url ("stars.gif") a lăsat 25px;}

Cele mai multe widget-uri de rating utilizează stele şi jumătate de stele, imagini cu mouse-ul peste evenimentele de pe fiecare stea. Evaluări Moo foloseste o imagine simpla Sprite ca o imagine de fundal pentru a obţine efecte vizuale necesare, cu un foarte mic deasupra capului.

Cerinte: mootools 1.2
Descărcaţi Mootols Star Rating Script (Descarcat de 723 ori)

În Firefox ... uneori este posibil să fi observat că începe să clipească cursorul pe ecran. S-ar putea întâmpla atunci când faceţi clic pe orice element de pe pagină, o divizie sau o imagine, etc acest cursor intermitent în fereastra de browser-ul este de fapt o caracteristică Accesibilitatea FireFox numit "caret de navigare". Aceasta permite caracteristici / permite utilizatorilor să selecteze textul de pe pagina cu tastatura (care în mod normal, au tendinţa de a face cu utilizarea mouse-ului nostru).

Ei bine! dacă doriţi să donot această caracteristică de presa ... simplu "F7", pentru a comuta la fals şi vice-versa (dacă doriţi ON). Ai putea, de asemenea, de tip "about: config" în bara de adrese (de tip în "caret" în caseta de filtru) şi pur şi simplu faceţi dublu clic pentru a schimba optiunea "accessibility.browsewithcaret" de la "true" (porniţi de navigare pe caret) pentru "fals "(transforma caret navigarea OFF)

Am fost în căutarea unui slider dublu fixate (slider cu doua butoane, minim şi maxim), folosind mootools. Deşi, am găsit un slider bine făcut câteva dublu fixat în forumul mootools, singura problema a fost că toate acestea au ieşitură slidere markerul zona selectată. În sfârşit! Am decis pentru a crea propria mea. Ei bine! Am folosit codul original şi modificaţi-l pentru a avea un fundal slider care indică zona selectată vizual, ca în exemplul meu de mai jos. Zonele albastră indică gama de valori alese.

Vezi Versiunea 2.2 Demo | mootools Download, dublu Important Slider Version 2.2 (Descarcat de 11965 ori)

Puteţi foarte uşor schimba aspectul indicatorului raza de acţiune (în albastru, în exemplul de mai sus), butonul cursor, cursorul piesa de modificarea slider.css după cum este necesar.

Nu fixaţi-mi un comentariu daca vi se pare util.

Înainte de a avea de a face cu CSS pentru a crea machete noastre de pagină, alinierea parte a conţinutului în interiorul unei celule de tabel părea juca doar copil. Pur şi simplu setaţi "alinia" sau "valign" proprietate a tabelului pentru a avea alinierea la alegere, bucata de tort!
Cu aspecte CSS, deşi avem "vertical-align" proprietate pentru elemente, nu pare a fi la fel de simplu ca "alinierea" sau "valign" proprietăţi. Pentru a fi mai specifiic "vertical-align" nu pare să rezolve niciuna dintre problemele tale, mai ales în cazul în care se scrie o bucata de cross-browser CSS.

Fără utilizarea de tabele HTML, problema de centrare pe obiect, fie o imagine sau un text într-o divizie de conţinut, probabil a fost de fiecare UI / CSS coşmar dezvoltatorii la un moment dat. Această problemă se extrapolează în continuare de grijile de aliniere, în cazul în care obiectul care urmează să fie centrat este dinamic în natură, adică atunci când înălţimea acestuia este variabilă (înălţimea necunoscut).

Deşi nu există o soluţie cunoscut drept înainte, că ar lucra în gama de browsere pe care le avem de a face cu, soluţia pe care am încercat să ajungă la nu pare să funcţioneze în browserele cateva pe care eu l-am încercat în (IE6, IE 7 , FF).

SOLUTIE:
În browsere, cum ar fi Mozilla, Opera şi Safari, comportă ciudat "vertical-align" proprietate poate fi adus la simţurile sale, pur şi simplu prin stabilirea de "afişare" a diviziei de proprietate conţinând la "masa-celula" (afişare: masă de celule) .

Problema rămâne în continuare cu familia IE browsere, care, dar nu par să înţeleagă ce sa cu "masa de celule" de proprietate şi de ignorant cum sunt, ele ignora pur şi simplu. Soluţia de mai jos, deşi simple, anunturi câteva elemente mai DOM HTML la pagina dumneavoastră de a face lucrurile sa se intample.

CSS şi HTML arata ca acest
.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/> vizualizări: 3456 </ div>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

vezi demo aici | Files download source (Descarcat de 454 ori)

TOP Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

JOS Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

vezi demo aici | Descarcă de aici

Se pare ca varsta, deoarece am fost încercarea de a găsi o soluţie rezonabilă pentru această problemă de aliniere. Dar acum, cu această soluţie, mă simt la pace puţin.

Cu o speranta ca intr-o zi

• vertical-aliniere proprietate în CSS va funcţiona ca o face in interiorul unei celule de tabel, fără să bată mai mult în jurul lui Bush
• Cel puţin, stabilirea marjei de-top: auto si margin-bottom: auto, ca va da acelaşi rezultat ca şi cu marja de stânga şi de setul de marja de-a dreptul de auto
• Războaiele browser va fi peste o zi.
• Nu va fi doar un browser de ALL.

Descărcaţi CSS şi HTML de soluţie de mai sus, aici (Descarcat de 454 ori) .. pentru inteligibilităţii, CSS nu este optimizat

PS: Si apropo, cei care sunt miniaturi ale unor poze le-am dat clic pe ...