Proprietatea CSS numita “Overflow” ii spune browserului cum sa afiseze continutul excedentar al unui element caruia i se poate atribui o inaltime(div, p etc.). Daca elementul container nu are o inaltime impusa, acesta isi va modifica inaltimea in functie de continut si astfel, in acest caz, proprietatea “Overflow” devine inutila. Pentru exemplificare vom atribui urmatoarea clasa CSS unui div in interiorul caruia vom plasa o imagine si un text https://jogoscasinoonline.eu/.

.patrat {
width:100px;
height:100px;
border:1px solid black;
}

Overflow accepta 4 valori:

• visible(valoare default)
• hidden
• scroll
• auto

Visible

Daca nu ati setat alta valoarea, aceasta ii va fi atribuita implicit, fiind valoarea deafault a atributului “Overflow”. De retinut este faptul ca, desi va fi afisat tot continutul div-ului chiar daca depaseste dimensiunile definite, acesta nu va afecta layout-ul paginii.

Hidden

Continutul ce nu se incadreaza in limitele div-ului nu va fi afisat deloc. Aceasta valoare este folositoare pentru cazurile in care textul din interiorul divului nu are dimensiuni fixe si poate creea probleme de vizualizare. Continutul ce nu se va incadra in limite va fi accesibil doar prin intermediul vizualizarii codului sursa al paginii, asa ca poate fi considerat “pierdut” pentru utilizator.
Scroll

Daca este setata aceasta valoare, in interiorul div-ului vor aparea 2 bari de scroll pe orizontala si verticala, pentru vizualizarea continutului. De retinut este faptul ca ambele bari de scroll vor fi afisate, chiar daca in unele cazuri este necesara doar una dintre ele.

Auto

Valoare “auto” este similara cu “scroll”, diferenta o face faptul ca doar bara necesara este afisata.

Unde devine folositoare proprietatea “overflow”

1.In cazul in care avem de afisat mult continut intr-un spatiu relativ mic.

Atunci cand avem foarte mult continut dar putin spatiu la dispozitie, il putem plasa intr-un div cu dimensiuni prestabilite si caruia ii setam proprietatea “overflow” cu valoarea “scroll”. Astfel vor fi afisate barile de scroll care le vor permite utilizatorilor interesati sa citesca tot continutul chiar daca este intr-un spatiu restrans.

2.Cand vrem sa afisam doar partea din stanga sus a unei imagini.

Pot exista situatii in care vreti sa faceti vizibila doar partea din stanga sus a unei imagini. Poate vreti sa afisati imaginea drept un thumbnail, sau poate doriti sa afisati doar o mica parte din imagine ca sa atrageti vizitatorii sa dea click pe ea. Oricare ar fi motivul puteti plasa imaginea intru-un div cu dimensiuni predefinite si cu valoarea “hidden” a proprietatii “overflow”.

2.Atunci cand intr-o sectiune cu dimensiuni fixe este incarcat un continut dinamic.

Exista situatii in care o sectiune a unui site are dimensiuni fixe insa continutul este incarcat dinaminc si astlfel inposibil de stiut ce dimensiuni va avea. In aceasta situatie se poate folosi “overflow:auto” pentru a adauga barile de scroll in cazul in care continutul va depasi limitele div-ului in care este plasat.

De mai bine de 10 ani, elementele transparente si imaginile de tip PNG au devenit din ce in mai folosite in realizarea site-urilor web. Daca realizarea efectului de transparenta, a unui  div spre exemplu , se poate realiza usor pentru a fi redat corect in toate browserele importante , nu acelasi lucru il putem spune si despre PNG-uri.

Transparenta elementelor

Desi transparenta este tratata diferite in browserele cele mai populare, putem realiza cu ajutorul css-ului   o clasa care sa acopere toate browserele importante. De exemplu,  pentru a crea un div cu o culoare de fundal ce are o opacitate de 70%, codul va arata in felul urmator:

         .element_transparent {
	       filter:alpha(opacity=70);
	       -moz-opacity:0.7;
	       -khtml-opacity: 0.7;
	       opacity: 0.7;
}

• opacity: 0.5; Acest atribut este cel mai important (fiind si standardul actual in CSS), si functioneaza pentru majoritatea versiunilor de Firefox, Chrome,  Safari si Opera.
• filter:alpha(opacity=50); Se foloseste pentru Internet Explorer.
• -moz-opacity:0.5; Acesta este folosit pentru browserele mai vechi cum ar fi Netscape Navigator.
• -khtml-opacity: 0.5; Acesta se foloseste pentru browserele ce folosesc engine-ul de randare KTHML, cum ar fi browserul de Linux Konqueror dar si versiuni 1.x ale lui Safari ( versiunile noi de Safari folosesc engine-ul de randare Webkit)

Atentie!  Toate elemntele din interiorul unui div vor mosteni opacitatea acestuia. De exemplu, folosind clasa de mai sus pentru un div in interiorul caruia vom plasa un h1, acesta din urma va mosteni si el opacitatea de 70% a div-ului in interiorul caruia este.

               <div class="element_transparent">
	              <h2>Titlu descriptiv al paginii.</h2>
               </div>

Pentru a evita acest lucru,  “continutul” va trebui pus intr-un alt div si plasat “deasupra” div-ului caruia i s-a aplicat transparenta, cu ajutorul pozitionarii CSS. Codul html va arata astfel:

                  <h2 class="deasupra">Titlu descriptiv al paginii.</h2>           

                  <div class="element_transparent"></div>

Clasa CSS atribuita headingului “h2″ fiind:

                                 .deasupra {

                                                  position: relative;

                                                 top: 4.7em;

                                }

Transparenta imaginilor de tip .PNG

Majoritatea browserelor pot reda corect transparenta imaginilor de tip .PNG, nota discordanta o fac insa versiunile de Internet Explorer mai vechi de 7 (IE 6 este inca folosit de peste 20% de utilizatorii de internet din Romania). Pentru a corecta aceasta problema exista mai multe metode, toate , insa,  bazandu-se pe folosirea unui filtru introdus de Microsoft (Microsoft AlphaImageLoader) pentru a “forta” transparenta. Metodele difera doar prin “locul” si “momentul” in care acest filtru este apelat.

Folosirea filtrului AlphaImageLoader pentru anumite clase CSS

Internet Explorer suporta anumite atribute ce se pot atribui claselor numite “behaviors”. Aceste “behaviors” sunt specifice Internet Explorer, nefiind suportate in niciun alt browser si in plus, codul necesar pentru a le invoca nu este valid W3C. Acest behavior se poate aplica atat clasei CSS “.png” cat si clasei generale “img”. De mentionat este faptul ca,  desi acest filtru se poate aplica imaginilor folosite ca “background-image” , aceastea nu pot fi pozitionate sau repetate, adica atributele “background-position” si “background-repeat” nu au niciun efect.

O clasa CSS careia i s-a aplicat acest filtru ar putea arata astfel:

         #logo{
              position:relative;

              filter: progid: DXImageTransform. Microsoft. AlphaImageLoader 

                              (src='imagename.png', sizingMethod='crop');

         }

Mai multe despte aceasta metoda:

Komodo Media: Replacing images with background-images

Folosirea atributului “behavior” ca referinta la un fisier HTC

Aceasta metoda foloseste atributul behavior drept “pointer” catre fisierul HTC in care este aplicat filtrul de transparenta. Dezavantajele folosirii acestei metode sunt aceleasi ca si la metoda anterioara. Avantajul principal este ca pentru aplicarea ei este necesara o singura linie de cod in fisierul .css:

 img, div { behavior: url(iepngfix.htc) } 

Mai multe despte aceasta metoda:

Twin Helix: IE PNG Fix

Folosirea Javascript pentru a reda transparenta

  Javascript : img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";

Cum Javascript are abilitatea de a monitoriza si modifica proprietatile tuturor elementelor de pe o pagina, aceasta devine solutia ideala pentru gasirea imaginilor de tip .PNG si aplicarea filtrului de transparenta. Motivele care fac ca aceasta metoda sa fie cea mai buna sunt urmatoarele:

1. Se poate condtitiona folosirea scriptului doar atunci cand browserul folosit este o versiune de IE 6 sau mai veche.
2. La fel ca si metoda HTC este o metoda ce nu necesita modificari ulterioare.
3. Codul va fi validat W3C.
4. Filtrul va fi aplicat si elemtelor noi introduse pe pagina prin intermediul AJAX lucru ce nu era posibil cu metodele anterioare.

Mai multe despte aceasta metoda:

24 Ways: Superslight

Unit PNG Fix