Stiluri CSS Poziţionare obiecte în pagină Poziţionarea permite aşezarea unui obiect într-un anume loc folosind coordonatele. Totodată obiectele pot fi poziţionate pe straturi diferite, unul deasupra celuilalt. Atât poziţionarea absolută (ASOLUTE) cât şi cea relativă (RELATIVE) folosesc proprietăţile LEFT şi TOP exprimate în px (pixeli), în (inci), pt (puncte), ems, procentaje sau cm (centimetri).
Poziţionarea absolută plasează obiectul în pagină exact în locaţia dată de left şi top(colţul stânga-sus al paginii). Astfel poate fi creat un element liber faţă de celelalte din pagină. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat poziţionarea absolută etichetei h4 <html> <head> <title>Exemplu 8_1</title> </head> <body> <h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4> <h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4> </body> </html>
Poziţionarea relativă este poziţia normală pe care o ocupă un element, după elementele anterioare şi înaintea celor următoare. Poate fi deplasat faţă de această poziţie folosind proprietăţile left şi top. Exemplu: am folosit două obiecte, unul poziţionat absolut, celălalt relativ <html> <head> <title>Exemplu 8_2</title> <style type="text/css"> <!-.absolut {position: absolute; left: 200px; top: 150px;} .relativ {position: relative; left: 50px; top: 50px;} --> </style> </head> <body> <div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div> Text <div class="relativ">Pozitionare relativa, dupa "Text"</div> </body> </html>
1
Poziţionarea tridimensională Elementele sunt poziţionate pe ecran pe o suprafaţă bidimensională dar pot fi asezate şi unul deasupra celuilalt, într-o stivă utilizând un indicativ (index-z) începând cu 0, următorul 1 şi tot aşa în continuare. Elementul cu indexul cel mai mare este aşezat deasupra. Exemplu: am folosit trei obiecte poziţionate absolut <html> <head> <title>Exemplu 8_3</title> <style type="text/css"> <!-.element1 {position: absolute; left: 30px; top: 30px; z-index: 3} .element2 {position: absolute; left: 50px; top: 50px; z-index: 2} .element3 {position: absolute; left: 70px; top: 70px; z-index: 1} --> </style> </head> <body> <div class="element1"><img src="poza.jpg"></div> <div class="element2"><img src="poza.jpg"></div> <div class="element3"><img src="poza.jpg"></div> </body> </html>
Proprietăţile CSS Positioning Proprietăţile CSS Positioning permit să se specifice dacă un element va fi afişat la stânga, la dreapta sus sau jos. Deasemeni mai permit stabilirea formei unui element, plasarea unui element în spatele altui element şi să se specifice ce se va întâmpla în cazul în care conţinutul unui element este mai mare decât zona alocat lui.
2
Tabel cu proprietÄ&#x192;ĹŁi
Proprietate Descriere
Valoare
bottom
Seteaza cat de departe (deasupra sau sub) este partea de jos a unui element de partea de jos a elementului parinte
auto % length
clip
Seteaza forma unui element. Elementul este decupat dupa forma respectiva si afisat
shape auto
left
Seteaza cat de departe (la dreapta auto sau la stanga) este marginea stanga a % unui element de marginea stanga a length elementului parinte
overflow
Seteaza ce se intampla in cazul in care continutul unui element depaseste zona desemnata
visible hidden scroll auto
position
Plaseaza un element intr-o pozitie statica, relativa, absoluta sau fixa
static relative absolute fixed
right
Seteaza cat de departe (la stanga sau auto la dreapta) se afla mariginea dreapta % a unui element de marginea dreapta length a elementului parinte
top
Seteaza cat de departe (deasupra auto sau sub) este marginea de sus a unui % element de marginea de sus a length elementului parinte
verticalalign
Seteaza aliniamentul vertical al unui element
baseline sub super top text-top middle bottom text-bottom length %
z-index
Seteaza ordinea intr-un element
auto number
3
CSS - Pozţionare relativă – exemple Poziţionarea relativă se referă la o poziţie diferită faţă de poziţia statică .pozitionare_relativa { position:relative; left:15px; top:30px; } Valorile lui top şi left pot fi deasemenea negative. .pozitionare_relativa{ position:relative; left:-15px; top:-30px; } Folosind aceasta poziţionare relativă pot fi suprapuse mai multe elemente. <style type="text/css"> .element_suprapus { position:relative; top:-20px; } </style> <h2>Acest element are o pozitionare statica</h2> <h2 class="element_suprapus">Titlul va fi urcat mai sus fata de pozitia initiala</h2> <p><b>Note:</b> Trebuie mentionat ca spatiul corespunzator elementului, va fi pastarat</p> De multe ori poziţionarea relativă sau div-urile poziţionate relativ sunt folosite ca şi container pentru alte divuri sau elemente poziţionate absolut.
CSS - Pozitionare absoluta – exemple Elementele poziţionate absolut vor fi poziţionate în funcţie de primul element părinte care are o poziţionare non-statică. Dacă nu este găsit un astfel de element, elementul părinte va fi considerat <html>. Spaţiul rezervat elementelor poziţionate absolut nu va fi păstrat. În acest sens celelalte elemente se comporta ca şi când elementul poziţionat absolut nu ar exista. În felul acesta se pot suprapune mai multe elemente. p { position:absolute; left:200px; top:200px; }
Suprapunerea mai multor elemente in CSS Cu ajutorul CSS pot fi suprapuse mai multe elemente.
4
Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atât valori pozitive cât şi negative. <html> <head> <style type="text/css"> img { position:absolute; left:0px; top:0px; z-index:-1; } </style> </head> & <body> <h1>Suprapunerea mai multor elemente in CSS</h1> <img src="imagine.jpg" width="100" height="100" /> <p>Vom folosi atributul z-index pentru a specifica ordinea elementelor. z-index poate avea atat valori pozitive cat si negative.</p> </body> </html> Datorită faptului că "z-index"-ul imaginii are valoarea -1, imaginea va fi poziţionată în spatele textului. De aici regula că un element cu "z-index" mai mare va fi poziţionat în faţa unui element cu "z-index" mai mic.
CREARE PROIECT 5
Va trebui să creaţi un proiect pentru a demonstra că v-aţi însuşit cunoştinţele de webdesign. Paşii vor fi următorii: • • • • •
Definirea unui site pe o temă aleasă Adăugarea unei pagini principale (index.html) Crearea legăturilor paginii principale cu celelalte pagini din site Adăugarea de elemente atractive şi multimedia în paginile site-ului Definirea de stiluri CSS pentru paginilr site-ului
După crearea site-ului, va trebui să îl publicaţi pe un server.
PUBLICAREA SITE-ULUI • Pentru publicarea site-ului trebuie să vă creaţi cont pe site-uri de gazduire web, de obicei, gratis. Aceasta se face căutând pe Internet “gazduire gratis” pe motoarele de căutare. După ce aţi găsit un server pentru găzduire, vă creaţi cont pe el, verificaţi mail-ul trimis de la acel server şi vă autentificaţi. • Pentru încărcarea (upload-area) paginilor pe server trebuie să folosiţi un serviciu FTP sau dacă serverul este dotat un serviciu de tip netdrive. • ATENŢIE! Nu numai paginile HTML trebuie încărcate pe server, ci şi imaginile, sunetele, elementele multimedia folosite şi fişierele de tip CSS.
BAFTĂ MULTĂ!
6