Paveiksliukų ir teksto lygiavimas CSS pagalba
Ne kartą esu sakęs ir pasikartosiu darkart: CSS yra GĖRIS! Deja atrodo, kad ne visi tą gėrį pažįsta bei išnaudoja. Vienas mano dažniausiai pastebimų dalykų yra paveiksliukų lygiavimas tekste.
Vietoj to, kad tekstas „apsivyniotų“ aplink paveiksliuką kaip matome pirmame pavyzdyje, dažnai jis yra tiesiog rašomas virš, po, arba tiesiog iš šonų, kaip matome antrame 
pavyzdyje.
Žinoma, visa tai yra skonio reikalas, bet man asmeniškai pirmas variantas kur kas priimtinesnis, todėl papasakosiu kaip tai padaryti.
O daroma tai itin paprastai. Prie standartinio paveiksliuko kodo, kuris atrodo maždaug taip:
<img src=”paveiksliukas.jpg” alt=”Paveiksliukas” />
Tereikia pridėti truputį CSS kodo:
<img src=”paveiksliukas.jpg” alt=”Paveiksliukas” style=”float:left;margin-right:5px;” />
Panaudojus ši kodą, paveiksliukas bus sulygiuotas į kairę, dešinėje pusėje paliekant 5px tarpą iki teksto. Norint jį sulygiuoti į dešinę, kaip pirmame pavyzdyje, kodas atrodytų taip:
<img src=”paveiksliukas.jpg” alt=”Paveiksliukas” style=”float:right;margin-left:5px;” />
Taip pat svarbu žinoti, kad paveiksliuką, aplink kurį bus „vyniojamas“ tekstas, reiktų dėti paragrafo pradžioje, o ne gale.
Na, o paskutinis dalykas, kurį reiktų žinoti, yra tai, kad paveiksliuką įdėjus įrašo pabaigoje bei pritrūkus „vyniojamo“ teksto, į viršų „sulips“ viskas, kas eina po įrašu (komentarai ir pan).
Tai išsprendžiama gan paprastai, tiesiog įrašo gale įterpkite šiek tiek „paturbintą“ break žymelę:
<br style=”clear:both;” />
Šis sprendimas turėtų veikti beveik visuose tinklaraščiuose ar svetainėse. Problemų gali kilti tik jei naudojate kokį mandrą šabloną, kuriame jau aprašytas paveiksliukų santykis su tekstu.
Sveiki užsukę į mano tinklaraštį!
Visiškai pritariu, kad CSS yra gėris. Tiek su HTML nepadarysi, kiek su CSS – ir dar kodas kelis kart sutrumpėja.
Priminei, kad pamiršau paminėt jog dar galima ir į failą tas taisykles apsirašyt, o paskui tik klases naudot. Nors pradžiai gal užteks. Kada nors papasakosiu plačiau. Arba tu galėsi papasakot ;)
Na, o kodėl nepanaudojus šioje vietoje [img src="" align="left/right"] ir [br clear="left/right/all"] tam pačiam tikslui pasiekti?
CSS čia ir ilgesnis ir bjauresnis atrodo…
Taisa: tavo komentaruose yra filtruojami tagai. Negražu, man teko rinkti naujai. Vietoj filtravimo, taisyklinga būtų tiesiog ekranuoti, t.y. rodyti kaip įvesta.
Wordpress kuriant šablonus jau yra nustatytos klasės, tik reikia jas tinkamai CSS faile aprašyti. Ir tada dedant paveiksliuką į tekstą pažymėjus jo meniu centrauoas, dešinė, kairė ir pan. pagal atitinkamą klasę pasidarys.
Denis, o kaip su HTML padarysi tarpus? dėsi? O komentaruose galima < ir > naudoti, juk negaliu atspėt kiekvieno skaitytojo norų: kas nori kodą parašyt, o kas gražiai komentarą apipavidalint.
Ričardai, ne visose temose (šablonuose) tos klasės aprašytos būna.
O man kažkaip atrodė, kad pačioje TVS taip jau nustatyta, bent jau sukurtos. Matyt, kažką sumaišiau. :)
Hmm…man kažkaip ant wordpress automatiškai taip gaunasi(1)…gal čia taip naudojant funkcija (centras, kairė, dešinė)
Denis, img atributas ALIGN yra nebenaudojamas ir nebepalaikomas nuo HTML 4.01, o juo labiau XHTML.
Karoli, float yra gerai, ypač paveikslėliams, tačiau neretai float’u yra pradedama piktnaudžiauti, ko pasekoje galima gauti ne itin malonių ir tikėtinų rezultatų.
Beje, pirmame paveikslėlyje panaudotas float: right, o ne float: left.
Taip pat derėtų prisiminti, jog dėliojant kelis elementus vienas po kito su float: right, jie bus rodomi atvirkštine tvarka, nei užrašyta :)
Mantvydai, aš niekad WYSIWWYG WordPress’e nesinaudojau, tad ir tos funkcijos nebandžiau, bet jei taip paprasčiau tai dar geriau. Tiesa, atrodo, kad žmonės net ir to nenaudoja.
Pauliau, aš float’ais ir nesiūlau piktnaudžiaut — vieną kitą paveiksliuką įraše pozicionuot tai ne piktnaudžiavimas. O apie pašalinius efektus žinau, tam ir šiokį-tokį išsisukimą su break žymele įdėjau.
Tai yra ilgesnė tema – tau reikėtų arba išmokti naudotis visu HTML ir CSS arba nedaryti iš „style=float:left“ stebuklo. CSS yra gėris ne todėl. O dabar tu sužinojai kažkokią smulkmeną, kuri realiuose CSS panaudojimose nenaudojama ir džiaugiesi „CSS yra gėris“. Taip pat galiu pasakyti, kad „HTML yra gėris, nes galiu parašyti <img align=left>“.
O kaip tu filtruoji tagus? Tai taip ir daryk – leisk a, blockquote, em, strong, palik galimybę parašyti <, bei likusius tagus neiškirpinėk, o ekranuok.
Pauliau, tu net kažką girdėjai, šaunu! :)
O dabar paaiškink man, paprastam neišmanėliui – kuo čia dėtas XHTML?
Ir dar – kas tau pasakė, kad šis puslapis yra HTML 4.01?
O tokiu atveju – kuo „style=”float:left”“ yra geriau už „align=left“? Tuo, kad ilgiau?
Apibendrinsiu – šis puslapis nieko bendro su XHTML neturi. Jis nėra ir niekada nebuvo XHTML. Jis net nėra HTML 4.01. O didžiausia paslaptis? Tai nesvarbu!
Nereikia klausytis tuščių „a, align yra blogis“, kai pats nesupranti ką daro Doctype ir Content-Type, kaip yra parsinamas kodas naršyklėse ir kuo skiriasi HTML 4.01 nuo 3.2.
Nereikia šokti į traukinį „girdėjau, kad CSS yra kietai“, kai neišmanai, kaip CSS taikomas.
Tobulėti ir judėti pirmyn – labai gerai. Taip ir toliau. Bet nediskutuokite šitomis temomis, tiesiog pasiklauskite kolegų, kurie tai išmano. Nes viskas jau seniai sugalvota. Iki jūsų. Ir iki manęs.
Beje, Karoli, aš bijočiau taip filtruoti HTML. Vieną dieną kažkas visgi įmes XSS pro filtrus…
Gyvybingas pavyzdys.
Ar žinote, kad tai:
yra visiškai tvarkingas HTML 4.01? Netikite? Eikite patikrinti. Patys. Su tikru validatoriumi.
Šiaip jau turiu pritarti paskutinei Denis žinutei. Ypač dėl BR su clear: both :) Nu gražus hack’as, bet jeigu jau taip nemėgstam “align” (ne todėl, kad blogai, o todėl, kad prezentaciją/išvaizdą turi valdyti CSS, o HTML turi tik sužymėti semantinę prasmę), tai ta pati taisyklė turi galioti ir BR tag’ui – t.y. jo turi nebūti post’o gale (o pvz visi post’ai naudoja clear: both, arba jeigu gudrus darbininkas – clearfix CSS hacką).
Pauliau, XHTML transitional (kurį Karolis nurodęs kaip doctype) labai puikiai supranta IMG su ALIGN.
Žemas įėjimo slenkstis…
I found your entry interesting do I’ve added a Trackback to it on my weblog :)…
Nežinau, kaip veikia Trackback, man jo nusiųsti nepavyko, tad siunčiu rankiniu būdu.
Parašiau nedidelį įrašą apie HTML žemą įėjimo slenkstį. Nieko žeidžiančio, bet susiję su tema.
Tai kad tai nėra joks XHTML. Tai net ne HTML. Tai šioks toks SGML, kuris parsinamas kaip tag soup ir niekas kita. ,)
Denis, aš nelabai suprantu ką tu turi galvoje sakydamas „filtruoti“ ir „ekranuoti“. O dėl šio įrašo, tai aš nepateikinėju jo kaip kažkokios absoliučios tiesos. Dalinuosi skaitytojais tuo, ką moku pats. Galbūt tai neteisinga, tad labai dėkoju už pataisymus, tikiuos skaitytojai nepatingės perskaityti ir komentarų bei teisingai pasirinkti ką daryti toliau.
Na, man kažkodėl šovė į galvą, kad tu pats tvarkai komentarų apdorojimo kodą. Nekreipk dėmesio.
O dėl įrašo – aš nekritikuoju tavęs, nepyk. Tu fainas. :)
Tiesiog nesidrovėk šiuo atveju naudoti align=left vietoj style=”float:left”. Juk paprasčiau ir gražiau.
O tarpas – teisingai, margin lengviau nustatyti style pagalba, nei ais. ,)
Totaliai nepagaunu Denio minties dėl align. Juk su align paveikslėlis neužima iškart kelių eilučių ir neapgaubia teksto, o tik guli vienoje savo eilutėje. Estetiškai float gražiau.
Denis, aš ne iš tų žmonių, kurie pyksta taisomi. Juolab, kad tavo tiesa :) Aš va ir pats įsikalęs į galvą, kad stiliui aprašyti reikia naudoti CSS išskirtinai, nors tuo pat metu ignoruoju vieną esminių CSS privalumų ir rašau jį tiesiai į HTML. Tai iš esmės align=left išties yra paprasčiau parašyt, nors tvarkingumo dėlei aš vistiek linkęs naudot arba vieną arba kitą.
Jonai, tiesą sakant aš align turbūt nesu naudojęs tai net nežinau koks rezultatas gaunas. Jei tavo tiesa, reiškia mano tiesa, t.y. Denis netiesa :)
O tu pabandyk.
Denis, tavo trackback buvo į spam nuėjęs. Išgriebiau aš jį iš ten :)
Įdomus straipsniukas. Pravers..
Aš Tavo dienos įrašus Karoli, gaunu emailu.. Pamačiau kai ką, ką Tavo email update servisas prie laiško prideda.. :) Žinai, kas mane labai “žudo” (juokina)?… Ogi šitas:
You are subscribed to email updates from Karolis Pocius
To stop receiving these emails, you may unsubscribe now.
If you prefer to unsubscribe via postal mail, write to: Karolis Pocius, c/o FeedBurner, 20 W Kinzie, 9th Floor, Chicago IL USA 60610
:D
Koks keistuolis, gali unsubscribe’inti via postal mail? Pl…. bet dar sugalvok taip… :D
@Darius: ne Karolis gi sugalvojo paštu duoti galimybę prenumeratos atsisakyt, o Feedburner tarnyba, tad nors ir keistai atrodo, bet matyt jie turėjo tam pagrindo. Galbūt dėl tokių el. pašto vartotojų, kurie naudoja tarnybas, kurios atspausdina el. paštu gautus laiškus ir siunčia juos tikru paštu ar faksu vartotojui. Tad jis realiai neturi galimybės nei nuorodų paspaust, nei emailo atrašyt…
Dėl CSS, tai CSS nėra joks gėris, o tiesiog patogus būdas atskirti semantiką nuo išvaizdos. Su float’as prisižaisti realiai neįmanoma gerai suprantant, kaip jie veikia. Nenaudojant align kito būdo paveiksliuką lygiuoti į vieną ar kitą pusę juk ir nėra, t.y. float’as būtent tam ir skirtas.
Dėl teksto atitraukimo nuo paveiksliuko dar galima naudoti ne tik nbsp;, o ir vspace bei hspace atributus.
@Denis:
Todėl, kad jis Transitional. HTML 4.01 Strict nebūtu validus.
Deni, pas Karolį aprašyta xhml schema (
. Todėl būtent jo pavyzdys tinkamas (būtent čia).
O tavo pvz veikia, bet tie kalbos elementai yra pasenia. Tokių dalykų naudojimas iš esmės trukdo geresniems produktams išlįsti į šviesą :P
Tomai, vspace ir hspace iš abiejų pusių atitraukia, tad to paties rezultato nepasieksi.
lfx, matos, kad nebuvai Denio pranešime BarCamp’e — aš jau žinau ką jis tau pasakys dėl tų „trukdo geriems produktams“, bet gal aš jam pačiam leisiu pasireikšti :)
O tu Dieve mano, tiesa! Kaip aš to nesupratau?
O dar jis validus todėl, kad jame yra title tagas. Ir kas iš to? Mano komentaro prasmė buvo – align atributas nėra blogas, jis net validus. Stricte – ne, bet kuo čia dėtas strictas? Kas tau pasakė, kad reikia lygiuotis į strict, kai Karolio puslapis ne tik, kad ne strict 4.01, bet net ne transitional 4.01?
O tu susimąstei, kokia jo prasmė? Ar susimąstei, kad visos naršyklės tą schemos aprašymą ignoruoja kaip „aj, čia kažkoks brudas mėtosi“, ir tik IE sako „pereisiu į griežtesnį režimą“, į kurį jis pereitų ir su HTML 3.2 schemos aprašymu?
Geresniems produktams išlįsti į šviesą trukdo aklas madų sekimas, nesupranant dalykų esmės.
O tavo pvz veikia, bet tie kalbos elementai yra pasenia. Tokių dalykų naudojimas iš esmės trukdo geresniems produktams išlįsti į šviesą
lfx, matos, kad nebuvai Denio pranešime BarCamp’e — aš jau žinau ką jis tau pasakys dėl tų „trukdo geriems produktams“, bet gal aš jam pačiam leisiu pasireikšti :)
Ko gero nebuvau, buvau kažkur kitur :)
Bet yra standartai kuriais reikia vadovautis, tam ir yra standartai. Žinoma, kai nesilaikoma jų html’e tai naršyklių gamintojai ir sako “o kam mums vadovautis standartais jei jais niekas darydamas html nenaudoja” Taip ir gaunas užburtas ratas.
Čia panašiai kaip su KET ir jų laikimosi Lietuvoje…
Bet kas juokingiausia ir linksmiausia jog tokia nekalta tema išplieskė tokias diskusijas :) Kaip kas moka taip tas šoka, bet įrašas geras, kadangi kaip matom į tai reikėjo atkreipti blogerių dėmesį.
Taip, kaip tik ką tik su kolega šnekėjau, kad rimtos temos susilaukia trijų komentarų, o kai parašai kažką paprasto ir tikiesi tų trijų, gauni 30 :)
Jis jau nesilaiko standartų, tad koks skirtumas?
Deni, o kodėl negali pradėti laikytis kūrėjai, o jų pavyzdžiu pradėtu sekti ir gamintojai. Beje FF3b ten kažkuris ir Opera nauja ir net IE8B jau labai stipriai nuėjo link Acid testų. Tai tau nieko nesako?
Pagal tokią logiką, man važiuojant keliu ir nereikia laikytis KET nes yra tokių, kurie jų nesilaiko? Valdžia ima kyšius, tai man ir imti (nors neįsivaizduoju kas man juos galėtu duoti?:)) ). Su tokiu požiūriu toliau visiškas kolapsas.
Prisidėjimas prie standartų laikimosi, bet jau vienas iš žingsnių gerinat webdeveloperių gyvenimą. Ar tu IE nekeiki? :)
O inline css irgi gėris?
Jei inline CSS būtų blogis, jis nebūtų sukurtas (čia taip idealistiškai) :) O jei rimtai, mano asmeninė nuomonė yra tokia, kad visas CSS yra gėris jei teisingai, saikingai, laiku, ir vietoj naudojamas.
Sutinku su žodžiu saikingai :)
Mano nuomone, inline CSS turėtų būti naudojamas tik tada, kai tsi yra išimtis iš taisyklės. T.y. visas bendras stilius aprašomas css faile, o jau jei ten kokios nors išimtys, pakeitimai ar vienetiniai atvejai – inline į trasą :)
Karolio blogo šablonas yra parašytas ne pagal standartus. Taip kad jo atveju nebėra prasmės vienos vietos daryti labiau tvarkingos, nei kitos.
O svarbiausia – Transitional nėra blogis.
… Kaip tai susiję su pokalbio tema ir mano teiginiais, atleiski? Dar vienas toks nukrypimas ir nebematysiu prasmės su tavimi diskutuoti.
Gal tu nori paaiškinti, kodėl tavo, tokio viso tvarkingo, puslapis yra apgailėtinas standartų prasme, o mano – tobulas?
Inline CSS, mano nuomone, neturi būti naudojamas viešose svetainėse.
Testuojant – taip. Redaguojant jau ir taip prišiukšlintą šabloną, kaip šis (be pykčių, mano tumblr šablonas irgi blogas) – taip. Bet tikslingai, „išimtys“ ar „vienetiniai atvejai“ – ne. Jeigu žmogus mano, kad jo paveiksliuko pozicianavimo atvejis yra vienetinis, tai, matyt, jis tiesiog tingi padaryti viską tvarkingai. Suprantu, man taip irgi būna. Bet inline CSS nenaudoju.
Ak, ne tą lfx puslapį įdėjau į komentarą. Tačiau ir sodonis.lt yra nevalidus, kad ir koks mažiukas ir paprastas bebūtų… Kodėl?
Nes savo blogu nesiekiu savęs “parduoti”. Nors gėda, kad nevalidus templeitas, žadėjau atsinaujinti jį jau porą kartų, bet..
Anyway pas tave html4, ar neatrodo, kad truputėli tai jau praeitis? Nors lyginat tiek tavo ar mano su xhtml gaunama nemažai klaidų. Bet aš pasitaisysiu :)
Aš netenku amo. Kas tau pasakė, kad HTML 4 yra praeitis? Kas tai per nusistatymas? Kita versija yra HTML 5, ir ji dar nėra išleista, jos yra tik pradiniai draftai, planuojami relyzii bus apie 2010-2012 metus.
O XHTML – parodyk man bent vieną iš tau artimų puslapių, kurie būtų tikri XHTML. Ir paaiškink to tiesioginę naudą prieš HTML. Dėkui.