|
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.
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:
|
15195 afisari |
1h 30 min
|
Incepator
