Despre mine
www.marianbucur.com

Salut! Numele meu este Bucur Marian, sunt freelancer (web developer), iar acesta este site-ul meu personal unde puteti vizualiza portofoliul meu, afla cateva lucruri despre mine, citi fel si fel de posturi bla bla... Bine v-am gasit si sper sa mai reveniti! :)

citeste tot

Ultimele lucrari
Links
People I know
Arhiva pentru categoria "Tutorials"
24JulTutorial de stilizare a formularelor utilizand css

In categoriile: Parerea mea, Things I use, Tutorials, Web

Pentru ca mi`au adus unele acuzatii rautacioase (dar pe buna dreptate), greseli cauzate de neatentia mea, m`am hotarat sa repar aceste buguri (intalnite in IE) si sa fac acest tutorial, pe care sper sa`l gasiti util!

Cei de la Adobe scriu asa pe aceasta pagina:

Problem

IE6-7 incorectly scrolls an applied element background with background-attachment: scroll; when the user scrolls a textarea field or overflows an input field. This is incorrect behavior as the element background should only scroll with regards to the viewport.

Solution

No known solution or workaround, however this is only visible when the input element background consists of a pattern or an image.

Ei bine, nu exista nici o solutie incercand sa reparam aceasta problema legandu`ne strict de textarea sau de input, insa exista vreo cateva rezolvari pentru acest bug.
Metoda folosita de mine este una destul de simpla si nu implica folosirea de elemente in plus cum ar fi dl, ul sau orice altceva, in afara de elementele normale unui formular: label-urile.

Sa zicem ca vrem un formular in care textul este in stanga inputurilor.
Incep cu structura HTML (strict legata de inputuri, fara butoane si alte elemente):

PLAIN TEXT
HTML:
  1. <form action=“” method=“post”>
  2.     <label><input type=“text” value=“Scrie ceva lung… “/>Bad!</label>
  3.     <label class=“text”><input type=“text” value=“Scrie ceva lung… “/>Good! : )</label>
  4. </form>

Am pus input-urile inaintea textului pentru ca atunci cand atribuim float:right inputurilor acestea se vor alinia in dreapta textului.

Iar acum codul CSS:

PLAIN TEXT
CSS:
  1. /* Atribuim ce width dorim form-ului, acelasi width atribuindu-l si label-urilor, carora, de asemenea, le vom da "float:left", pentru ca fiecare sa fie pe un singur rand. */
  2.  
  3. form {
  4. width:300px;
  5. }
  6.  
  7. label {
  8. width:300px;
  9. float:left;
  10. }
  11.  
  12. /*
  13. Atribuim un background pentru inputul care va fi cel problematic in IE.
  14. De asemenea suma width-ului + padding-ului este egala cu latimea imaginii care va fi pe fundal. 180 + 20 care este totalitatea padding-ului din dreapta si din stanga = 200 (Sunt bun la mate, nu?).
  15. Acelasi lucru este valabil si pentru inaltime.
  16. Desi nu era necesar, am adaugat padding, o culoare si o marime pentru text doar pentru a infrumuseta un pic input-ul atunci cand se introduce continut.
  17. Dupa cum am scris si mai sus, atribuind "float:right" input-urilor, acestea se alineaza in dreapta textului.
  18. Deoarece adaugam o imagine de fundal, vom inlatura si border-ul care nu mai este necesar.
  19. */
  20.  
  21. input {
  22. width:180px;
  23. height:18px;
  24. padding:3px 10px;
  25. background:url(../wp-content/themes/mb/images/input3.png);
  26. border:0;
  27. float:right;
  28. color:#323232;
  29. font-size:15px;
  30. }
  31. /*
  32. Atribuind background-ul label-ului in locul input-ului evitam acest bug, pozitionand-ul in locul acestuia cu "right top".
  33. */
  34. .text {
  35. background:url(../wp-content/themes/mb/images/input3.png) no-repeat right top;
  36. }
  37. /* Facem background-ul input-ului, care va fi fara probleme, transparent, imaginea de fundal fiind atribuita label-lui in care se afla, acest input fiind total transparent, vazandu-se doar textul  */
  38. .text input {
  39. background:transparent none;
  40. }

That`s all folks!
Easy, uh? :)

Rezultatul final poate fi vizualizat aici.

PS: pentru cei care nu si`au dat seama, este vorba despre un bug de internet explorer, deci pentru a vedea despre ce este vorba intrati cu internet explorer.

14 comentarii , ultimul scris de Marian Bucur

15SepAveti intrebari? Puneti`le aici!

In categoriile: Tutorials

Daca aveti intrebari legate de XHTML, CSS, PHP sau MYSQL puneti`le aici si voi incerca sa va raspund la cat de multe pot. In primul rand iata niste site-uri de care cu siguranta veti avea nevoie:

PS: Atunci cand postati un coment scrieti codul astfel : [ php ] echo “cod” [ /php ] (fara spatii in []).

7 comentarii , ultimul scris de Marian Bucur

15SepCum sa cureti un text de tagurile nedorite

In categoriile: Tutorials

In primul rand declaram un array cu toate tagurile XHTML:
(Puteti descra fisierul de aici)

PLAIN TEXT
PHP:
  1. $tag_arr = array(
  2. //continutul array-ului
  3. );

Iar apoi vom crea functia:

PLAIN TEXT
PHP:
  1. function striptags($text,$tags){
  2. global $tag_arr;
  3. $unallowed_tags = explode(“,”,$tags);
  4. $allowed_tags = $tag_arr;
  5. foreach($unallowed_tags as $value){
  6. array_splice($allowed_tags,array_search($value,$allowed_tags),1);
  7. }
  8. return strip_tags($text,implode(“,”,$allowed_tags));
  9. }

Cum se foloseste:
(ATENTIE! Trebuie neaparat sa puneti Virgula intre tagurile nedorite “<span>,<p>”)

PLAIN TEXT
PHP:
  1. striptags(“<span>this is a span</span> <p>, this is a paragraph</p> <strong>and this is a bold text</strong>”,“<span>,<p>”);

Rezultat:

PLAIN TEXT
PHP:
  1. this is a span and , this is a paragraph <strong>and this is a bold text</strong>

Dupa cum observati functia este bazata pe cea originala (strip_tags),deci tot ce am facut este sa creez un array cu tag-urile care vor ramane.Easy,nu?
Sper ca veti gasi aceasta functie utila.Daca aveti intrebari sau sugestii,va rog comentati.

4 comentarii , ultimul scris de Marian Bucur