praegune kellaaeg 21.06.2024 07:03:33
|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
autor |
sõnum ![Teata moderaatorile Teata moderaatorile](./images/icon_move_w.gif) |
|
iFlop
Kreisi kasutaja
![iFlop iFlop](https://foorum.hinnavaatlus.ee/images/avatars/upload/f85677954a9f586da415f9a6211f2041.png)
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: |
![](./images/komment/img_10_1.gif) ![](./images/komment/img_10_0.gif) ![](./images/komment/img_10_2.gif) |
:: |
0 :: |
0 :: |
65 |
|
tagasi üles |
|
![](templates/HinnaVaatlus/imagesHV/spacer.gif) |
nene
Kreisi kasutaja
![nene nene](https://foorum.hinnavaatlus.ee/images/avatars/upload/aca25d624cf863f786f67137c62aa11d.jpg)
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: |
![](./images/komment/img_10_1.gif) ![](./images/komment/img_10_0.gif) ![](./images/komment/img_10_2.gif) |
:: |
0 :: |
1 :: |
23 |
|
tagasi üles |
|
![](templates/HinnaVaatlus/imagesHV/spacer.gif) |
iFlop
Kreisi kasutaja
![iFlop iFlop](https://foorum.hinnavaatlus.ee/images/avatars/upload/f85677954a9f586da415f9a6211f2041.png)
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: |
![](./images/komment/img_10_1.gif) ![](./images/komment/img_10_0.gif) ![](./images/komment/img_10_2.gif) |
:: |
0 :: |
0 :: |
65 |
|
tagasi üles |
|
![](templates/HinnaVaatlus/imagesHV/spacer.gif) |
|
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.
|