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: 24682 24682 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:
« 123456 7 89101112 »
comenteaza printeaza


Formatarea legend si fieldset
In toate browserele legend are spatiere (padding) implicita. Cantitatea de padding variaza de la browser la browser, deci pentru a avea acest element aliniat cu etichetele eliminam spatierea din style sheet (pagina de formatare) principala.

fieldset-background-color.css 
legend { 
margin-left: 1em; 
padding: 0; 
color: #000; 
font-weight: bold; 
}

Marginea (border) implicita pentru elementele fieldset este de obicei o margine inserata - care nu se potriveste la unele site-uri. Aici o vom face plata, de 1 px. In plus, vom adauga o culoare de fundal care va face elementele fieldset sa iasa in evidenta:

fieldset-background-color.css
  fieldset { 
  float: left; 
  clear: both;
  width: 100%;
  margin: 0 0 1.5em 0;
  padding: 0; 
  border: 1px solid #BFBAB0; 
  background-color: #F2EFE9;
  }

In general nu dorim margini sau culoare de fundal in spatele fieldset-ului submit, deci sunt usor de anulat.

fieldset-background-color.css
  fieldset.submit {
  float: none; 
  width: auto; 
  border-style: none;
  padding-left: 12em; 
  background-color: transparent; 
  }

Acum avem elemente fieldset cu o culoare de fundal ca in imaginea de mai jos.

Crearea formularelor in CSS - img16

Atunci cand eticheta elementului legend se suprapune numai peste o parte a chenarului, intreruperea de culoare poate parea brusca.

Crearea formularelor in CSS - img17

Aceasta intrerupere devine mai vizibila daca folosim o culoare de fundal pentru fieldset care are un contrast mai mare cu pagina normala. Pentru contracararea acestui efect poti sa pui o imagine de fundal cu gradient in fieldset care schimba din culoarea de pe fundal (alb) in culoarea aleasa la fieldset.

fieldset-background-image.css 
fieldset { 
float: left; 
clear: both; 
width: 100%; 
margin: 0 0 1.5em 0; 
padding: 0; 
border: 1px solid #BFBAB0; 
background-color: #F2EFE9; 
background-image: url(images/fieldset_gradient.jpg); 
background-repeat: repeat-x; 
}

Regula imaginii de fundal se va aplica si la fieldsetul submit, deci pentu a pastra un fundal curat si transparent trebuie anulata imaginea de fundal din fieldsetul submit.

fieldset-background-image.css (excerpt) 
fieldset.submit { 
float: none; 
width: auto; 
border-style: none; 
padding-left: 12em; 
background-color: transparent; 
background-image: none; 
}

Crearea formularelor in CSS - img18

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