E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Layout-uri (4)

Ghid HTML in pasi simpli - de la PSD catre CSS (Partea a III-a)

17.12.2008
Ghid HTML in pasi simpli - de la PSD catre CSS (Partea a III-a)

Bun venit la cel de al 3 tutorial din seria de 4 care te invata cum sa transformi un psd in css/html. In prima si a doua parte a acestui articol ai creat o parte din elementele esentiale care te vor ajuta in aranjarea continutului. Acest tutorial se va axa pe coloana din stanga care este mai dificila si pe intreg continutul ei.

Total vizualizari: 9774 9774 afisari   |   Comentarii  0   |   Rating   |   (4 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  www.csshowto.com  
Autor:  www.csshowto.com
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2 34 »
comenteaza printeaza

Poti folosi oricate clase doresti in aceasta maniera, daca le separi printr-un spatiu, tinand cont ca prioritate vor avea cele de la sfarsitul listei.

Nu avem elemente fara continut ce ar putea fi folosite pentru watermark, deci va trebui sa adaugi 2 div-uri goale, pe care le vei pozitiona ulterior. Codul html e urmatorul:

<div id="footer">
<div class="watermark w1"></div>
<div class="watermark w2"></div>
</div>

Rezultatele din Firefox sunt aratate si in Figura 17:

Chiar daca atunci cand sunt privite individual imaginile arata iesite din context, sau ca si cum ar fi in zig-zag, se poate vedea ca in momentul in care sunt plasate in fundal, marginile par netede si se imbina cu fondul.
Daca doresti imagini mai pronuntate, le poti folosi pe cele tip PNG, avand in vedere si codul suplimentar pentru IE6 mentionat mai devreme.

Cei care folosesc IE6 sau o versiune anterioare vor observa o problema. Partea de jos a layout-ului (care inainte era buna) s-a strambat dupa cum se poate vedea in figura 18 si are nevoie de retusuri:

Figura18

Modul cel mai usor prin care poti vedea ce anume cauzeaza problema este sa iti refaci pasii si sa retragi cate un element pe rand, pana cand afli ce a declansat eroarea. De aceea trebuie sa iti verifici munca la fiecare stadiu in diferite browsere sau ai putea sa construiesti o intreaga pagina fara a observa aceasta neregularitate. Pentru a afla unde ai gresit trebuie sa faci cateva teste.

Primul pas consta in stergerea celor 2 div-uri cu watermark din HTML, deoarece cel mai probabil ele sunt vinovate. Prin retragerea lor si prin verificarea in IE se arata ca totul a revenit la normal. Acum ca stii care este problema trebuie sa gasesti o metoda prin care sa faci ceea ce vrei fara sa umbli la setarile IE6.
Pentru a testa faptul ca exista o anumita portiune de cod care declanseaza eroarea, trebuie sa pui la loc codul HTML pentru cele 2 div-uri, apoi sa stergi pe rand stilurile aferente lor. In curand, vei vedea ca poti sa stergi toate stilurile care fac referinta la watermark, dar eroarea nu va disparea.

Acest lucru duce la concluzia ca problema este HTML-ul adaugat. Deja stii ca prin scoaterea HTML-ului layout-ul va reveni la pozitia corecta. Problema este ca IE6 nu admite faptul ca ai plasat div-uri goale in footer, avand in vedere toare clasele aplicate momentan. Solutia este simpla si tot ceea ce ai de facut este sa te asiguri ca footer-ul are un continut si imaginea va reveni. Daca adaugi un rand de text care va deveni intr-un final mesajul copyright, vei vedea ca totul revine la normal.

<p>This is a copyright message</p>
<div class="watermark w1"></div>
<div class="watermark w2"></div>
</div>

Acum in IE6 arata totul corect; poti continua cu testarea prin adaugarea de continut celor trei coloane, prin a verifica daca distributia nivelurilor este corecta si ca totul se suprapune asa cum trebuie. Preluand continutul text din PSD si introducandu-l in HTML (nearanjat si neformatat momentan) poti testa layout-ul de pana acum. Din pacate, codul de pana acum contine ceva gresit deoarece layout-ul s-a suprapus incorect, dupa cum se poate vedea in imaginea urmatoare:

Figura 19

Greseala consta in atribuirea gresita a z-index-ului elementelor, iar watermark-ul se afla acum deasupra continutului textual. Revenind la planul original, ai setat continutul (#main) la un z-index 1 si footer-ul la un z-index 2, dand coloanelor un z-index 3. Desi suna logic, acest lucru este gresit deoarece coloanele sunt incluse in #main, care are z-index 1. In concluzie, z-index-ul parinte este cel care determina nivelul tuturor copiilor sai in relatie cu alte elemente din afara. Ai fi putut sa aloci coloanelor un z-index de 100.000, dar ar fi fost in zadar. Deoarece footer-ul are z-index:2 si se afla in afara #main, el va fi intotdeauna deasupra acestuia si a tuturor copiilor sai.

O solutie la aceasta problema este stergerea atributului z-index din #main si modificarea tuturor copiilor astfel incat sa aiba acelasi parinte (#outer). Acest lucru va rezolva problema in majoritatea browser-elor dupa cum se arata in imaginea Firefox de mai jos:

Figura 20

Inca odata ai problema in IE care este valabila pana la IE7. Watermark-ul inca apare deasupra textului, chiar daca ai scos z-index-ul din #main. Problema este ca IE aloca incorect un z-index 0 in momentul in care un element este pozitionat, in loc sa ii aplice o valoare "auto", dupa cum este mentionat in speficatiile CSS. Asta inseamna ca IE va crea mereu un o stiva locala pentru diferitele elemente copii, ceea ce cauzeaza problemele pe care le-ai intalnit.
Pentru a combate acest comportament trebuie sa scoti position:relative din #main. Asta va corecta afisarea pe IE si abia acum vei vedea rezultatul din figura 20.
Singurul dezavantaj al acestui lucru e faptul ca acum nu mai poti plasa elemente avand coordonate absolute in raport cu #main. Cum momentan nu este nevoie sa faci asta, vei ramane la acest cu cod final, pe care ar trebui sa il compari cu al tau.

Pagina:
« 1 2 34 »
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4690
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4610
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4510
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4425
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4305
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Verilog Dreamweaver Swift 3D Word Outlook SEO JSON CSS XML Python Fireworks Gimp SWF PHP Fotografie Vista Bridge MySQL Illustrator XHTML RoR AJAX StyleSheet Flash HTML Action Script Powerpoint Java COREL DRAW Javascript Ruby on Rails Photoshop PSD Lightroom Excel Sony Vegas
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software