[ garrak @ 05.09.2007. 10:39 ] @
Pozdrav svima!

Dobio sam zadatke na natjecaju za posao.

Prvi sam rijesio ali drugi ne znam. Navescu ovdje oba, drugi je vezan za prvi.

Napominjem da mi treba samo rjesenje drugog zadatka.


1) CSS: napraviti tablicu izgledom što sličniju onoj u MS Excelu koja zauzima sav mogući prostor korisničkog browsera. Svaka ćelija se mora moći editirati. Čelija mijenja boju dok je miš preko nje ili dok je kursor tipkovnice aktivan na njoj. Ne koristiti TABLE već DIV tagove. Pokušajte ne koristiti JavaScript.

2) Zadatak broj 1 s iznimkom takvom da je širina ćelije 70px, visina 22px, a broj ćelija horizontalno i vertikalno se mijenja ovisno o raspoloživim dimenzijama browsera. Nema scrollanja. Širina ćelije se može promijeniti +- 15% i to samo zato da ne bude nedovršenih ćelija na kraju ekrana (primjer: slobodna rezolucija je 1000px. Da ne ostane nedovršena ćelija na desnoj strani, sve ćelije se mijenjaju do 71px). Može se koristiti JavaScript po potrebi.


Hvala na paznji i trudu
[ noviKorisnik @ 05.09.2007. 11:04 ] @
Bilo bi lepo da ostaviš svoje rešenje prvog dela, obzirom da su zadaci povezani.
[ garrak @ 05.09.2007. 15:39 ] @
Prvi zadatak, npr. samo 2x2 celije.


<style>
.field, .field input {
background: #eaeaea;
}

.field input {
border: 1px solid #000;
}

.field {
float: left;
}

.field input:hover, .field input:focus {
background: #aeaeae;
}

.clear {
clear: both;
}


</style>

<div>
<div class="field"><input type="text"></div>
<div class="field"><input type="text"></div>
<br class="clear" />
<div class="field"><input type="text"></div>
<div class="field"><input type="text"></div>
<br class="clear" />
</div>
[ noviKorisnik @ 06.09.2007. 09:55 ] @
Hm, a pseudo-klasa :hover radi samo na linkovima u IE6, takođe i ova :focus nije od neke koristi. "Pokušajte ne koristiti JavaScript" :-)

A ovo drugo - trebaš širinu i visinu raspoložive površine prozora browsera ... opet pomalo zeznuta stvar jer to baš nije standardizovano kako se meri, no recimo da document.body.clientWidth i document.body.clientHeight daju zadovoljavajuće rezultate.

Potom sledi matematika da vidiš koliko elemenata možeš da smestiš horizontalno a koliko vertikalno, koliku varijaciju veličine ćeš da primeniš na pojedine da se sve to valjano uglavi ... ne zaboravi da postaviš marginu i padding body elementa na nulu ;-)

Takođe, preporuka je da isključiš border s tih inputa, kao i padding, zbog različitog računa širine i visine elemenata kod IE i u standardima.