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

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

Staicu Ionut pe July 24th, 2008 2:54 pm

1) te complici...
2) label este pentru altceva. Dacă ai şi ceva text de afişat, ce faci?
3) span ar fi mai potrivit ;)
4) da, critică, bla bla...

Marian Bucur pe July 24th, 2008 7:01 pm

1) Ce`i asa de complicat?
2) I-auzi... label este pentru altceva... Dar ul nu`i pentru altceva, sau dl...? Daca tot zici ca label e pentru altceva... Si daca ai text pui intr`un label si gata.
3) Merge asa si fara span? Merge! Nu?
4) Intr`adevar bla bla bla...

Staicu Ionut pe July 24th, 2008 8:01 pm

I-auzi... label este pentru altceva... Dar ul nu`i pentru altceva, sau dl...? Daca tot zici ca label e pentru altceva... Si daca ai text pui intr`un label si gata.

Dude, când o să treci peste mentalitate d-asta stupidă, vei înţelege. Poţi face un site COMPLET cu span-uri? Poţi! Dar... e semantic?

UL/DL este pentru liste. Un form (sau un meniu, dacă vrei), dacă te uiţi puţin mai atent seamănă cu.... o listă!

Marian Bucur pe July 24th, 2008 8:10 pm

Oh... wow! UL-urile si DL-urile sunt pentru liste! Sa mor daca stiam! Multumesc ca m`ai luminat!
Acum explica`mi pentru ce sunt label-urile daca tu`mi spui ca sunt pentru altceva.
Eu din cate stiu, nu prea au ce cauta in afara unui formular. Asa ca, daca intr`un formular nu`si au locul, atunci unde?

Staicu Ionut pe July 24th, 2008 8:14 pm

într-un formular, nu am zis că în afara lui. Modul în care le foloseşti e greşit... :)

Marian Bucur pe July 24th, 2008 8:24 pm

Nu este gresit deloc.
Daca imi aduc bine aminte din dec 2006 cand am vazut tutorialul de css de la lynda.com, si ei foloseau aceeasi tehnica la crearea unui formular (nu la customizarea inputurilor).

Staicu Ionut pe July 24th, 2008 8:51 pm

http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Uite-te la ce se foloseşte
Hai să trăieşti!

Marian Bucur pe July 24th, 2008 9:00 pm

Da vad, l`am folosit corect.
Nu inteleg ce ti se pare incorect in tutorialul meu.
Cred ca ai pitici pe creier - cauti problema acolo unde nu este.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

In this example, we implicitly associate two labels with two text input controls:

PLAIN TEXT
HTML:
  1. <form action="..." method="post">
  4.    First Name
  5.    <input type="text" name="firstname"/>
  6. </label>
  8.    <input type="text" name="lastname"/>
  9.    Last Name
  10. </label>
  11. </p>

Bughy pe August 4th, 2008 1:00 pm

Hm, nu ma dau expert, da' cred ca l-ai folosit gresit... Banuiesc ca doar arata codul ciudat, da' face acelasi kkt.. Deci, long story short.. Merge, ce pm :D

Hai norok! :D

Marian Bucur pe August 4th, 2008 7:27 pm

De ce l`am folosit gresit ma? Explicati`mi si mie de ce? Poate si eu si aia de la w3c.org suntem niste nebuni :|

Hai noroc si tie Bughy :)

Bughy pe August 13th, 2008 11:16 am

Probabil pentru ca se foloseste des ceva de genu: User:
da' vad ca acolo zice ca e corect si asa..
deci, cum ziceam si mai sus, daca merge, who cares?

Bughy pe August 13th, 2008 11:17 am

ah .. user:

Bughy pe August 13th, 2008 11:19 am

dude, la tine nu merge cu < code > ?
scriu inca o data, ca daca citeste cineva zice ca am ceva la cap: <label> user: </label> <input type="" ... />

Sper ca am scris bine :D

Marian Bucur pe August 13th, 2008 12:06 pm

Eu am altfel:P [ php ] sau ce limbaj vrei sa folosesti... Nu uita sa inchizi cu [ /php ]

Lasa un comentariu