[Librezale] Proiektuen fitxetarako txantiloia

[Ibai Oihanguren]

lr., 2010.eko urtren 23a 15:07(e)an, Ibai Oihanguren(e)k idatzi zuen:
> or., 2010.eko urtren 22a 16:46(e)an, Julen(e)k idatzi zuen:
>> og., 2010.eko urtren 21a 17:41(e)an, Julen(e)k idatzi zuen:
>>> Aupa !!
>>>
>>> Proiektuen oinarrizko informazioa biltzeko fitxa baten txantiloia sortu
>>> dut[1]; adibide gisa Firefox proiektuaren orria[2] ikus dezakezue.
>>>
>>> Pentsatzen ari nintzen fitxa hori edukian zentratuta jartzea[3], baina
>>> eskuineko proiektuen taularekin kargatuegi geratzen dela iruditu zait.
>>> Orduan, zer iruditzen eskuineko taula Wikipedian jartzen diren 
>>> taulen[4]
>>> antzeko itxura horizontalera moldatuko bagenu eta artikuluen bukaeran
>>> jarri?
>>>
>>> Proposamen bat besterik ez da, ea zer diozuen...
>>
>> Txantiloiari buelta pare bat gehiago eman dizkiot eta maketa 
>> aberatsago bat lortu dut.
>>
>> Deskargatzeko aukerarekin:
>> http://img97.imageshack.us/img97/2332/fitxadeskargak.png
>>
>> Deskargatzeko aukerarekin eta pantaila-argazkiarekin:
>> http://img715.imageshack.us/img715/422/fitxadeskargakargazkia.png
>>
>> Ea ba zer diozuen, seguru nago asko hobetu dezakezuela :)
>>
> Oso ondo! Nik ere hori buruan eduki nuen, baina azkenean ez nuen ezer 
> egin. Padding-a eta abar pixkat aldatuko nituzke agian, baina 
> printzipioz perfekto!
> _______________________________________________

CSSari aldaketa batzuk egin dizkiot padding-ak eta ondo gelditu 
daitezen. HTMLari bi aldaketa egin beharko zitzaizkion: logoaren irudia 
eta pantaila-argazkia biltzen dituzten <p> etiketak kendu, ez delako 
beharrezkoa eta alperrikako padding-a sortzen dutelako.


CSSa:


/* Proiektuen txantiloia */

div#proiektu-kutxa {
     background-color: #E9E9E9;
     color: #000000;
     -moz-border-radius: 6px;
     border: 0;
     padding-top: 10px;
     padding-bottom: 10px;
     display: inline-block;
     width: 100%;
}

div.metaproiektua {
     width: 435px !important;
     margin-left: 235px;
}

div#proiektu-kutxa ul {
     list-style: none;
     padding: 0;
}

div#proiektu-kutxa .logoa {
     padding: 4px 15px 3px 15px;
     height: 128px;
     width: 128px;
     text-align: center;
}

div#proiektu-kutxa .blokea {
     padding-left: 15px;
     padding-right: 15px;
     border-left: 1px solid #BBB;
     width: 225px;
     height: 135px;
}

div#proiektu-kutxa .blokea h3,
div#proiektu-kutxa .blokea h4 {
     font-weight: normal;
     padding: 0;
}

div#proiektu-kutxa .blokea h3 {
     background-color: inherit;
     color: #B03600;
}

div.metaproiektua .blokea h3 {
     background-color: inherit;
     color: #B03600 !important;
}

div#proiektu-kutxa .deskarga h4 {
     margin-left: 15px;
}

div#proiektu-kutxa .deskarga ul {
     margin-top: 10px;
     margin-left: 25px;
     line-height: 1.4;
}

div#proiektu-kutxa .deskarga ul li {
     background-repeat: no-repeat;
     background-position: left center;
}

div#proiektu-kutxa .deskarga ul li a {
     margin-left: 25px;
}

div#proiektu-kutxa .deskarga ul li.linux {
     background-image: url('icon-tux.png');
}

div#proiektu-kutxa .deskarga ul li.osx {
     background-image: url('icon-osx.png');
}

div#proiektu-kutxa .deskarga ul li.win {
     background-image: url('icon-win.png');
}


div#proiektu-kutxa .argazkia {
     padding-left: 15px;
     padding-right: 15px;
     width: 175px;
     height: 135px;
}

div#proiektu-kutxa .meta {
     padding-left: 15px;
     padding-right: 15px;
     border-left: 1px solid #BBB;
     width: 245px;
     height: 135px;
}

div#proiektu-kutxa .meta h3 {
     color: #666;
     margin: 0 0 7px 0;
}

div#proiektu-kutxa .meta li {
     font-size: 0.9em;
}





Honekin batera, mozilla proiektuaren logoa, adibidez, 130px alturakoa 
da. Ikusten ditudan logoak 128 px-etara pasatu eta aldatuko ditut, eta 
pantaila argazkia ez dagoenean jartzeko ordezko irudi bat ere sortuko 
dut, bestela proiektu kutxa ez baita ondo ikusten.

Ondo izan,

Ibai.