Dark Wood

Formularele de contact au devenit o prezenta constanta in cadrul paginilor web, ele facilitand comunicarea intre dintre user si administratorul site-ului. Daca despre trimiterea de date ,cu ajutorul unui formular, am mai scris, despre customizarea grafica a acestora voi pomeni in articolul de fata. Mai exact, va voi prezenta o metoda simpla de a personaliza campurile de tip text, acestea fiind si cele mai des intalnite.

Customizarea se poate face prin doua abordari: direct pe input, sau aplicand CSS pe input si pe div-ul care contine campul respectiv. In randurile de mai jos voi descrie a doua abordare, ea putand fi usor adaptata la alte situatii.

Codul html ar trebui sa arate in felul urmator:

<div class=”searchForm”>

<input type=”text” name=”input”  />

</div>

Daca lasam “nestilizat” acest cod, input-ul se va afisa diferit in browsere – inaltimi diferite, border diferit, etc. (cu cele mai mari probleme in IE, bineinteles). Ca sa obtinem un rezultat asemanator in toate browserele, si pentru a realiza un formular cu design frumos, vom apela la putin CSS:

Mai intai vom formata div-ul container, adaugand-ui background-ul custom:

.searchForm{background: url(../images/input.jpg) no-repeat center;  float: left; width:340px; height: 24px; }

Apoi vom reseta campul de input text, anuland-ui border-ul si background-ul pe care le lua default:

.searchForm input{border:0 none; border-collapse:collapse; background: none;}

Putem adauga padding, font-size si line-height pentru un rezultat mai bun. Asemanator se pot personaliza si field-urile de tip textarea sau butoanele de send si reset. Mai greu de customizat sunt drop-down-urile si campurile de tip browse file, dar nimic nu este imposibil, cu putin CSS si JavaScript.

Spor la treaba si la web design!

Sunt multe ocaziile in care avem nevoie de div-uri cu o inaltime sub 10 pixeli (pentru a face niste separatoare, de exemplu).

Sa zicem ca avem un div cu clasa “numediv” :

<div class=”numediv”></div>

Acestei clase ii asociem o propietate css:

.numediv{width: 100px; height: 1px; background: #cccccc;}

Daca testam pagina cu Mozilla, Chrome, sau IE7 & IE8, se va afisa o linie gri de un pixel inaltime si 100 latime.
In IE6 insa, se va afisa un div cu inaltimea de 10 px. Cauza acestui bug este preformatarea textului de catre browser.
Astfel, default, IE6 va pune un font size de 10px.
Pentru a putea formata corect div-ul, trebuie sa resetam css-ul. Acest lucru se poate realiza cu ajutorul unui reset.css (aceasta metoda aplicandu-se la tot site-ul), sau se poate aplica punctual, doar la clasele care necesita acest lucru.
Clasa din exemplul nostru va arata in felul urmator:

.numediv{width: 100px; height: 1px; background: #cccccc; font-size: 1px;}

Daca problema persista, putem adauga la css si un “line-height: 1px;”

Spor la treaba si la web design!