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: 24091 24091 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
4425
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4320
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4280
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4120
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
SWF Java Javascript Outlook Powerpoint Excel Verilog Illustrator CSS Fotografie Word PSD Python Gimp Bridge Ruby on Rails Dreamweaver HTML Fireworks Lightroom COREL DRAW Action Script AJAX Flash Sony Vegas JSON XHTML MySQL PHP RoR SEO Swift 3D StyleSheet XML Vista Photoshop
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