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: 24444 24444 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:
« 12345678 9 101112 »
comenteaza printeaza

Pentru ca mutam legenda in jos din fieldset trebuie sa ne asiguram ca legenda nu se va suprapune cu nici unul din elemente, desi trebuie sa adaugam inca putin padding in partea de sus a listei ordonate:

fieldset-alternating.css (excerpt) 
fieldset ol { 
padding: 3.5em 1em 0 1em; 
list-style: none; 
}

Nu uita sa schimbi valoarea corespunzatoare din style sheet-ul special pentru Internet Explorer:

fieldset-alternating-ie.css (excerpt) 
legend span { 
margin-top: 1.25em; 
} 
fieldset ol { 
padding-top: 3.25em; 
}

Internet Explorer are o spatiere diferita pentru elementul span al legendei, deci trebuie sa modificam valoarea margin-top.

Dupa toate modificarile, avem un fieldset care este putin deplasat: fieldset-ul submit. Pentru ca acest fieldset nu are o legenda, butonul submit va aparea prea sus si deci trebuie mutat in jos putin. Cel mai usor facem acest lucru adaugand padding numai pentru acest fieldset in partea de sus. Pentru ca acest fieldset se va suprapune peste fieldsetul de deasupra lui, trebuie sa furnizam o culoare de fundal opaca pentru fieldsetul submit, altfel culoarea de fundal a fieldsetului anterior se va vedea dedesubt. Asta inseamna ca trebuie sa schimbi valoarea culorii de fundal din transparent in culoarea normala de fundal pe care o ai:

fieldset-alternating.css (excerpt) 
fieldset.submit { 
float: none; 
width: auto; 
padding-top: 1.5em; 
padding-left: 12em; 
background-color: #FFFFFF; 
}

Mai devreme am scos si marginile fieldset-ului submit, dar pentru acest layout trebuie ca fieldsetul submit sa pastreze marginea de sus care este aplicata la toate elementele fieldset.
Odata ce am implementat toate modificarile, layoutul formularului este finalizat. Formularul va arata ca in imaginea de mai jos dar mai necesita totusi cateva imbunatatiri estetice.

Crearea formularelor in CSS - img21


Pentru ca am impins toate elementele fieldset unul catre celalalt, ele tind sa se aglomereze din punct de vedere vizual. O distinctie mai clara se poate crea printr-o alternare subtila a culorii de fundal intre fieldseturi. Singura metoda cross-browser pentru realizarea acestui efect este de a adauga o noua clasa pentru fiecare al doilea fieldset. Aceasta ne permite sa folosim un selector CSS pentru a oferi respectivelor elemente fieldset o culoare de fundal diferita. In mod normal folosim clasa alt dar poti folosi ce crezi ca este logic.

<fieldset> 
... 
</fieldset> 
<fieldset class="alt"> 
... 
</fieldset> 
<fieldset> 
... 
</fieldset> 
<fieldset class="alt"> 
... 
</fieldset> 
...

Formularul final cu elemente de fieldset alternante arata ca in imaginea de mai jos:

Crearea formularelor in CSS - img22

Pagina:
« 12345678 9 101112 »
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
4665
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4585
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4505
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4405
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4285
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Action Script Verilog Python COREL DRAW RoR Ruby on Rails MySQL Sony Vegas Swift 3D Powerpoint PHP Gimp HTML Bridge Fotografie Photoshop Flash Java Outlook SWF JSON Illustrator Fireworks XHTML Javascript Lightroom Word Excel CSS AJAX XML Vista SEO StyleSheet PSD Dreamweaver
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