E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Crearea formularelor in CSS

19.04.2008
Crearea formularelor in CSS

Formularele sunt derivate din widgets (native operating system widgets) ceea ce le face mai greu de formatat.

Total vizualizari: 23966 23966 afisari   |   Comentarii  0   |   Rating   |   (11 voturi)   |   Timp necesar: 1h 30 min 1h 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 12345 6 789101112 »
comenteaza printeaza


Aplicarea formatarilor fieldset si legend
Se intampla destul de rar sa vezi un fieldset afisat cu formatarea implicita a browserului.

Crearea formularelor in CSS - img13

Elementele legend sunt unele din cele mai complicat de formatat elemente de HTML dar exista cateva metode care iti usureaza munca si cateva modalitati de diferentiere a fieldset-urilor folosind CSS.

Furnizand o culoare de fundal pentru elementele fieldset te ajuta sa diferentiezi continutul de formular de cel obisnuit si concentreaza atentia utilizatorului pe campuri.

Rezolvarea problemelor din Internet Explorer legate de legend
Internet Explorer gestioneaza elementul legend  in mod diferit fata de alte browsere. Se pare ca IE trateaza elementele legend ca si cum ar fi inauntrul fieldset-ului, in timp ce alte browsere le trateaza ca si cum ar fi inafara fieldset-ului.

Crearea unui style sheet separata pentru IE pare solutia cea mai buna.
Daca pui o culoare de fundal pe un fieldset cu legend, ca in imaginea de mai jos problema se poate vedea foarte clar:

Crearea formularelor in CSS - img14

Fieldset-ul din stanga arata cum redau majoritatea browser-elor elementele legend si fieldset. Fieldset-ul din dreapta arata cum reda IE elementele - culoarea de fundal apare extinsa peste margine, intinzandu-se ca sa se potriveasca cu inaltimea elementului legend.

Modalitatea de evitare a acestei probleme este sa oferi browserului IE un style sheet separat care contine comentarii conditionale:

<!--[if lte IE 7]> 
<style type="text/css" media="all"> 
@import "css/fieldset-styling-ie.css"; 
</style> 
<![endif]-->

Aceasta declarare include un style sheet pentru IE 7 si mai vechi.
Orice alt browser va ignora aceasta declarare.
Am putea folosi si style sheet care se poate aplica oricarei versiuni de IE - inclusiv cele ce se vor lansa in viitor - dar diferenta de afisare a legend ar putea fi corectata pana atunci.
In interiorul syle sheet-ului folosim pozitionarea relativa la legend,mutand in sus pentru alinierea la marginea de sus a fieldsetului.

legend { 
position: relative; 
left: -7px; 
top: -0.75em; 
} 
fieldset ol { 
padding-top: 0.25em; 
}

In acest caz valoarea setata pentru partea de sus a legend este exact valoarea potrivita pentru ca legend sa se alinieze cu fieldset. Ea poate sa varieze in functie de alte formatari aplicate la legend (cum sunt margin si padding). Am folosit unitati relative, astfel incat daca utilizatorul schimba marimea textului din browser, pozitia legend sa se modifice corespunzator si sa se alinieze in continuare.

Pe langa mutarea partii de sus a legend, mai mutam cu 7px la stanga aplicand o valoare left de 7px. IE intotdeauna muta legendele la dreapta cu -7 px (indiferent de marimea textului) deci trebuie sa negam/anulam mutarea pentru ca elementele din legend si label sa se alinieze frumos.
Pentru ca mutam in sus legenda, se va crea mai mult spatiu sub legend. Pentru a anula acest efect, reducem padding din partea de sus a listei ordonate cu o valoare echivalenta., schimband-o de la valoarea 1em la 0,25em.

Ultima ajustare pentru IE este sa pozitionam relativ fieldset-ul insusi:

fieldset { 
position: relative; 
}


Fara aceasta regula, IE genereaza niste efecte vizuale ciudate in jurul elemenului legend.

Crearea formularelor in CSS - img15

Trebuie neaparat sa evitam aberatiile ce pot aparea in IE.

Deocamdata setam pozitia (position) fieldset-ului pe relative pentru a aduce totul la normal.

Pagina:
« 12345 6 789101112 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(11 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4185
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4005
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Flash MySQL XHTML Sony Vegas Gimp Fotografie XML COREL DRAW Swift 3D JSON Dreamweaver Photoshop PHP Fireworks AJAX Excel Action Script Verilog Python Lightroom CSS Powerpoint Outlook Ruby on Rails Bridge Java SEO RoR SWF PSD Illustrator Javascript Word HTML Vista StyleSheet
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software