Tutorial xhtml/css

#1
Jumping Jack

Posted 06 December 2007 - 20:47

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Bun, asa cum am spus, incercam aici sa pornim un mic tutorial despre web design. O luam de la inceputul inceputului - desi ne asteptam ca cei care vor citi cele de aici sa aibe o bruma de cunostinte de baza. Pentru clarificarea nelamuririlor evident ca se pot pune intrebari, insa eu as dori ca intrebarile sa fie la obiect, si topicul sa nu degenereze intr-o ciorba lunga. Astept ca si altii sa contribuie la asta, nu am timp sa il fac singur. Si pentru ca eu nu pot sa il fac sticky - pentru ca nu am "rangul" necesar, poate se sesizeaza un admin si il face el.

Ok, cam atat ca introducere, acum o mica bucatica de teorie plictisitoare - mai incolo o sa fie mai palpitant.

Deci, despre DOCTYPE:

In conformitate cu standardul w3c, un doctype (document type declaration, sau DTD) informeaza browserul despre ce versiune de (X)HTML se foloseste, pentru ca acesta sa stie care va fi modul de interpretare a paginii. El arata astfel - pentru xhtml 1.0 strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">

Citeva reguli importante:
1. DOCTYPE-ul trebuie sa stea inainte de orice altceva pe pagina.
OBS:  Unele editoare - in cazul in care se alege de la bun inceput tipul paginii xhtml - introduc automat un prolog xml inainte de doctype, sub forma
<?xml version="1.0" encoding="UTF-8"?>.
Din punct de vedere strict tehnic, prezenta acestui prolog nu este gresita, intrucit xhtml este bazat pe xml. Acest prolog informeaza ca documentul este scris in limbaj xml, si ce versiune anume este aceea.  Prezenta prologului xml insa va face ca browserul IE6  - IE6 nu poate parcurge un document xml, pentru ca nu il recunoaste - sa functioneze in quirksmode (opusul lui "strict mode", quirksmode inseamna ca browserul va considera ca designul tau este mai vechi si in consecinta neconfom cu standardul, si va incerca sa prezinte pagina in mod corespunzator, functionind - in cazul lui IE6 - ca si cum ar fi fi IE5.5).
La IE7 existenta prologului xml nu produce funtionare in quirksmode, desi nici IE7 nu pricepe xml.
Insa daca inainte de doctype exista orice altceva, inclusiv un comentariu , IE7 va functiona ca IE6.

Functionarea in quirksmode nu e un bug, orice browser actual poate fi aruncat intentionat in quirksmode (desi metodele difera), pentru a se verifica compatibilitatea cu browserele mai vechi.

2. Pentru ca browserul sa stie cum sa interpreteze o pagina, doctype-ul trebuie sa fie acolo. Lipsa lui va provoca functionarea browserului in quirksmode  (vezi mai sus).

3. DOCTYPE-ul trebuie sa fie corect scris, respectiv sa aibe un URI absolut (asta e cea mai frecventa greseala).
Adica, in loc de
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
care inseamna ca browserul este trimis sa caute specificatia xhtml 1.0 strict undeva in serverul tau - si nu il va gasi de buna seama (afara de cazul improbabil in care il vei descarca de la w3c si il vei parca la tine in server),
sa fie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
La fel ca la punctul 1 si 2, nerespectarea acestei reguli provoaca functionarea browserului in quirksmode.
Exceptie face Opera care chiar daca vede un Doctype incomplet va incerca sa randeze pagina in strict mode.

4. Doctype-ul trebuie sa fie in conformitate cu continutul paginii.
Nu are nici un rost sa folosesti un doctype XHTML 1.0 strict (sau si mai bine, XHTML 1.1), daca codul tau nu este
in conformitate cu ceea ce este specificat in respectivul doctype.

Mai jos sint cele citeva doctype-uri folosite.

HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR...l4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...ml4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR.../frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR...-frameset.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR...D/xhtml11.dtd">

Diferenta dintre html, xhtml 1.0 si xhtml 1.1:

-html 4.01 este ultima versiune de html inainte de convertirea acestuia in xhtml. Documentele scrise in html 4.01 trebuie trimise ca text/html (<meta

http-equiv="content-type" content="text/html; charset=utf-8" /> )

-xhtml 1.0 este html 4.01 rescris in xml. Pentru ca este doar bazat pe xml, si nu este xml pur, documentele xhtml pot fi interpretate ca text/html, desi descrierea lor corecta dpdv tehnic ar trebui sa fie application/xml sau application/xhtml+xml. Orice browser modern poate interpreta corect un document  descris ca fiind application/xml, cu exceptia lui IE. Pentru ca IE exista (si multumim pentru asta), documentele xhtml 1.0 pot fi transmise si ca text/html, si trebuie transmise ca atare.

-xhtml 1.1 este xml pur. Documentele trebuie sa fie trimise ca xml (de ex. application/xhtml+xml). xhtml 1.1 nu este backward compatibil.

Recomandarea w3c (World Wide web consortium) este sa se foloseasca xhtml in loc de html.

Pentru cine doreste, aici se afla o lista completa cu ce stie si ce nu stie fiecare browser sa inteleaga din xhtml:
http://www.w3.org/Pe...a-types/results

Citeva reguli referitoare de baza la xhtml, vizavi de obisnuinta cu html:
Pentru ca xml este case sensitive, in xhtml nu se admit selectori scrisi cu majuscule (de ex <P> in loc de <p>).
De asemenea, orice selector este obligat sa aibe perechea de inchidere </eticheta>.
Selectorii care nu au pereche de inchidere (<img> sau <input>) se inchid astfel: <img src="" alt="" /> . Atentie la spatiul dinainte de slash. Exceptie la regula asta face eticheta <DOCTYPE>, care nu se inchide nici cu /> nici cu eticheta corespondenta </DOCTYPE>, si in plus, se scrie cu majuscule.

Atat despre DOCTYPE.

Edited by Jumping Jack, 06 December 2007 - 21:00.

Back to top

#2
xnoise

Posted 07 December 2007 - 14:14

Active Member

Grup: Members
Posts: 1,310
Înscris: 08.02.2007

Cred ca ar trebui sa incepem nu cu doctype-ul, ci cu elementele care sunt absolut necesare pt validarea unui document HTML.
Lista este disponibila mai jos:
1: Doctype (fie ca este xhtml, fie ca este html). Preferinta mea si recomandarea W3C este HTML 4.01 Strict (nu XHTML 1.0 strict).
2: Elementul <html> este ROOT ELEMENTUL oricarui document HTML. Fara el documentul NU VA FI validat nicodata.
3: Elementul <head> este elementul in care sunt incarcate diverse lucruri necesare paginii respetive si in care sunt specificate diverse lucruri ca : foi de stil, fisiere js, titlul, meta-urile, content-type-ul, etc. (vom discuta despre ele mai incolo).
4: Elementul <title>. Reprezinta titlul paginii (apare in bara de titlu a oricarui browser). Este foarte important din punct de vedere al SEO.
5: Elementul <body>. Reprezinta containerul partii vizuale a paginii HTML. Orice element trebuie afisat este inserat in interiorul elementului <body> si
nicaieri altundeva.

Cam astea sunt elementele care fac ca pagina dumneavoastra sa fie valida la inceput.

Despre doctype:
In principiu, prin intermediul Accessability Guidelines-urilor W3C, se recomanda indirect folosirea unui doctype HTML 4.01 Strict. Si asta pentru ca trecerea
de la HTML 4.01 strict la XHTML se face foarte usor. Dn punct de vedere al restrictiilor, aceleasi restrictii se aplica atat in HTML 4.01 strict cat si in
XHTML 1.0/XHTML 1.1.

Cu toate ca W3C descrie XHTML-ul ca fiind "the next generation of HTML", exista motive destul de serioase impotriva utilizarii acestuia pana nu se ajunge la
Revizia 2 a XHTML-ului.

Tinand cont ca MSIE (nicio versiune) nu are un parser de XHTML, acest browser va oferi o pagina de download daca content-type-ul documentului XHTML este
application/xhtml+xml. W3C specifica ca content-type-ul unui document XHTML ar trebui sa fie application/xhtml+xml. Folosirea unui content-type text/html (ca
in HTML 4.x) va transforma documentul dumneavoastra intr-o "tag soup", un html prost scris.
Mai multe despre acest subiect poate fi citit aici: http://www.webdevout...beware-of-xhtml

In prezentarea lui @jumping_jack de mai sus au aparut cateva erori:
1: MSIE ARE PARSER de XML.
2: HTML 4.01 NU ESTE ULTIMA VERSUNE A HTML-ului. HTML 5.0 este in working draft, la fel ca CSS 3.0 si XHTML 2.0.
3: XHTML 1.1 NU ARE NICI TREABA u XML pur. Este XHTML modularizat, dar ii lipsesc o gramada de feature-uri (sau mai bine zis parserelor le lipsesc o gramada
de feature-uri).

Cateva reguli de crearea a unui document HTML:
Inainte de doctype NU ESTE PERMISA prezenta niciunui caracter, fie el si spatiu. Si asta pt ca orice caracter prezent inaintea doctype-ului arunca browserul
in quircks mode, iar rezultatele pot fi foarte ciudate. Exista totusi un caz aparte, cazul XHTML-ului, care find un document provenit din XML, are nevoie de
<?xml version="1.0" encoding="UTF-8"?> pentru a fi valid. Aici din nou intervine problema MSIE-ului, acesta fiind aruncat in quircks mode din cauza liniei
anterioare doctype-ului.

O alta regula este organizarea elementelor in pagina, inchiderea acestora exact unde trebuie, nu unde se nimereste. Spre deosebire de HTML trans si loose, HTML strict va emite reactii adverse pe anumite browsere in mai mare masura standard compliant decat altele.

Mai exista reguli ce se aplica anumitor elemente, cum ar fi folosirea alt-ului la imagini.

Foloisrea elementelor care nu sunt standardizate (chiar daca sunt recunoscute de catre browsere) nu este permisa, validatorul emitand eroare. (este cazul <embed>, care totusi, datorita suportului in browsere se pare ca va fi implementat in HTML 5.0 oficial).

Printre alte recomandari ar mai fi cateva marunte, dar ele tin deja de semantica, despre care, daa topicul se continua, o sa dscutam ceva mai tarziu, fiind un capitol care nu cere numai cunostinte bune de html, ci si cunostinte f bune de CSS.

Probabil in lectia urmatoare voi scrie despre box-model.

Toate cele bune!

Edited by xnoise, 07 December 2007 - 14:17.

Back to top

#3
Jumping Jack

Posted 07 December 2007 - 21:55

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

xnoise, on Dec 7 2007, 13:14, said:

Despre doctype:
In principiu, prin intermediul Accessability Guidelines-urilor W3C, se recomanda indirect folosirea unui doctype HTML 4.01 Strict. Si asta pentru ca trecerea
de la HTML 4.01 strict la XHTML se face foarte usor. Dn punct de vedere al restrictiilor, aceleasi restrictii se aplica atat in HTML 4.01 strict cat si in
XHTML 1.0/XHTML 1.1.

Ok, nu stiu daca rost acum sa incepem sa intram in polemici. In treacat fie spus, w3c "strongly" recomanda si utilizarea prologului xml la documente xhtml, cu consecintele mai sus aratate!!
Webstandard Project are aici o explicatie destul de iluminatoare despre ce sa se foloseasca - html sau xhtml . Concluzia este ca, desi si ei spun ca xhtml este de preferat,  in principiu poti folosi ce vrei din astea doua, insa exista o mica problema care ar inclina balanta catre xhtml: xhtml este mai strict in privinta codului, nu permite tot felul de "scurtaturi" - gen paragrafe sau liste deschise si ramase asa, fara eticheta de inchidere -  si cod incomplet, de aceea utilizarea html - mai ales de catre cei care acum invata - duce la o proasta obisnuinta a celui care codeaza, si la viitoare probleme in momentul trecerii la xhtml. In plus, nu poti folosi notatia xhtml in documente html, pentru ca desi unele notatii valideaza (<meta /> sau <link /> nu sint cod html 4.01 valid, desi <br /> sau <img /> sint considerate valide), te poti astepta la surprize. De altfel, nici validatoarele nu sint chiar 100% reliable - de exemplu serviciul de validare al w3c nu dadea codul <br /> ca valid html 4.01 in 2004, acum insa il valideza. In sfirsit, pentru ca opiniile difera, si fiecare poate aduce argumente si contraargumente, ramine la latitudinea fiecaruia ce Doctype foloseste, atat timp cit il foloseste corect.

O sa il las pe xnoise sa explice box-model-ul.

Eu as zice citeva cuvinte despre tagurile care vor fi folosite la constructia paginii.
Tagurile (sau etichetele, cum vreti sa le ziceti) se impart in doua mari grupe dupa modul lor de a influenta flow-ul unei pagini: block si inline. Etichetele block, asa cum sugereaza si numele, se intind pe toata latimea disponibila a paginii, fortind tot restul sa coboare dedesubt. Exemple de etichete block: h1-h6, p, blockquote, div, ul, ol. Etichetele inline nu forteaza un nou rind si sint folosite pentru a evidentia o portine de text. Exemple: span, em, strong.
Din etichetele enumerate mai sus se evidentiaza doua, si anume div si span. Astea doua nu au nici un fel de insemnatate semantica  - nu provoaca o alterare a modului de a prezenta implicit o bucata de text. O pot face numai daca acestora se asociaza foi de stil (css).

Modul de a scrie continut pe o pagina html este foarte asemanator cu scrisul pe formate mai traditionale (hirtie), in sensul ca se folosesc titluri (headings) - <h1>  <h6>, paragrafe - <p>, liste de diferite feluri - <ul> <ol> <dl>, sau citate - <q> <bloqkuote>. Pentru a evidentia textul se folosesc litere ingrosate <strong>, italice <em>, si asa mai departe. Spun asta pentru ca este foarte important sa se foloseasca un cod semantic. Multi isi imagineaza ca web-ul se limiteaza la ecranul monitorului, insa uita ca exista utilizatori care au tot felul de handicapuri. Orbii de exemplu, folosesc un cititor de text - Jaws - care in functie de ce gaseste in pagina moduleaza vocea in asa fel incit textul sa aibe un sens pentru cel care il aude. Daca textul auzit este o insiruire de cuvinte fara nici un fel de accentuare nicaieri, devine foarte greu sa il urmaresti. Si nu trebuie sa fii orb 100% pentru a beneficia de avantajele unui text semantic. Exista browsere care pot fi setate in asa fel incit pentru cineva care are dificultati de vedere - fara a fi orb - (daltonisti, de ex),  partile componente ale paginii sa fie evidentiate. Opera are asa ceva integrat. In plus, cel mai mare utilizator orb din toata lumea are un nume amenintator - Google. Google parcurge un site exact ca un orb. Si daca nu intelege ce gaseste, daca nu poate corela continutul, daca nu gaseste titluri corect puse, poate sa te amendeze. Bine, SEO nu se rezuma numai la asta, insa si asta e o parte importanta.

Am insistat un pic aici, deoarece tendinta multora este de a folosi pentru design doua taguri in mod abuziv: div si span. Avind la dispozitie css cu care pot prezenta ce vor cum vor, s-a inlocuit designul cu tabele cu design cu div-uri. Iar avantajele obtinute prin asta sint practic zero. Cu css poti prezenta si un design facut cu tabele foarte bine, ba mai si valideaza perfect. Insa nu este nu site facut corect.
Ideea este de a folosi cit mai mult etichete semantice, dupa care sa le grupam in cit mai putine div-uri cu putinta, acestea avind un scop pur prezentational.
Un site facut conform standardelor trebuie facut utilizind fiecare eticheta pentru ce a fost ea destinata. Si desi toate au un mod de prezentare a continutului implicit, daca nu ne place cum o face browserul singur, putem sa ii resetam toate predefinitiile din css si le redefinim noi.
Cam atat pentru azi.

Edited by Jumping Jack, 07 December 2007 - 22:00.

Back to top

#4
Jumping Jack

Posted 08 December 2007 - 14:15

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Continuam.

Dupa ce am ales doctype-ul care ne convine cel mai mult, mai avem citeva lucruri de facut pina sa trecem la codare. Unul dintre astea este alegerea setului de caractere. Setul de caractere trebuie sa reflecte limba in care este scris documentul - aici putem alege intre seturile de caractere oferite de standardele de codificare ISO sau Unicode.

ISO: In standadrul ISO pentru orice caracter se foloseste un singur byte, ceea ce face ca numarul de combinatii posibile sa fie destul de restrins, de aceea in cadrul standardului exista mai multe subseturi, de ex ISO 8859-1, ISO 8859-2, etc, destinate grurilor de limbi carora li se adreseaza.
De exemplu in ISO 8859-1 nu exista posibilitatea de a prezenta corect literele �, �, �, � . Pentru a le scrie corect trebuie ales ISO 8859-2, care are setul de diacritice romanesti.
Insa alegerea ISO 8859-2 nu este suficienta.   Aceasta nu este o problema in cazul in care publicul tinta este exclusiv roman, si toate textele sint in romaneste. Insa daca avem un public mixt, cu texte in mai multe limbi, devine periculos sa alegem ISO - vom fi nevoiti sa codam diferite caractere de mina, lucru care este de nedorit, mai ales in cazul unor site-uri mari, cu continut generat dinamic.
Alternativa la ISO o constituie Unicode , care are suport pentru  (aproape) toate limbile. Forma de codificare Unicode este UTF-8, sau UTF-16 si UTF-32. Diferentele dintre acestea sint la modul de mapping al fiecarui caracter (numarul de bytes utilizati). Dintre acestea, UTF-8 este cel mai raspindit si bazele de date au suport pentru el. Declarind in <head> folosirea setului UTF-8 face ca orice caracter  sa fie afisat corect (de fapt, aproape orice caracter, unele limbi avind nevoie totusi de niste instructiuni suplimentare, dar nu ne intereseaza asta decit daca facem pagini in hindi sau araba).

Deci:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Va urma.

Edited by Jumping Jack, 08 December 2007 - 14:18.

Back to top

#5
Jumping Jack

Posted 09 December 2007 - 19:40

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Pentru moment eu zic ca am facut destula introducere, e timpul sa trecem la chestii mai 'cool", respectiv sa incepem sa construim o pagina. Bineinteles, ce am scris pina acum nu este tot ce ar trebui sa fie stiut, si vom mai reveni cu detalii pe parcurs.

Ce este foarte important de retinut in momentul in care te apuci sa faci un site folosind (x)html si css, este urmatorul lucru: (x)html este folosit pentru structura site-ului, iar css este utilizat pentru designul lui. Acest concept se cheama separarea structurii de design.

Ce inseamna asta? pai exact ce s-ar deduce in mod logic, si anume ca markup-ul se foloseste exclusiv pentru continut (structura), fara a avea nici un rol de design, in acest scop existind css. Respectiv, nu se folosesc atribute html gen font, font-face, bgcolor si altele de acelasi gen. Toate lucrurile astea cad in sarcina css. Structura siteului trebuie sa contina exclusiv taguri fara atribute html cu scop de design. Bun, si atunci ce ne facem daca vrem ca un paragraf sa fie rosu si altul sa fie bold? Pai putem sa folosim pentru asta class  si id. Identificind prin aceste doua orice element de structura putem sa ii modificam prin intermediul css complet look-ul. Aici exista citeva mici reguli de baza: prima ar fi aceea ca un id este permis a fie utilizat pe o pagina O SINGURA DATA. Un id este un identificator unic. Adica,  daca avem  un id="fancy_text", acesta are voie sa apara o singura data. Indiferent de ce credem noi, chiar daca a doua oara l-am atasa unui alt element. In plus, un id nu are voie sa inceapa cu  cifre sau alte semne in afara de alfabet. Poate contine cifre, cratime si underscore, dar nu la inceput. Mai mult, un element nu poate avea mai mult de un id. Spre deosebire de id, class poate apara de n ori pe pagina, poate incepe cu oricare din semnele de mai sus, iar un element poate avea oricite class-uri. In plus, aplicat la elemente diferite, un class poate insemna lucruri diferite - atentie, acest lucru este valabil si pentru id.

De exemplu, putem defini <p class="fancy"> si <h1 class="fancy">, unde fancy poate fi rosu pentru p si verde pentru h1. In css asa ar arata asa: p.fancy {color:red}, h1.fancy {color:green}. Cele doua pot convietui perfect pe o pagina html.
Daca in loc de class am dori sa folosim id, notatia in css ar fi astfel: p#fancy {color:red}, h1#fancy {color:green}. Si acestea doua ar putea convietui perfect, INSA PE PAGINI DIFERITE, deoarece asa cum am spus, un id nu poate folosit decit o singura data pe pagina.
Acum cineva ar putea spune ca sint destule exemple in care un id este folosit de mai multe ori pe pagina, si site-ul nu este explodat. Este adevarat, browserele tolereaza asta, insa este incorect si este foarte plauzibil ca la un moment dat intr-un anume browser pagina chiar sa explodeze.

Modul de constructie al unui layout:
Modul de asezare al elementelor pe pagina poate fi de mai multe feluri: static - asta este cel implicit pentru oricare, relativ - prin care un element este scos din flow-ul normal al paginii, insa cu exceptia cazurilor in care specificam in mod expres noi, ramine la locul lui . Un alt element nu poate sa ii ia locul.
Absolute - la fel ca la relative, un element este scos din flow-ul paginii, insa spre deosebire de relative, locul lui este ocupat de urmatorul element care nu este la rindul lui pozitionat absolut. Noua lui pozitionare este specificata ori in mod expres de noi in fisierul css (vom ajunge la asta mai incolo), ori, daca nu este specificat, el se pozitioneaza in functie de primul element parinte pozitionat - relativ sau absolut. Daca nu gaseste nici un parinte pozitionat, se pozitioneaza direct fata de <html>. Urmatorul mod de asezare al elementelor este prin float. Un element cu float va fi "strimtat" pina la dimensiunea lui minima (cu exceptia cazului in care latimea specificata de noi in fisierul css) si va fi impins catre stinga (float:left) sau dreapta (float:right), lasind liber spatiul pentru alte elemente succesive. Este ca si cum am avea niste cutii de diverse dimensiuni (insa toate dreptunghiulare, c-asa e in web!), cu care umplem o alta cutie mai mare, asezindu-le in ordinea sosirii. Proprietatea de float o poate avea orice element pe o pagina, indiferent daca este de tip block sau inline. De altfel, aplicind float unui element inline, acesta devine in mod automat block.

Deoarece folosind pozitionarea implicita a elementelor (static) nu putem obtine altceva decit o chestie similara unei pagini de carte - titluri, paragrafe, liste si alte asemenea, o singura coloana, destul de plictisitor, trebuie sa ne folosim de celelelat tipuri de pozitionare.
In principiu exista doua mari metode de a aseza elementele pe pagina:

1)  Metoda cu float.
Asta este in acest moment cea mai utilizata metoda, in primul rind pentru ca este singura care permite asezarea (fara ajutor javascript) a unui footer sub orice alt element al paginii, in cazul paginilor care nu au inaltime fixa - cum si sint dealtfel marea majoritate a site-urilor.
In principiu, pagina se imparte in cite coloane vrem - de latime predefinita, care au proprietatea float (left sau right). Acest layout are un dezavantaj, si anume acela ca - tinind seama de faptul ca elementele "plutesc", ele intra in locul in care vrem numai daca au loc. Altfel ele sint obligate sa se aseze dedesubt. Este suficient unori un singur pixel pentru a produce acest dezastru. De aceea, layout-ul cu float necesita atentie marita la calcularea latimilor. Iar lucrurile devin cu adevarat de groaza in momentul in care se mixeaza dimensiuni relative - procente sau em -  cu pixeli. De ex, avind trei coloane cu latime de 33%, fiecare avind margine la stinga si dreapta  de 1px,  produce in mod inevitabil coborirea ultimei coloane sub primele doua. Aici ar trebui spuse citeva cuvinte despre box-model, acest concept referindu-se la modul de calcul al latimii unui container.
Xnoise a zis ca explica el, asa ca eu sar peste asta. Poate zice si de clear...

2) Metoda cu pozitionare absoluta.
Toate dezavantajele metodei cu float sint inexistente in cazul in care folosim pozitionarea absoluta. In acest caz, daca spunem unui container ca trebuie sa stea la 20px fata de stinga si 100px fata de sus, va sta acolo indiferent cite alte containere exista in drumul lui si cum sint ele asezate. Dezavantajul, cum am spus mai devreme, este ca nu exista nici o metoda script-free care sa permita pozitionarea unui footer. Daca footerul nu este necesar, se poate folosi metoda asta destul de safe, cu mari rezerve insa in momentul in care avem de-a face cu meniuri dropdown sau alte elemente similare care contin elemente pozitionate absolut si care sint declansate de hover. Problema cea mare este aceea ca in IE (indiferent care, inclusiv IE7), acestea vor aparea SUB ALTE ELEMENTE POZITIONATE RELATIV SAU ABSOLUT. Acest lucru se intimpla indiferent de z-index, si tine de proprietatea lui MSIE de a recalcula asezarea pe axa z a elementelor dupa o interactiune de tip hover. Exista citeva workaround-uri pentru aceasta problema, insa nu intram acum in detalii. Oricum, ideea este ca metoda asta e buna, insa are unele probleme.

Dupa cum am vazut, ambele metode au avantaje si dezavantaje.

Si acestea fiind spuse, sa incepem sa facem o pagina. O vom face cu float, pentru ca este si cea mai des folosita si este si mai usor de stapinit, daca avem grija la calculele de artimetca.

Consideram ca am scris deja DOCTYPE-ul si toate elementele din <head> de care avem nevoie, si trecem direct la pagina "care se vede".
In acest moment sa zicem ca avem un design frumusel facut in Photoshop sau alt program similar, si incercam sa asezam elementele structurale pe pagina in asa fel incit sa se potriveasca cu designul.

In acest moment nu voi insista pe CSS prea mult, vom folosi cit de putin posibil, urmind ca mai incolo sa aprofundam tema, vorbind despre CSS1 si CSS2 (CSS2.1), si chiar CSS3, desi asta nu e suportat nici in proportie de 10% din browsere. Acum ne vom limita la CSS1 si citeva elemente de CSS2 (pseudoclase), de care avem nevoie pentru un design minimal. Mai tirziu vom dezvolta pagina

Si incepem sa impartim pagina. Pentru asta vom folosi div-urile, care sint perfecte pentru acest scop. Div-urile care vor sta la baza layoutului vor fi identificate cu id-uri, al caror nume poate fi orice, insa este indicat sa fie cit de cit in concordanta cu scopul div-ului respectiv.

<div id="wrapper">
  <div id="header"></div>
  <div id=container">
	<div id="sidebar_a"></div>
	<div id="content"></div>
	<div id="sidebar_b"></div>
  </div>
  <div id="footer"></div>
</div>

Cele citeva div-uri de mai sus sint minimul necesar pentru a obtine un layout cu trei coloane si footer, centrat pe pagina. Admitem ca latimea paginii este fixa, de 990px - asta este o latime care intr-un monitor de 1024px latime este safe. Admitem ca cele doua coloane laterale - sidebar_a si sidebar_b au cite 200px.

declaratia css pentru a obtine ce am spus mai sus este dupa cum urmeaza (in primul rind vom scrie niste css care va anula toate setarile implicite ale browserului in ceea ce priveste marginile exterioare si interioare (margin si padding). Respectiv vom scrie

* {margin:0;padding:0}

In continuare, vrem sa ne asiguram ca pagina va fi centrata:

body {text-align:center}
#wrapper {margin:0 auto;text-align:left;width:990px}

Codul de mai sus va forta centrarea lui #wrapper, care contine toate celelalte elemente de layout, si in acelasi timp va reseta comanda de aliniere a textului la stinga. {text-align:center} la body este o smecherie pentru a-l pacali pe IE, care are probleme in a implementa corect definitia {margin:0 auto}. In continuare, vom plasa celelalte elemente in pagina:

#header, #container, #footer {float:left;width:990px}
#header,#footer {background-color:#ccc;}
#sidebar_a {float:left;width:200px;background-color:#ddd}
#content {float:left;width:540px;margin-left:25px;background-color:#fff}
#sidebar_b {float:right;width:200px;background-color:#ddd}

Pentru a putea vedea ce am facut pina acum, o sa adunam toate definitiile intr-o pagina, si vom vedea cum arata. Puteti lua codul de mai jos si salva local, dupa care il puteti viziona intr-un browser. Ar trebui sa vedeti trei coloane centrate pe pagina, plus header si footer. Cam minimalist, as zice, insa nu-i nimic, pentru inceput e perfect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro">
<head>
<title>Homepage</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {margin:0;padding:0}
body {text-align:center;font-size:75%}
p, ul, dl, ol, th, td, h1, h2, h3, h4 {color:#444;font:normal 1em/1.6 arial, helvetica, sans-serif}
#wrapper {margin:0 auto;text-align:left;width:990px}
#header, #container, #footer {float:left;width:990px}
#header,#footer {background-color:#ccc;}
#sidebar_a {float:left;width:200px;background-color:#ddd}
#content {float:left;width:540px;margin-left:25px;background-color:#fff}
#sidebar_b {float:right;width:200px;background-color:#ddd}
p, h1 {margin:10px}
</style>
</head>

<body>
<div id="wrapper">
  <div id="header"><h1>asta e titlul paginii. H1 se gaseste o singura data pe pagina, cit mai sus cu putinta.</h1></div>
  <div id=container">
	<div id="sidebar_a"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
	<div id="content"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
	<div id="sidebar_b"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
  </div>
  <div id="footer"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
</div>
</body>
</html>

Cam atat pentru azi, data viitoare dezvoltam designul de mai sus, si voi explica si ce am scris pe aici pina acum si nu am detaliat. De exemplu, pentru ce naiba am scris font:75% si mai incolo font: normal 1em..

Edited by Jumping Jack, 09 December 2007 - 19:42.

Back to top

#6
DarkAngelBv

Posted 09 December 2007 - 20:02

=== Proud owner of === ++++ Audi & Opel ++++

Grup: Senior Members
Posts: 12,747
Înscris: 24.03.2006

Ok, l-am facut Sticky...
Este o buna sursa de invatare pentru cei care sunt la inceput de drum.

Back to top

#7
dan_qaz

Posted 11 December 2007 - 21:51

New Member

Grup: Members
Posts: 18
Înscris: 01.10.2007

super ..imi place ....incep si eu sa inteleg

cite ceva...tine-o tot asa...cu stima

Edited by dan_qaz, 11 December 2007 - 21:53.

Back to top

#8
xnoise

Posted 11 December 2007 - 22:43

Active Member

Grup: Members
Posts: 1,310
Înscris: 08.02.2007

Imi cer scuze pentru intarzierea cu care am raspuns la acest topic, dar din pacate am fost putin cam "prins" in ultima vreme.

Deci revin cu explicatii amanuntite.

Box model-ul este acel dreptunghi generat in pagina de catre orice element html. Este foarte important de retinut ca un element html nu poate genera un box
altul decat dreptunghi. Nu poate genera un cerc, un trapez, etc (asta pt diversele intrebari pe care le-am mai prins pe aici pe forum).

Acum, exista 4 modalitati in care box-ul unui element poate fi alterat (fie ca vorbim de width, fie ca vorbim de height).

Prima dintre ele (si cea mai apropiata de elementul in sine) este chiar dimensiunea continutului unui element.
A doua este padding-ul, aflat imediat in afara continutului. Padding-ul este acoperit de background (fie el imagine sau culoare - spre deosebire de margin si border).
A treia este border-ul, car permite "incercuirea" elementului cu benzi de culoare (deocamdata doar atat, incepand cu CSS3 vor exista controllere mult mai
amanuntite vis a vis de background-ul din imagini pt border.
A patra este margin-ul, o proprietate destul de greu de inteles pentru incepatori, si asta pt ca aplicabilitatea sa difera de la caz la caz.

WIDTH

Acum: ce anume inseamna ca specificam width-ul unui element? inseamna ca targetam exact acea zona de continut, prima din cele 4. Deci nu includem in acest width si padding-ul, border-ul sau margin-ul. Cu toate astea, partea tricky este ca daca avem un element cu width:200 pixeli, padding de 10 pixeli, border de 10 pixeli si margin de 10 pixeli, o sa obtinem vizual un element cu width de 10(border-left)+10(padding-left)+200(continut)+10(padding-right)+10(border-right) = 240 pixeli. Intr-adevar, daca width-ul elementului este 240 la final, margin nu face parte din acest width (dupa cum se observa). Motivul este foarte simplu: margin-ul este distanta dintre elementul curent si elementul urmator, ea apartinand obiectului pe care este specificata, dar nefacand parte din el.

Valoarea default:
1: pentru elementele de tip block (vom vorbi mai incolo despre ce anume reprezinta ele) care sunt in flow-ul normal sau pozitionate relativ: 100% din width-ul permis in acel moment.
2: pentru elementele de tip inline: width-ul initial este 0, insa daca este specificat ca auto, el devine width-ul intrinsec al elementului (width-ul
continutului in sine). Nu se aplica alt tip de width decat width:auto.
3: pentru elementele pozitionate absolut: valoarea initiala este 0. Se poate aplica width asupra lor.

Inca un lucru care merita tinut minte: WIDTH nu se aplica pe elementele inline altele decat cele replaced (cum sunt imagini sau object-uri)

HEIGHT

Ce anume inseamna ca specificam height-ul unui element? pai inseamna cam acelasi lucru ca si specificarea unui width, cu exact aceleasi reguli de
aplicabilitate (doar ca mutate pe verticala). Toate restrictiile de la width se aplica si la height.

Height-ul nu se poate aplica asupra elementelor inline non-replaced (ca span-ul). In rest se poate aplica, dar are valoarea initiala 0.

Ca o mica paranteza, o sa explic cazul height-ului 100%. Pentru ca un element sa aiba 100% din viewport, sunt necesare cateva chestii. Prima dintre ele este aceea ca FIECARE element dinaintea sa TREBUIE SA AIBA UN HEIGHT. De ce? pai e simplu: 100% din 0 face fix 0 (va amintiti ca mai sus am scris ca un element are default height 0). Asadar sa luam un caz simplu: ave un div caruia ii atribuim height:100%. Asteptarea (initial) ar fi ca acest div sa ne acopere tot ecranul. Dar surpriza: nu il gasim vizual pe nicaieri. De ce? pai pentru ca: body nu ar height desemnat, html nu are height desemnat. Hight-ul procentual este calculat vis-a-vis de height-ul printelui direct. Daca UNUL din parintii directi nu are height 100%, atunci elementul nu va avea height 100% (cel putin nu va ocupa tot viewport-ul, pt ca height-ul va fi 100%, dar din height-ul elementului parinte).

MARGIN

Marginea este zona situata la periferia unui element, in afara lui, care specifica distanta dintre elementul curent si elementele adiacnte sau parinti.

O chestie care pe multi incepatori o sa ii mire cumva este urmatorul caz: avem un div cu un margin-bottom de 10 pixeli si sub el imediat un div cu un margin-top de 10 pixeli. Dupa toate calculele, distanta intre cele doua elemente ar trebui sa fie de 20 de pixeli (margin-bottom-ul elementului de sus + margin-top-ul elementului de jos). Doar ca la o mica investigatie se observa ca avem de fapt doar 10 pixeli intre elementele testate anterior. Ce se intampla? Un proces numit mai pe scurt margin collapse, proces care nu este prea simplu de inteles, dar pe care voi incerca sa il explic mai jos:
Se iau marginile bottom(elementul de sus)+top(elementul de jos). Aceste margini se aduna si se divid cu 2. Rezultatul este comparat cu CEA MAI MARE MARGINE DINTRE CELE CARE INTRA IN CALCUL. Daca rezultatul depaseste aceasta margine, media aceasta este aplicata. Daca rezultatul nu depaseste aceasta margine (reamintesc ca discutam despre cea mai mare dintre cele doua din calcul), va fi pastrata si aplicata cea mai mare dintre ele.

Acelasi comportament descris mai sus se aplica pentru orice 2 elemente adiacente sau care sunt in relatie parinte-copil.

Subproprietati: margin-left, margin-right, margin-top, margin-bottom.

Subproprietatile de mai sus pot fi reunificate intr-o singura expresie astfel:
1: pentru margini de aceeasi dimensiune in toate directiile: margin:XXpx;
2: pentru margini separate: margin:[XX]px [YY]px [ZZ]px [KK]px unde [XX][YY][ZZ][KK] sunt reprezentari numerice ale marginilor dorite astfel: XX-top, YY-left, ZZ-bottom, KK-right.
3: pentru margini separate pe ficare directie puteti folosi urmatoarea notatie: margin:[XX]px [YY]px; unde [XX] [YY] sunt reprezentari numerice ale
valorilor dorite asfel: [XX] = margin-top, margin-bottom si [YY] = margin-left, margin-right.
4: Pentru specificarea marginilor in ordinea: top, left/right, bottom se poate folosi notatia: margin:[XX]px [YY]px [ZZ]px; unse [XX][YY][ZZ] sunt
reprezentari numerice ale valorilor dorite astfel: XX = margin-top, YY=margin-left/margin-right, ZZ=margin-bottom;

Aplicabilitatea marginilor: marginile verticale (top si bottom) NU SE APLICA asupra elementelor inline (imagini de exemplu). S aplica in schimb marginile
orizontale (left si right). ATENTIE: IE < 7 (pe IE 7 nu am testat) nu recunoaste margin-left sau margin-right aplicate asupra elementelor inline!!!

BORDER

Ce anume intelegem prin border: este zona de la marginea elementului curent, care face parte din elementul curent, dar asupra careia background-ul nu se mai aplica (culoarea border-ului fiind controlata prin intermediul altei proprietati decat background).

by default border-ul este 0, are culoare transparenta si este solid.

subproprietati: border-left, border-right, border-top, border-bottom, border-color, border-width, border-style.

Fiecare dintre primele 4 proprietati mentionate mai sus au la randul lor controllere pentru width, style si color: border-left-color, border-left-width,
border-left-style, permitand controlul separat al fiecarui border in parte.

Proprietatile de border pot fi grupate generic in mai multe moduri:
1: border:1px solid #cccccc, in acest caz se aplica un border pe tot elementul de 1 pixel dimensiune, de tip solid si de culoare #cccccc
2: border:[XX]px [YY]px [ZZ]px [KK]px, ordinea proprietatilor accesate fiind aceeasi ca la margin (descrisa mai sus). Pentru controlul individual al
celorlalte caracteristici se recurge la proprietatile suplimentare pt color, style si width.

BORDER-COLLAPSE

Proprietate distincta a tabelelor, functioneaza intr-un mod similar cu margin-collapse, diferenta fiind ca border-collapse este standardizata, in timp ce
margin-collapse se aplica pentru orice margine (fara a putea fi controlat).

PADDING

Padding-ul este zona situata imediat in apropierea continutului unui element. Este zona ce separa border-ul de continutul elementului.

by default padding-ul este 0.

Padding-ul este controlabil la fel ca si margin-ul, doar ca accepta ca dimensiuni si pe cele procentuale, si pe cele in em. Cand vorbim de dimensiunile
procentuale, ne referim la width-ul content-ului elementului.

LINE-HEIGHT

proprietate care se aplica oricarui element si care determina inaltima unei linii de text. Este foarte utila in anumite cazuri pentru centrarea pe verticala
a unui text alaturi de o imagine a carei inaltime este cunoscuta sau alaturi de un float cu inaltime cunoscuta. Vom discuta despre ea in detaliu ceva mai
incolo.

Cam atat pt azi, ca ma doare mana. Sunt probabil multe lucruri neclare, si am omis cateva chestii destul de importante, dar care in acest moment nu sunt
folositoare si sunt greu de inteles. Din cate observati, numai discutia despre box-model se extinde destul de mult. Din acelasi capitol urmeaza discutia
despre tipurile de elemente/pozitionarea acestora si alte cateva lucruri.

Multumesc pt atentie si sper sa nu fi deziluzionat pe careva care credea ca CSS e usor. Pt ca nu e.

Edited by xnoise, 11 December 2007 - 22:45.

Back to top

#9
Jumping Jack

Posted 17 December 2007 - 16:12

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Continuam. Chiar daca se apropie vacanta si pleaca lumea sa-si sparga oasele pe la schi, "semestrul" inca e deschis.
Drept care vom da inainte cu constructia paginii pe care am inceput-o mai demult.
Azi o sa ne ocupam de header. In acest moment in #header se gaseste un titl (h1) si cam atat. Drept care ii vom mai adauga o bara de navigare.

Moduri de construi bara de navigare - vom incepe cu cele care NU sint bune.

Modalitati gresite:
1. tabel - nu are rost sa discutam despre asta, este ceea ce incercam sa evitam. Tablele sint bune, insa nu la asa ceva, ci pentru date tabelare.
2. div-uri - este gresit sa folosim div-uri. O sa ma intrebati "pai de ce e gresit?". As putea sa spun "uite d-aia, am spus mai sus despre divita", dar pentru ca repetitia este mama invataturii, voi repeta: div nu are nici o valoare semantica, este folosit pentru a grupa laolalta elemente care apartin aceluiasi ...grup. De exemplu, coloana din stinga se afla intr-un div#sidebar, continutul intr-un div#content. Precum se vede in structura deja facuta, folosim div-uri, insa rostul lor nu este de a descrie fiecare cuvintel, pentru astea exista inca multe tag-uri.
3. insiruire de linkuri in tag-uri <span> - la fel ca la div. Nu sint bune.

Modalitatea corecta:
Vom cauta un alt element care sa se potriveasca cerintei noastre. Si tinind cont ca vom face o bara de navigatie, primul gind (bun) care ne vine in cap este "lista de linkuri". Si este intr-adevar ceea ce trebuie folosit. Cind spun trebuie, nu inseamna ca e vreo lege in sensul asta, puteti folosi orice pentru a descrie o lista de linkuri - iar site-ul este valid, insa elementul <ul></ul> descrie dpdv semantic cel mai bine ceea ce avem de spus. <ul> este o lista neordonata - in care succesiunea elementelor <li> nu este importanta. Daca ar fi fost o lista ordonata, am fi folosit <ol> in loc de <ul>, si am fi avut o numerotare a <li>-urilor.

In acest moment lista noastra de linkuri arata asa:

<ul>
<li><a href="">Linkul 1</a></li>
<li><a href="">Linkul 2</a></li>
<li><a href="">Linkul 3</a></li>
<li><a href="">Linkul 4</a></li>
</ul>

Bucata de cod de mai sus trebuie sa se afle in <div id="header"></div>. Asa ca puteti o luati cu copy si si s-o pastuiti in locul respectiv , dupa </h1>.

Daca deschideti acum browserul, nu arata prea frumos lista asta de navigatie. Asa ca o sa transformam aceasta lista in ceva cool. Pentru asta, trebuie sa apelam la css.
Dupa cum stim, in html listele neordonate sint reprezentate in mod traditional cu buline, cercuri, sau alte semne, si fiecare linie se afla sub cea anterioara, in plus existand un "padding" si un "margin" pe care un browser le aplica in mod default. Daca nu stiti ce e aia padding sau margin, cititi articolul lui xnoise despre box-model, ceva mai sus pe pagina. Lista noastra insa nu are nici margin si nici padding, pentru ca le-am anulat pe toate cu ajutorul selectorului universal * de la inceputul declaratie de stil ( * {margin:0;padding:0} ).
Acum, pentru a face din lista o bara de navigatie propriu zisa, trebuie sa rescriem regulile de pozitionare pentru elementele ei.
In primul rind, vom atasa lui <ul> un id, pentru a lucra numai cu aceasta lista, fara a influenta altele care vor mai aparea pe pagina.

<ul id="navi">
<li><a href="">Linkul 1</a></li>
<li><a href="">Linkul 2</a></li>
<li><a href="">Linkul 3</a></li>
<li><a href="">Linkul 4</a></li>
</ul>

Dar <ul> ne forteaza sa avem buline. Pentru a anula asta, scriem

ul#navi {list-style:none}

In continuare, folosindu-ne de "float", vom aseza toate <li>-urile unul dupa altul. Pentru asta, in declaratie de stil vom scrie:

ul#navi li {float:left}

In acest moment, toate linkurile noastre sint asezate unul dupa altul. Insa arata destul de aiurea, fara spatii intre ele. Pentru a le "aerisi" un pic, vom pune un pic de padding la linkuri:

ul#navi a {padding-top:2px;padding-right:5px;padding-bottom:2px;padding-left:5px}

Codul de mai sus putem sa il scriem si prescurtat, folosindu-ne de proprietatea definitiilor de a putea fi repetate. Regula spune ca in cazul in care se declara o singura valoare, aceasta se repeta la toate cele patru laturi (ordinea este importanta - sens orar, adica sus, dreapta, jos, stinga, si este valabila la toate proprietatile care implica cele patru laturi, adica margin, border si padding). In cazul in care avem valori diferite pentru verticala si orizontala, dar egale pe aceeasi axa, putem scrie doar doua valori, acesta repetindu-se astfel: sus=jos, dreapta=stinga. Daca avem pentru fiecare latura o alta valoare, trebuie scrisa fiecare. In cazul nostru avem valori identice sus-jos si stinga-dreapta, deci putem scrie:

ul#navi a {padding: 2px 5px}

Copiati aceasta definitie in declaratia de stil a paginii si vizualizati rezultatul in browser. Ar trebui sa vedeti o insiruire orizontala de linkuri cu ceva spatii intre ele, insa nu de mare efect. Si asta pentru ca nu am modificat inca regulile de formatare a linkurilor, ele fiind prezentate in modul default al browserului - albastre si subliniate.

Pentru a schimba asta, scriem in css :

ul#navi a {padding: 2px 5px; text-decoration:none;color:black}

Tot nu e mare lucru. Asa ca ne vom intoarce un pic la formatarea lui <ul>.

ul#navi {list-style:none;float:left;background:yellow;width:988px;border:1px solid black}

I-am dat lui <ul> float pentru a-i putea defini border si background. Daca nu ar avea float, nu am putea sa il umplem cu culoare si nu am putea sa ii definim border, deoarece in el se afla deja alte elemente cu float (li), care sint scoase din flow-ul firesc al documentului astfel si nu pot umple <ul>-ul, pentru ca acesta nu are de unde sa stie ce inaltime sa aibe. Latimea de 988px rezulta din latimea containerului in care se afla (#header) scazind border-ul lateral (stinga 1px, dreapta 1px).
In acest moment avem deja ceea ce s-ar putea numi o bara de navigatie. Vom continua in aceasta faza sa "finisam" linkurile.

ul#navi a {padding: 2px 5px; text-decoration:none;color:black;border-right:1px solid gray;background:white}
ul#navi a:hover {background:silver;color:red}

In acest moment am definit si ce se intimpla cu a la hover, si am cam terminat. Nu arata prea fancy, insa e perfect functional si am folosit minimum de cod posibil.

Puse laolalta, definitiile css arata asa:

ul#navi {list-style:none;float:left;background:yellow;width:988px;border:1px solid black}
ul#navi li {float:left}
ul#navi a {padding: 2px 5px; text-decoration:none;color:black;border-right:1px solid gray;background:white}
ul#navi a:hover {background:silver;color:red}

Iar portiunea de html este:

<ul id="navi">
<li><a href="#">Linkul 1</a></li>
<li><a href="#">Linkul 2</a></li>
<li><a href="#">Linkul 3</a></li>
<li><a href="#">Linkul 4</a></li>
</ul>

Back to top

#10
DarkAngelBv

Posted 18 December 2007 - 00:20

=== Proud owner of === ++++ Audi & Opel ++++

Grup: Senior Members
Posts: 12,747
Înscris: 24.03.2006

si de ce nu am folosi proprietarea display:inline in loc de float?

Back to top

#11
xnoise

Posted 18 December 2007 - 07:57

Active Member

Grup: Members
Posts: 1,310
Înscris: 08.02.2007

darkangel pt ca pe inline nu ai acces la margini orizontale si verticale, la width, height, etc etc etc. Oricum o sa folosesti display:inline pt IE (daca folosesti margini intre elementele listei) (stanga - dreapta). Si pt ca in anumite conditii or sa iti apara divers bug-uri de afisare pe IE. float-ul e ceva mai controlabil.

BTW: in loc de padding la elementele listei, eu folosesc margin. mi se pare o solutie mai buna pt spatii intre respectivele float-uri.

Edited by xnoise, 18 December 2007 - 07:59.

Back to top

#12
Jumping Jack

Posted 21 December 2007 - 13:03

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Buna ziua. Am revenit - probabil pentru ultima data in anul asta - si profit de ocazie ca sa urez la toata lumea Craciun fericit si un 2008 cel putin la fel de bun ca 2007.

Ramasesem la header, caruia i-am atasat o lista de linkuri.

Si raminem si acum tot la header, ca n-am terminat cu el. Azi o sa inlocuim textul de la h1 cu o imagine. In primul rind, DE CE inlocuim textul cu o imagine? Este mai simplu sa punem pur si simplu o imagine (<img src="".../>) si gata. Ca o imagine, chiar daca are 900KB, odata incarcata de browser ramine in cache si nu mai trebuie descarcata de fiecare data cind se schimba pagina si este nevoie de respectiva poza. Ei bine, nu e chiar asa. teoria de mai sus este buna pentru poze care au rol informational, nu cele cu rol decorativ. Acestea pot fi foarte bine apelate prin css, in plus, putem sa le schimbam extrem de usor, modificind un singur fisier - fisierul css (si facind o alta imagine, evident).

Image replacement

Sint mai multe metode de a inlocui un text cu o imagine, si fiecare are avantaje si dezavantaje. Nici o metoda nu este perfecta si va trebui sa faceti compromisuri cind veti utiliza oricare dintre ele. Nu exista de asemenea o regula gen "asta e buna, asta nu e buna", veti decide singuri care dintre ele este mai potrivita scopului vostru. Vom ajunge la detaliile astea putin mai tirziu. Acum vom scrie codul necesar pentru a aplica imaginea ca fond:

Pregatirea
Sa presupunem ca dorim sa inlocuim textul din h1 cu o imagine. Presupun ca aveti o imagine pe care o numiti header1.gif si o salvati in acelasi folder cu documentul html. Mai presupun ca imaginea asta are dimensiunile urmatoar: latime: 200px, inaltime: 50px. Scrieti codul de mai jos in css-ul din head-ul paginii pe care am inceput-o mai demult.

h1 {background-image: url(header1.gif);background-repeat:no-repeat; background-position:bottom left;background-color:#cccccc  }

Sau mai comprimat, astfel:

h1 {background: #ccc url(header1.gif) bottom left no-repeat}

Daca ati salvat imaginea de mai sus in folder si ati vizualizat pagina in browser, poate ca ati observat ca rezultatul nu este chiar perfect. Se vede textul, imaginea nu este aratata in totalitate. In plus, imaginea nu porneste direct din margine - asta deoarece mai demult am scris p, h1 {margin:10px}. Vom taia h1 din aceasta definitie, pentru a putea aseza imaginea chiar la marginea paginii (nu este obligatoriu, puteti lasa margin;10px la h1 daca aveti chef).

Acum, imaginea cu care inlocuim pe h1 este de 200x50px. Asa ca vom scrie aceste declaratii la h1. Prin urmare, linia de mai sus devine:

h1 {background: #ccc url(header1.gif) bottom left no-repeat;width:200px;height:50px}

In acest moment se vede toata imaginea, insa textul din h1 inca este acolo.

Si acum intra in scena metodele de image replacement.

1. FIR - Farnher Image Replacement.
Se numeste asa de la numele celui care a propus-o prima data - Todd Farnher.
Metoda asta presupune utilizarea de markup suplimentar, respectin un <span> in interiorul tag-ului h1. In acest span trebuie sa se afle textul care este inlocuit de poza. Prin css vom ascunde <span>-ul, si va ramine numai imaginea de fond. Iar codul arata asa:

html:

<h1><span>Asta este titlul paginii</span></h1>

css:

h1 {background: #ccc url(header1.gif) bottom left no-repeat;width:200px;height:50px}
h1 span {display:none}

Ei, acum arata altfel titlul nostru, insa metoda are doua dezavantaje:

1. necesita markup suplimentar, fara nici un rol structural.
2. daca un user navigheaza intr-un browser care are css activat insa are imaginile dezactivate, nu va vedea absolut nimic. (caz destul de rar, totusi)

De asemenea metoda nu este foarte recomandata in cazul in care avem useri care folosesc in loc de un browser vizual, un cititor de text (screen reader). Acesta va asculta de comanda display:none pentru span, si va trece peste el, desi display:none se adreseaza numai browserelor vizuale.

2. LIR - Leahy/Langridge Image Replacement .
Este numit asa din cauza numelor celor care au propus-o - in mod independent unul de altul.

Diferenta la nivel de markup fata de metoda anterioara este ca nu avem nevoie de tag-uri suplimentare. Deci codul html va arata ca inainte de matoda de mai sus, respectiv:

<h1>Asta este titlul paginii</h1>

Mari diferente sint insa la nivel de css. In primul rind vom da lui h1 un padding-top de 50px (inaltimea pozei noastre). Astfel, in portiunea cuprinsa intre margine si text va aparea imaginea noastra. facind numai aceasta modificare, css-ul arata cam asa:

h1 {background: #ccc url(header1.gif) bottom left no-repeat;width:200px;height:50px;padding-top:50px}

Nu e chiar ce vrem, tinind cond de faptul ca vedem acum si poza si scrisul. Deci va trebui sa ascundem scrisul. pentru asta, vom limita inaltimea lui h1 pina la a nu mai vedea scrisul, ci numai poza. Un mic calcul ne spune ca aceasta limita este zero - avem padding de 50px in care plasam imaginea, si dorind ca h1 sa aibe tot 50px, scazind cele doua obtinem 0 (remember box-model). Deci height:0 la h1. Pentru a nu permite textului sa fie totusi aratat, h1 va avea nevoie si de overflow:hidden.

css final:

h1 {background: #ccc url(header1.gif) bottom left no-repeat;width:200px;height:0;overflow:hidden;padding-top:50px}

In acest moment, avem o imagine care inlocuieste un text, fara a utiliza un span suplimentar. In cazul in care va mai intereseaza IE5.x pentru Windows (desi nu cred), trebuie sa spun ca, datorita proastei interpretari a box-modelului din partea susnumitului browser, nu se va vedea nimic. Pentru a multumi si eventualii clienti cu ie5.x, va trebui sa servim o declaratie modificata pentru ei, care sa le spuna height:50px. Modul de aservi lui ie5.x un css diferit va fi discutat alta data.

Avantajul metodei fata de cea anterioara este in mod evident faptul ca nu avem nevoie de un span suplimentar.
Ca dezavantaj insa, ramine imposibilitatea de a vedea ceva navigind cu images off in browser.

3. Phark Method - inventata de Mike Rundle.
Este cea mai simplista din cele trei si se foloseste numai de text-indent. Indentind textul negativ cu o valoare absurda (-9999px), acesta este efectiv scos din pagina si nu mai este arata. Nu are probleme cu box-model, nu are probleme cu markup suplimentar, si css-ul este de-a dreptul jenant: text-indent:-9999px.

Si arata asa acum, declaratie noastra pentru h1:

h1 {background: #ccc url(header1.gif) bottom left no-repeat;width:200px;height:50px;text-indent:-9999px}

Avantaj - este evident, foarte putin cod, este safe, nu necesita markup suplimentar.
Dezavantaj - again, in situatia css on/images off, nu se vede nimic.

Toate metodele de pina acum sint foarte usor de implementat, insa nu rezolva nici una o problema minora - images off. De fapt, este asta o problema? citi navigheaza fara imagini? Ei, se pare ca exista destui freaksi din astia care, din necesitatea de a salva 2-3 biti de banda, taie imaginile. Pentru ei, Shea replacement:

4. Shea Replacement - de la Dave Shea, care a inventat-o

Metoda asta este - din cite stiu eu, s-ar putea sa ma insel - pina acum singura care rezolva problema css on/images off. Ideea este de a folosi in <span> gol care va fi pozitionat absolut, acoperind astfel textul. Dezavantajul este ca nu merge decit cu imagini opace, daca avem transparenta (gif sau png), s-a dus!

html:

<h1><span></span>Asta este titlul paginii</h1>

css

h1{width: 200px;height: 50px;position: relative;}
h1 span {background: url(header1.gif) no-repeat;position: absolute;width: 100%;height: 100%;}

Avantaj: rezolva problema css on/images off, e compatibil crossbrowser
Dezavantaj: markup suplimentar, gol (veti primi warning la validare). Nu functioneaza cu imagini transparente

Cam astea ar fi metodele uzuale de a inlocui text cu imagini prin interemediul css. In afara de cele de mai sus, exista citeva mici variatiuni pentru unele, si cam atat. Ce folositi voi, ramine sa decideti.

Edited by Jumping Jack, 21 December 2007 - 13:06.

Back to top

#13
xnoise

Posted 06 February 2008 - 23:00

Active Member

Grup: Members
Posts: 1,310
Înscris: 08.02.2007

Pentru ca am promis, iata ca am realizat si un tutorial pt layout-uri fluide bazat pe css.

Atentie: solutiile prezentate de mine aici nu sunt singurele si poate nici cele mai bune. mie mi se par insa cele mai flexibile si mai usor de inteles. Voi explica fiecare pas in parte astfel incat sa se inteleaga ce fac si de ce fac.

Orice sugestie este binevenita, sau orice reclamatie.

Deci sa incepem. In cadrul acestui tutorial vom incerca sa obtinem un layout fluid cu 3 coloane. Asta insemnand ca layout-ul se va extinde in functie de rezolutia utilizatorului.

Presupunem ca site-ul va avea o structura clasica de header + meniu orizontal + continut + footer. Incepem cu constructia principala, elementele absolut necesare in html: doctype [o sa folosesc un doctype html 4.01 strict], html, head [titlu + css + content-type] si body. Cam asta ar trebui sa aveti in pagina de fiecare data cand incepeti un layout.

HTML de baza

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Some title here</title>
		<link rel="stylesheet" type="text/css" href="stylesheet.css">
	</head>
	<body id="main-wrapper">
	</body>
</html>

CSS de baza

	* { margin:0; padding:0; outline:none; font-size:11px; font-family:verdana; }

Selectorul CSS general (*) de mai sus este folosit pt a indeparta marginile si pading-urile puse default in html pe diverse elemente. outline:none este folosit pt a indeparta border-ul punctat care apare la diferite actiuni, font-size:11px foloseste pt a seta un font-size default iar font-family foloseste pentru a seta verdana ca font default. Toate acestea pot fi alterate in functie de nevoile designerului.

vom incepe prin a adauga containerele mari pe pagina, folosind pentru acest lucru div-uri (elemente fara insemnatate semantica ce vor delimita diversele zone de pe pagina). Asadar vom avea in interiorul tag-ului body:

	<div id="main-container">
		<div id="header">
		</div>
		<div id="menu">
		</div>
		<div id="content" class="clearfix">
		</div>
		<div id="footer">
		</div>
	</div>

Dupa cum se observa am delimitat zonele din pagina pentru un mai bun cotrol asupra lor. Daca despre header se poat spune ca este un element obisnuit si destul de clar, nu acelasi lucru se poate spune despre menu si despre content. Asadar ne mutam focalizarea catre menu.

	<ul id="menu-container" class="clearfix">
		<li class="menu-item"><a href="#">menu item 1</a></li>
		<li class="menu-item"><a href="#">menu item 2</a></li>
		<li class="menu-item"><a href="#">menu item 3</a></li>
		<li class="menu-item"><a href="#">menu item 4</a></li>
		<li class="menu-item"><a href="#">menu item 5</a></li>
	</ul>

Pentru aceasta portiune vm folosi urmatorul CSS:

	#menu-container { list-style:none; }
		#menu-container .menu-item { float:left; margin-left:5px; display:inline; }

De ce display:inline? pentru a evita double margin bug-ul din IE 6, care la marginile orientate in aceeasi directie cu un float se dubleaza.

Terminand cu meniul, trecem la partea care e cea mai importanta a site-ului, content-ul.

	<div id="secondary-menu">
		some text here
	</div>
	<div id="text-content">
		some other text here
	</div>
	<div id="links-apps-menu">
		some more text here
	</div>

cu urmatorul CSS:

	#content #secondary-menu { width:20%; float:left; }

	#content #text-content { width:50%; float:left; }

	#content #links-apps-menu { width:30%; float:left; }

Ceea ce am realizat mai sus reprezinta un structura de baza a unui site cu 3 coloane fluid. Ultima portiune din acest layout este destul de clara pentru a nu interveni asupra ei, footer-ul.

Pentru ceva cosmetizare, vom folosi cateva culori si vom adauga ceva dimensiuni. Astfel pagina finala va arata cam asa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Some title here</title>
		<style type="text/css">
			* { margin:0; padding:0; outline:none; font-size:11px; font-family:verdana; }
			
			#header { height:100px; background:#000; }
			
			#menu-container { list-style:none; background:yellow; }
			
				#menu-container .menu-item { float:left; margin-left:5px; display:inline;  background:#ff0000; }	
				
			#content { overflow:hidden; width:100%; }
			
				#content #secondary-menu { width:20%; float:left; background:blue; margin-bottom:-32767px; padding-bottom:32767px; }
			
				#content #text-content { width:50%; float:left; background:#666; margin-bottom:-32767px; padding-bottom:32767px; }
			
				#content #links-apps-menu { width:30%; float:left; background:#ff00ff; margin-bottom:-32767px; padding-bottom:32767px; _margin-right:-1px; }

			.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
			
			.clearfix {display: inline-block;}
			
			/* Hides from IE-mac \*/
			* html .clearfix {height: 1%;}
			.clearfix {display: block;}
			/* End hide from IE-mac */
			
			#footer { height:100px; background:#000; }
								
		</style>
	</head>
	<body id="main-wrapper">
		<div id="main-container">

			<div id="header">
			</div>
			<div id="menu">
				<ul id="menu-container" class="clearfix">
					<li class="menu-item"><a href="#">menu item 1</a></li>
					<li class="menu-item"><a href="#">menu item 2</a></li>
					<li class="menu-item"><a href="#">menu item 3</a></li>

					<li class="menu-item"><a href="#">menu item 4</a></li>
					<li class="menu-item"><a href="#">menu item 5</a></li>
				</ul>			
			</div>
			<div id="content" class="clearfix">
				<div id="secondary-menu">
					some text here
					<br><br><br><br><br>
				</div>

				<div id="text-content">
					some other text here
					<br><br><br><br>
				</div>
				<div id="links-apps-menu">
					some more text here
					<br><br><br><br><br><br>
				</div>			
			</div>
			<div id="footer">

			</div>
		</div>		
	</body>
</html>

Daca va uitati atent in CSS veti observa niste valori enorme. Aceste valori sunt perfect valide si ajuta la obtinerea unui layout cu coloane aparent egale (spun aparent pt ca asa este, coloanele nu sunt neaparat egale) cu inaltimea celei mai inalte dintre ele. Mai multe detalii (in cazul in care va interseaza sa aflati ce se afla in spatele tehnicilor folosite) gasiti la adresele: http://www.positioni.../onetruelayout/ si http://www.ejeliot.com/blog/61 .

Cam atat ar fi de discutat despre un layout fluid de 3 coloane.

Cateva mentini de final:
ATENTIE f mare la folosirea de margini procentuale pe fiecare dintre float-uri pt ca poate duce la distrugerea layout-ului in IE < 7 daca este combinat si cu hover pe diverse link-uri. Mai multe informatii aici: http://www.positioni...tages.html#link [recomandat avansatilor]
Tot la final: atentie mare la clasa clearfix. Sub nici o forma aceasta nu trebuie sa dispara pentru ca veti avea surprize neplacute [atat pe IE cat si pe FX si alte browsere]. Aceasta clasa inlocuieste clasicul <br style="clear:both"> folosit pt clearing. De ce aceasta clasa si nu <br>? pt ca nu adauga cod suplimentar in sursa.

Next: vom transforma acest layout in unul fix cu foarte putin efort.

Enjoy!!!

Later edit: am observat mai tarziu un bug care pare sa se intample pe orice IE: 20% + 30% + 50% = 100%+1px... rezolvat cu ajutorul unui hack pt IE.

Edited by xnoise, 06 February 2008 - 23:26.

Back to top

#14
dwhite

Posted 07 February 2008 - 03:21

Junior Member

Grup: Members
Posts: 50
Înscris: 21.10.2007

Multumim tuturor celor care s-au angajat la compunerea acestor tutoriale.Sunt foarte foarte eficiente.Am urmat sfaturile unora dintre voi si am invatat,cred eu ce era mult mai bine.Am inceput sa pricep lucrurile mult mai clar cu ajutorul vostru

va multumesc!p.s.: mai astept tutoriale daca aveti timp de ele

se vede ca ceea ce faceti,faceti din placere

Back to top

#15
Jumping Jack

Posted 04 March 2008 - 13:13

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Buna ziua la toata lumea! Long time no see, cum ar spune neamtul, asa ca sa intram direct la materie. O sa va propun acum un mic trick, si anume un dropdown list, pur CSS (ma rog, cu un pic de ajutor pentru IE mai mic de vers. 7).
Probabil multa lume stie despre ce este vorba la un dropdown list (pentru cei care nu sint familiarizati, este vorba de un meniu care este afisat numai la o actiune a userului- la hover sau onclick).
In esenta este vorba de o lista a carei cod arata cam asa:

<ul>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a>
     <ul>
           <li><a href="">Sublinks</a></li>
           <li><a href="">Sublinks</a></li>
<li><a href="">Sublinks</a></li>           <li><a href="">Sublinks</a></li>           <li><a href="">Sublinks</a></li>

     </ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>

</ul>

Back to top

#16
Jumping Jack

Posted 04 March 2008 - 14:00

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Habar n-am de ce nu ma lasa sa editez postul, asa ca il repet, de data asta completat.

Buna ziua la toata lumea! Long time no see, cum ar spune neamtul, asa ca sa intram direct la materie. O sa va propun acum un mic trick, si anume un dropdown list, pur CSS (ma rog, cu un pic de ajutor pentru IE mai mic de vers. 7).
Probabil multa lume stie ce este un dropdown list (pentru cei care nu sint familiarizati, este vorba de un meniu care este afisat numai la o actiune a userului- la hover sau onclick). Pina la CSS acest fel de liste era posibil numai folosind javascript, astfel fiind afisate linkurile ascunse, acum putem sa ne folosim de pseudoclasa :hover pentru a obtine acelasi lucru.
Problema cea mai mare este ca IE pina la (inclusiv vers. 6) nu recunoaste pseudoclasa :hover decat la linkuri (a:hover). Toate celelalte browsere stiu sa aplice :hover la orice element posibil, si daca stim unde si cum sa folosim asta, putem obtine niste rezultate foarte spectaculoase. Si cu un pic de javascript reusim sa il face si pe ie sa conlucreze.
Functioneaza in toate browserele cunoscute (inclusiv in ie5 - daca mai intereseaza pe cineva asta).

In esenta este vorba de o lista cu un banal cod html care arata cam asa:

<ul>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a>
	 <ul>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>		   
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>

	 </ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
</ul>

In codul html nici nu prea mai avem ce face in plus, decit - amanunt important - sa botezam lista cu un id. In rest, codul este destul de self explanatory. In ceea ce priveste css, in afara de 2 linii - vezi in cod - care sint necesare pentru a declansa dropdown-ul, restul este css foarte banal pentru a face linkurile sa arate cit de cit estetic, si poate fi modificat in functie de gustul fiecaruia.
Mai jos se afla codul complet html + css +javascript. Bafta !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>dropdown list</title>
<style type="text/css">
* {margin:0;padding:0; list-style:none}
body {font:normal 62.5%/1.4 verdana, arial, helvetica, sans-serif;color:#000;background:#fff}
a {text-decoration:none;color:#666}

#wrapper {margin:0 auto;width:920px;font-size:120%}
#navi {float:left;width:920px;border-top:1px solid #fff;border-bottom:1px solid #000;background:#fff;font-size:1em}
#navi li {float:left;position:relative;} 
/* position relative este obligatoriu, altfel lista cu dropdown va fi legata de primul element urmator cu relativ, sau in lipsa acestuia- cum este si cazul aici - direct de body. */
#navi li a {padding:.3em 1em;float:left;background:#fafafa;line-height:1em;text-transform:uppercase;border-right:1px solid #ccc}
#navi li a:hover,#navi li.active a,#navi li:hover a,#navi li.over a {background:#000;color:#fff;text-decoration:none}

/*urmatoarele doua linii fac posibil efectul de dropdown. A se observa clasa .over care este necesara pentru ie. */
#navi ul {display:none}
#navi li:hover ul,#navi li.over ul {display:block;position:absolute;z-index:10;top:1.59em;left:0;width:200px}

#navi li li a {text-transform:none;background:#444;color:#fff;border-bottom:1px solid #fff;width:190px;padding:2px 5px}
#navi li li a:hover {background:#ddd;color:#000}

</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navi");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

</head>

<body>
<div id="wrapper">
<ul id="navi">
<li><a href="#">Un link</a></li>
<li><a href="#">Un link cu sublinks</a>
	 <ul>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>		   
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>

	 </ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un alt link cu sublinks</a>
<ul>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>		   
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>
		   <li><a href="">Sublinks</a></li>

	 </ul>
</li>
<li><a href="#">Un link</a></li>
<li><a href="#">Un link</a></li>
</ul>
</div>
</body></html>

Back to top

#17
Jumping Jack

Posted 04 March 2008 - 16:53

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

Afisarea unei poze la hover peste un cuvint.

hehe... Am gasit adineauri o problemuta pe un alt topic, si m-am gindit sa postez aici rezolvarea. Este vorba de afisarea unei poze la mouseover (hover, de fapt). Adica, o poza incarcata in sursa sa nu fie aratata decat la hover peste un cuvint. Iata mai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>dropdown list</title>
<style type="text/css">
* {margin:0;padding:0; list-style:none;border:none}
body {font:normal 62.5%/1.4 verdana, arial, helvetica, sans-serif;color:#000;background:#fff}
a:link,a:visited,a:hover,a:active {outline:0}
a {text-decoration:none;color:#c33}
#wrapper {height:500px;position:absolute;left:50%;top:50%;margin:-250px auto auto -460px;width:920px;font-size:120%;background:#ccc}
a.poze{position: relative;}
a.poze:hover {background-color: transparent;z-index: 50;} /*nu scoateti background:transparent, altfel nu mai functioneaza in ie6 */
a.poze span{ position: absolute;background-color: #fff;padding: 0;left: -1000px;visibility: hidden;text-decoration: none;}
a.poze:hover span{ visibility: visible;top: 0;left: 70px;text-decoration:none;background:#fff;color:#000}
a.poze span img{ border: 1px solid #aaa;}
</style>


</head>
<body>

<div id="wrapper">
<p> Lorem Ipsum is simply dummy text <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>
Lorem Ipsum is simply dummy <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <a class="poze" href="#" onclick="return false;">cuvintul tau cu hover <span><img src="http://forum.softpedia.com/images/softpedia_forum_logo.gif" alt="" /></span></a>text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body></html>

Back to top

#18
droso

Posted 17 March 2008 - 15:18

New Member

Grup: Members
Posts: 1
Înscris: 02.04.2007

Fiind un novice absolul in ceea ce priveste css-ul va intreb si eu cu gentilete, daca este cineva dispus sa ma ajute in a valida un site pt css si xhtml. In cazul in care se poate posta si site-ul este vorba de www.bytedesign.ro. In cazul in care nu este permis sa scriu despre ce e vorba rog moderatorul sa stearga site-ul. Cu multumiri. Droso

Back to top

Anunturi

Bun venit pe Forumul Softpedia!

Tutorial xhtml/css

#1 Jumping Jack Posted 06 December 2007 - 20:47

#2 xnoise Posted 07 December 2007 - 14:14

#3 Jumping Jack Posted 07 December 2007 - 21:55

#4 Jumping Jack Posted 08 December 2007 - 14:15

#5 Jumping Jack Posted 09 December 2007 - 19:40

#6 DarkAngelBv Posted 09 December 2007 - 20:02

#7 dan_qaz Posted 11 December 2007 - 21:51

#8 xnoise Posted 11 December 2007 - 22:43

#9 Jumping Jack Posted 17 December 2007 - 16:12

#10 DarkAngelBv Posted 18 December 2007 - 00:20

#11 xnoise Posted 18 December 2007 - 07:57

#12 Jumping Jack Posted 21 December 2007 - 13:03

#13 xnoise Posted 06 February 2008 - 23:00

#14 dwhite Posted 07 February 2008 - 03:21

#15 Jumping Jack Posted 04 March 2008 - 13:13

#16 Jumping Jack Posted 04 March 2008 - 14:00

#17 Jumping Jack Posted 04 March 2008 - 16:53

#18 droso Posted 17 March 2008 - 15:18

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
Jumping Jack

Posted 06 December 2007 - 20:47

#2
xnoise

Posted 07 December 2007 - 14:14

#3
Jumping Jack

Posted 07 December 2007 - 21:55

#4
Jumping Jack

Posted 08 December 2007 - 14:15

#5
Jumping Jack

Posted 09 December 2007 - 19:40

#6
DarkAngelBv

Posted 09 December 2007 - 20:02

#7
dan_qaz

Posted 11 December 2007 - 21:51

#8
xnoise

Posted 11 December 2007 - 22:43

#9
Jumping Jack

Posted 17 December 2007 - 16:12

#10
DarkAngelBv

Posted 18 December 2007 - 00:20

#11
xnoise

Posted 18 December 2007 - 07:57

#12
Jumping Jack

Posted 21 December 2007 - 13:03

#13
xnoise

Posted 06 February 2008 - 23:00

#14
dwhite

Posted 07 February 2008 - 03:21

#15
Jumping Jack

Posted 04 March 2008 - 13:13

#16
Jumping Jack

Posted 04 March 2008 - 14:00

#17
Jumping Jack

Posted 04 March 2008 - 16:53

#18
droso

Posted 17 March 2008 - 15:18