Curs Css

Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in raport cu alte elemente.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.


Proprietatea position

Cu proprietatea position se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolute si fixed.

Pozitionarea statica

Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt dispuse unul dupa altul in interiorul documentului.
Sintaxa:

selector { position:static; }
- Un element static nu poate fi repozitionat in mod explicit.

Pozitionarea relativa

Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul elementului parinte. Apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el.
Sintaxa:
selector { position:relative; }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right".

Pozitionarea absoluta

Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor X si Y, indiferent de pozitiile altor elemente.
Sintaxa:
selector { position:absolute; }
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al obiectului (care are "position: relative") in care este inclus elementul pozitionat absolut.

Pozitionarea fixa

Pozitionarea fixa se face in raport cu fereastra browser-ului, iar la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa:
selector { position:fixed; }

Pozitionarea in raport cu latura de sus, respectiv stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului parinte, folosind proprietatile: top si left
Forma generala este:

selector {
position: valoare;
top: valoare;
left: valoare;
}
- La 'top' si 'left', "valoare" poate fi: De asemenea, pot lua si valori negative.

Iata un exemplu in care tag-ul <h3> va fi pozitionat la o distanta de 25 pixeli fata de marginile sus si stanga ale unui DIV parinte:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div {
border:1px solid #0000d0;
position:relative;
height:150px;
width:250px;
}
div h3 {
margin:0;
position:relative;
top:25px;
left:25px;
}
</style>
</head>
<body>
<div>
<h3>Tutorial css - position</h3>
</div>
</body>
</html>

Pozitionarea in raport cu latura de jos, respectiv dreapta

Pozitionarea in raport cu laturile de jos, respectiv dreapta se poate aplica in cazul pozitionarilor "absolute" sau "fixed". Originea de referinta va fi coltul din dreapta-jos al elementului parinte.
Definirea distantei fata de latura de jos, respectiv din dreapta se face cu proprietatile: bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea.
Forma generala este:

selector {
position: absolute | fixed;
bottom:valoare;
right:valoare;
}

- Exemplu: tag-ul <h3> va fi pozitionat la o distanta de 25 pixeli fata de marginile de jos si dreapta ale unui DIV parinte:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div {
border:1px solid #0000d0;
position:relative;
height:150px;
width:250px;
}
div h3 {
margin:0;
position:absolute;
bottom:25px;
right:25px;
}
</style>
</head>
<body>
<div>
<h3>Tutorial css - position</h3>
</div>
</body>
</html>

In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top / left.


Includerea unui element absolut in unul relativ

In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului relativ.
- Iata un exemplu in care o eticheta <div> (cu class="absolut") este inclusa in alta eticheta <div> (cu class="relativ"):

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.relativ {
border:1px solid #0000d0;
position:relative;
height:150px;
width:250px;
}
.absolut {
background:#bdbdfb;
position:absolute;
margin:0;
top:30px;
left:30px;
height:90px;
width:150px;
}
</style>
</head>
<body>
<div class='relativ'>
Inainte de Div.
<div class='absolut'>Div-ul .absolut</div>
 Dupa Div.
</div>
</body>
</html>

Includerea unui element relativ in unul absolut

In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa in alta eticheta <div> (cu class="absolut"):

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.absolut {
border:1px solid #0000d0;
position:absolute;
margin:0;
top:40px;
left:50px;
height:150px;
width:250px;
}
.relativ {
background:#bdbdfb;
position:relative;
height:90px;
width:150px;
}
</style>
</head>
<body>
<div class='absolut'>
Div-ul .absolut.
<div class='relativ'>Div-ul .relativ</div>
</div>
</body>
</html>

Pozitionarea in spatiu 3D

Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index.
Valoarea acestei proprietati aduce elementul in fata sau in sptele altor obiecte HTML din pagina.
Sintaxa generala:

selector { z-index:valoare; }
Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.
In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui.

- Exemplu, Div-ul #dv1 e pozitionat absolut si, datorita proprietatii "z-index" apare deasupra Div-ului #dv2 care e dupa el.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.parent {
border:1px solid #0000d0;
position:relative;
height:180px;
width:280px;
}
#dv1 {
background:#bdbdfb;
position:absolute;
top:40px;
left:50px;
height:100px;
width:150px;
z-index:9999;
}
#dv2 {
background:#ebeb00;
height:100px;
width:150px;
}
</style>
</head>
<body>
<div class='parent'>
<div id='dv1'>Div-ul #dv1</div>
<div id='dv2'>Div-ul #dv2</div>
</div>
</body>
</html>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Pozitionare elemente HTML cu CSS

Last accessed pages

  1. Pronume indirect (2216)
  2. Curs PHP MySQL, Tutoriale si Scripturi PHP (128379)
  3. Forma verbului Hay (5814)
  4. Prezent perfect continuu - Exercitii si teste incepatori (15572)
  5. Limba spaniola curs online incepatori si avansati (28486)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)