praegune kellaaeg 21.06.2024 00:59:39 |
|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
| autor |
sõnum   |
|
iFlop
Kreisi kasutaja
liitunud: 03.05.2003
|
27.03.2010 19:45:54
CSS abi - elementide tausta kujundamine |
|
|
Kõigepealt alustasin paari tab'i kujundamist CSS'is, kus taustaks tahtsin ka pilte kasutada. Kuna tab'i teksti pikkused on erinevad, peaks ka taust vastavalt ise paigas olema. "Sliding Doors" tehnikat proovides ei saanud esialgu ikkagi päris seda tulemust mida ootasin ning lisaks puudus ka mugav võimalust ühtainsalt pildifaili kasutada. Kuna lehel tahaks kasutada ka ümaraid nurki (rounded corners), siis mõtlesin, et probleemi võiks läheneda hoopis laiemalt.
Ideaalis võiks olla:
Semantiline HTML ilma mõttetute lisatag'idega CSS kujundamise jaoks.
Tillukesed pildid/ikoonid võiks ühes failis olla, et HTTP päringuid vähem oleks.
Juhul kui elemendi suurus muutub, peab ka kujundus paika jääma.
Tausta pildifaili mõõtmed võiksid võimalikult väiksed olla.
Olen vaadanud mitmeid lehti nt see jt, aga ühtegi liiga head lahendust ei leidnudki.
Järgmisena mõtlesin, et prooviks midagi hästi lihtsalt ja koledat. Igal "kastil" on 4 nurka ja neli külge. Iga nurga ja külje võiks saada vastavalt pildiga kujundada. Tegu võiks olla piisvalt universaalse, lollikindla ja lihtsa lahendusega, aga tundub, et eksisin. Tõenäoliselt CSSga lihtsalt vähe kogemust, sest parema ja vasaku külje pikkust ei saanud sobivalt paika. Testlehe asub siin.
Lisaks annaks vist antud tulemust ka CSS3 abil saavutada, aga piltidega on ikkagi võimalik palju rohkemat teha.
Abi võiks olla ka :before ja :after pseudo-elementidest, aga IE seda ei toeta.
Kokku tuli vist natuke pikk ja segane jutt, aga esialgu tahaks selle koleda html'ga testlehe toimima saada. Pärast siis vaatan, kas sellest üldse kasu on 
Loomulikut on oodatud ka kõiksugused soovitused, kuidas tänapäeva "modernsete" veebitehnoloogiatega tuleks elementi ümritsevat ala kujundada, et lisaks ümardatud nurkadele saaks kujundus veelgi paindlikum olla.
EDIT: Kas CSS gurusi siis foorumis polegi? Selle testlehe parandamine võiks ju lihtne olla?
Või tuleks rohkem kaaluda CSS3 võimalusi?
|
|
| Kommentaarid: 66 loe/lisa |
Kasutajad arvavad: |
   |
:: |
0 :: |
0 :: |
65 |
|
| tagasi üles |
|
 |
nene
Kreisi kasutaja
liitunud: 20.03.2004
|
|
28.03.2010 22:15:40
Re: CSS abi - elementide tausta kujundamine |
|
|
| tsitaat: |
| Semantiline HTML ilma mõttetute lisatag'idega CSS kujundamise jaoks. |
Selleta ilma CSS3 või JavaScripti kasutamata kahjuks ei saa. Või noh saab, kui loobuda paindlikusest. Sul on tarvis vähemalt nelja HTML tag-i et paigutada ära neli serva- ja taustapilti.
| tsitaat: |
Tillukesed pildid/ikoonid võiks ühes failis olla, et HTTP päringuid vähem oleks.
Tausta pildifaili mõõtmed võiksid võimalikult väiksed olla. |
Nende kahe vahel on tradeoff: mida väiksemat failimahtu soovid, seda rohkem faile pead tegema, kui aga soovid võimalikult vähe faile, pead leppima suurematega. See tuleneb CSS-i piiratud võimalustest vaid osa pildifaili näitamisel. CSS3 muidugi parandab olukorda.
| tsitaat: |
| Juhul kui elemendi suurus muutub, peab ka kujundus paika jääma. |
Sellele nõudele vastavad mu meelest enamik su toodud näidetest.
Ma näen, et oma katsetusega oled sa sihtinud võimalikult väikest failide arvu ja mahtu (kaks tillukest faili). Aga oled sattunud kitsikusse, sest floaditud elemente ei saa niisama naljalt määrata sama kõrgeks kui nende konteiner. Vähemasti mina sellele lahendust ei tea.
| tsitaat: |
| Olen vaadanud mitmeid lehti nt see jt, aga ühtegi liiga head lahendust ei leidnudki. |
Liiga head need lahendused kindlasti pole, aga mis teha, need on praegu parimad, mis enamikus brauserites töötavad. Liiga paljud on tänaseks selle asjaga jõudu katsunud, nii et sinu lootused millegi oluliselt paremaga välja tulla on üsna napid.
| tsitaat: |
Lisaks annaks vist antud tulemust ka CSS3 abil saavutada, aga piltidega on ikkagi võimalik palju rohkemat teha.
Abi võiks olla ka :before ja :after pseudo-elementidest, aga IE seda ei toeta. |
CSS3 võimaldab lisaks border-radius'ele veel ka border-image ning mitmeid taustapilte. See peaks kõrvaldama igasuguse lisa-markupi vajaduse.
_________________
Mõistus otsas? Pane pinusse... |
|
| Kommentaarid: 24 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
23 |
|
| tagasi üles |
|
|
iFlop
Kreisi kasutaja
liitunud: 03.05.2003
|
|
29.03.2010 17:05:18
|
|
|
nene, tänud põhjaliku vastuse eest!
Vahepeal sain isegi oma test-lahenduse tööle:
http://mootools.net/shell/SzSwS/
Hetkel siis JSga lisan elementidele hunniku div'e, et CSSga saaks igat külge ja kurka kujundada.
Töötab FF, Safari, Opera ja põhimõtteliselt ka IE6 peal. (IE6 puhul vaja CSSi veel tiba mudida ja puudu ka png fix)
| nene kirjutas: |
| Nende kahe vahel on tradeoff: mida väiksemat failimahtu soovid, seda rohkem faile pead tegema, kui aga soovid võimalikult vähe faile, pead leppima suurematega. See tuleneb CSS-i piiratud võimalustest vaid osa pildifaili näitamisel. CSS3 muidugi parandab olukorda. |
Jõudsin isegi samale järeldusele, et kuskilt otsast vaja järeleandmisi teha..
| nene kirjutas: |
| Ma näen, et oma katsetusega oled sa sihtinud võimalikult väikest failide arvu ja mahtu (kaks tillukest faili). Aga oled sattunud kitsikusse, sest floaditud elemente ei saa niisama naljalt määrata sama kõrgeks kui nende konteiner. Vähemasti mina sellele lahendust ei tea. |
Sellele leidsin isegi rohtu, kui paddingu ja marginiga mängida:
http://www.ejeliot.com/blog/61
| nene kirjutas: |
| Liiga head need lahendused kindlasti pole, aga mis teha, need on praegu parimad, mis enamikus brauserites töötavad. Liiga paljud on tänaseks selle asjaga jõudu katsunud, nii et sinu lootused millegi oluliselt paremaga välja tulla on üsna napid. |
Pean siingi nõustuma, et ega minugi lahendus "liiga hea" pole
| nene kirjutas: |
| CSS3 võimaldab lisaks border-radius'ele veel ka border-image ning mitmeid taustapilte. See peaks kõrvaldama igasuguse lisa-markupi vajaduse. |
Mnjah, tegelikut mitmed CSS3 lahendused on juba FF ja Safari peal täiesti toimivad. Tundub, et ehk peaks isegi sinna poole vaatama, sest kui IE6 oskab ainult kandilist border'it, siis mis mul sellest. Sest õnneks pole IE6 ja FF3 pixel-perfect lahendust vajagi. Ja üldsegi, hetkel on peas erinevad ideed, mida rakendada võiks. Võib-olla oleks peaks kuskilt otsast lihtsalt peale hakkama, sest ühe veebilehe tegemist olen planeerinud juba päris mitu aastat, aga väga kaugele jõudnud polegi.. 
|
|
| Kommentaarid: 66 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
65 |
|
| tagasi üles |
|
|
|
| lisa lemmikuks |
|
 |
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis
|
|
Hinnavaatlus ei vastuta foorumis tehtud postituste eest.
|
:: KKK
:: otsing 
:: statistika
:: kasutajate nimekiri
:: kasutajate grupid
:: registreeri
