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 July 24th, 2008
24JulCateva reparatii si schimbari

In categoriile: Web

In aceasta noapte am decis sa fac cateva mici schimbari de design (partea din dreapta-sus si contact) si sa repar bugurile (sper ca astea sa fie toate) mentionate de Ion intr-un comentariu dintr-un post anterior, pe langa alte cateva schimari.

Cu ocazia aceasta am scris si un tutorial despre stilizarea formularelor utilizand css.

Enjoy si numai bine! :D

Nici un comentariu

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