Stabilirea vizibilitatii unui element

Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Daca elementul este ascuns (hidden), in locul suprafetei pe care o ocupa va fi afisat un spatiu gol.
Sintaxa:

selector { visibility:valoare }
Unde "valoare" poate fi:
Exemplu, elementul cu clasa "vi_hid" va fi ascuns:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
p {
border:1px solid #333;
}
.vi_hid {
visibility:hidden;
}
</style>
</head>
<body>
<p class='vi_hid'>Oricum nu se vede.</p>
<p>Paragraf dupa cel ascuns.</p>
</body>
</html>

Pentru a elimina complet afisarea unui element in pagina, se poate utiliza formula display:none;


Stabilirea suprafetei vizibile a unui element

La elementele care au position:absolute; (sau "fixed") se poate defini suprafata vizibila aplicand proprietatea:

clip: rect(v1 v2 v3 v4);
Aceasta stabileste portiunea din elementul respectiv care este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este invizibil pentru vizitator.

- Valorile de la rect() construesc un patrulater, definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la 100%.

Exemplu, suprafata vizibila a unui element cu clasa '.viz_clip' va fi cea incadrata de valorile functiei rect(), dar devine complet vizibila cand mouse-ul e deasupra acelui element:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.viz_clip {
background:#eeee11;
clip: rect(10px,150px, 45px, 1px);
position:absolute;
}
.viz_clip:hover {
clip:auto;
}
</style>
</head>
<body>
<p class='viz_clip'>Exemplu cu proprietatea css clip.<br>
Pozitionati mouse-ul peste acest continut.</p>
</body>
</html>

Afisare bara pentru derulare

Cu proprietatea overflow se poate stabili tratarea continutului care depaseste dimensiunile elementului in care se afla, controland astfel afisarea (cu o bara de "scroll", derulare) sau nu al acestuia.
Forma generala:

selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata bara de derulare, folosind una din valorile:
Iata un exemplu in care toate elementele cu clasa '.extradim' vor avea bare de scroll cand este necesar:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.extradim {
background:#e0e000;
overflow:auto;
height:80px;
width:250px;
}
</style>
</head>
<body>
<div class='extradim'>
<h2>Exemplu cu proprietatea css overflow</h2>
Afisare bara de scroll,<br>
Daca este continut care depaseste<br>
Dimensiunile elementului in care se afla.
</div>
</body>
</html>
Pentru definirea proprietatii "overflow" doar la una din directii: orizontala sau verticala; adica bara de derulare sa fie disponibila sau nu doar pentru una din aceste directii, se poate folosi o alta varianta a acestei proprietati, si anume: - Unde "valoare" poate fi una din valorile prezentate la "overflow".

Aspectul indicatorului de mouse

In mod implicit, aspectul indicatorului de mouse este determinat de browser. Navigatorul modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta.
Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa:

selector { cursor:valoare; }
Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:
Indicatoare de mouse

Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.

- Exemplu, cand mouse-ul este peste elementul cu clasa '.cs_point' va avea aspectul "pointer".
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div {
background:#dbdbfb;
height:80px;
width:150px;
}
.cs_point {
cursor:pointer;
}
</style>
</head>
<body>
<div class='cs_point'>Pozitionati mouse-ul aici.</div>
</body>
</html>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Configurari pentru vizibilitate si mouse

Last accessed pages

  1. Adverbele in limba engleza - Adverbs (13238)
  2. Introducere in HTML (8533)
  3. Coduri pt culori (24941)
  4. Instructiuni repetitive for si while (1645)
  5. Curs HTML gratuit Tutoriale HTML5 (30146)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2367)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1301)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (856)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (804)