Kép körbefuttatása

Probléma

Ebben a rövid cikkben egy kis CSS-t fogok bemutatni: hogyan lehet szöveggel körbefuttatni a képeket. Téglalap alakú képekről lesz most szó, bár egy későbbi cikkben kitérhetek arra is, hogyan lehet szabálytalan alakú képeket (vagy négyzetes, de átlátszósággal bíró, .png formátumú) képeket körbefuttatni.

Mindenkit megnyugtatok: nem ennyire nehéz a téma, hogy ilyen sokat csúszott a cikk, egyszerűen ütemezési probléma merült fel. (Magyarán elfelejtettem, hogy nem írtam meg.)

Megoldás elméleti háttere

Egyszer már volt róla szó, hogy a tartalomért a HTML felelős, de a kinézetet a CSS állítja. (Az interaktivitást meg a JavaScript adja.) Ezért CSS-hez kell fordulnunk, mert ha csak simán egymás alá dobáljuk a szöveget és a képeket HTML-ben, akkor nem fogják körbeölelni egymást.

Persze van egy másik megoldás is, ami Blogger-specifikus. A Szerkesztési nézetben is át lehet állítani, hogy a képet körbefussa a szövegünk, de kell hozzá egy kis kézügyesség. Ötből három esetben működik, a maradék kettőben meg erős káromkodás lesz a vége, hogy az ember végül CSS-hez folyamodjon.

Megoldás

Kezdem az egyszerűbb, Bloggeres résszel. Megírjuk a szöveget, beleállunk egy szimpatikus sorba, majd beillesztjük a képet. A Blogger automatikusan bedobja középre, de itt jön a csel: zárjuk oldalra! Képekkel is meg lehet tenni, nem csak szöveggel. Kijelölés és valamelyik oldalra bedobjuk.

Oldalra zárás

Ez, mint mondtam, a legtöbb esetben működik. Ha nem, vagy nem Bloggerben vagyunk, vagy még nincs szöveg, csak a kép, akkor jön a CSS.

A CSS-hez kell a HTML-nézet. Sajnos kódokat a Szerkesztési nézetben nem írhatunk. Egy működőképes CSS-beállításhoz három fő dologra van szükség:

• egy kijelölt HTML elem (selector)
• egy attribútum, amit változtatni szeretnék (tehát egy tulajdonság)
• és egy érték, amire az attribútumot beállítjuk
  

Ha a beágyazott, sorközi (inline) CSS-t választjuk, ami jelen esetben a legegyszerűbb módszer, akkor az első pontot kipipálhatjuk. Ilyenkor ugyanis tényleg meg kell keresnünk a kérdéses HTML elemet, és oda beírni a szükséges stílus-módosításokat. Hátránya, hogy csak és kizárólag az adott elemre lesz érvényes, de általában képek körbefuttatásánál ez nem gond, hiszen nem feltétlenül szeretnénk minden képet kérdés nélkül ugyanúgy kezelni.

HTML-nézetben keressük meg a nekünk kellő képet. Én általában előbb feltöltöm, majd közvetlenül utána szerkesztem a stílust, így mindig az utolsónak feltöltött képpel kell dolgoznom. Ez persze nem kötelező, csak nehéz megtalálni a szükséges képet, bár a körülötte lévő szöveg alapján tájékozódhatunk, illetve van egy Keresés funkció is (a nagyító ikon). A számunkra fontos HTML-elem az img. Pontosabban bármi, ami ezt beburkolja.

Ha nincs képaláírás, az img fölötti legkülső div elemet kell megkeresnünk. Ha van, akkor egy table elem lesz a mi barátunk.

Utána jöhet az inline stílus. A szöveg körbefuttatásához a float tulajdonságot kell állítanunk. Ez azt határozza meg, hogy a kép melyik oldalra lebegjen: a left (bal) és a right (jobb) értékek közül választhatunk. Azaz a left float érték esetén a kép bal oldalt lesz, a szöveg pedig jobbról futja körbe. Right esetén fordítva.

Az inline stílus szerkesztéséhez a kiválasztott HTML elemünknél a záró kacsacsőr (>) elé írjuk be az alábbit:

style="float:left|right;"

A left és a right érték közül válasszunk, minden más kötelező. Tehát balra zárt, jobbról körbefuttatott kép esetén:

<div style="float:left;">

lesz a külső div elem.

💡 TIPP: gyakran van már egy style helyben, amiben van is valami érték. Ne töröljük, írjuk csak a záró idézőjel elé a float:left; vagy float:right; részt. A pontosvessző fontos!

Ezzel a kép oldalra ugrik, és a szöveg automatikusan körbeveszi.

Összefoglalás

Ennyi a kép körbefuttatása. Szerencsére nem túl bonyolult, ha nem bonyolultak a képeink! Persze megtehetjük, hogy szabálytalan alakzatokat használunk, és a szöveg azokat is körbe tudja futni a modern böngészőkben (Internet Explorer fanoknak ez rossz hír, sajnálom, ott nem működik). Például:

See the Pen Image text wrap by Szuzs (@szuzs) on CodePen.

De ez már nem alapszintű témakör.

Ha érdekel, dobj egy megjegyzést! Addig kitartást és jó blogolást!