Přesné obtékání obrázku textem

Tento článek je určen spíše začátečníkům v oboru a to zejména takzvaným hračičkům, budu totiž popisovat, kterak za pomoci pouze HTML a CSS docílit stavu, kdy bude obrázek obtékán přesně podle jeho grafických hranic. Cílem tedy bude dosáhnout tohoto stavu:

Ilustrační obrázek

K dispozici máme tento obrázek:

Ilustrační obrázek

Zelený strom teorie

Jediný použitelný způsob, kterak psát do prostoru, který je vymezen pro obrázek, je nastavení tohoto obrázku jako pozadí nějakého prvku. Vytvoříme si tedy box o libovolné šířce a minimální výšce, která je rovna výšce obrázku. Pro minimální výšku máme v CSS vlastnost min-height. Bohužel Internet Explorer tuto vlastnost nezná, zná však špatně vlasnost height, se kterou nakládá stejně jako rozumné prohlížeče s min-height. Je tedy třeba prohlížeče rozlišit. Já v příkladu používám hack se selektorem potomka, který Internet Explorer nezná a tudíž v něm můžeme nastavit vlastnosti pro ostatní prohlížeče a vynulovat nastavenou výšku.

#box { background-image: url('screw.jpg'); background-repeat: no-repeat; width: 360px; height: 175px; }
body > #box { min-height: 175px; height: auto; }

Nyní můžeme vložit text to boxu #box. Zatím se však bude vykreslovat v celém boxu, tedy i přes obrázek.

Trik

Logicky je třeba nějak zajistit, aby v levé části obrázku v odpovídající míře „něco“ bylo. K tomuto účelu velice dobře poslouží pár plovoucích DIVů s definovanou výškou a šířkou, které vytvoří tzv. plovoucí okraj obrázku a které bude text přirozeně obtékat. Pro jednotlivé divy můžeme v CSS obecně nastavit následující: 
div.indent { height: 15px; float: left; line-height: 0; clear: left; }

Výška 15 pixelů je adekvátní z hlediska poměru počtu DIVů a zubatosti okraje. Výška řádku je nastavena na nulu z toho důvodu, aby některé prohlížeče (zcela konkrétně opět Internet Explorer) neměnily výšku DIVu s rostoucí velikostí písma. Clear: left zaručí, že každý DIV bude na samostatném řádku.

V kódu samotné stránky potom chvilku experimentujeme s šířkou a počtem jednotlivých DIVů. Vyjde nám něco takového:

<div id="box">

          <div class="indent" style="width: 70px;">&nbsp;</div>
          <div class="indent" style="width: 90px;">&nbsp;</div>
          <div class="indent" style="width: 110px;">&nbsp;</div>
          <div class="indent" style="width: 120px;">&nbsp;</div>
          <div class="indent" style="width: 130px;">&nbsp;</div>
          <div class="indent" style="width: 150px;">&nbsp;</div>
          <div class="indent" style="width: 170px;">&nbsp;</div>
          <div class="indent" style="width: 190px;">&nbsp;</div>
          <div class="indent" style="width: 210px;">&nbsp;</div>
          <div class="indent" style="width: 210px;">&nbsp;</div>
          <div class="indent" style="width: 210px;">&nbsp;</div>

          Lorem ipsum ...

</div>

A vida! Výsledný efekt je na světě. Můžete se podívat na hotové řešení. Řešení je zcela nezávislé na zvolené velikosti písma.

8. 11. 2005, 21.04 | (X)HTML, CSS.


55 komentářů k “Přesné obtékání obrázku textem”

  1. Acci říká:

    2. No ale fuj. To už radši, ať je to hranaté.

    8. 11. 2005 v 21.49

  2. Dero říká:

    3. Acci, souhlasím, že v praxi je to téměř nevyužitelné kvůli zbytečné robustnosti potřebného kódu, ale myslím, že pro někoho může být zajímavé zjišťení, že to vůbec jde.

    Připadám si v posledních dvou spotech jako Jára Cimrman, také objevuji slepé uličky a říkám: "Tudy tedy ne, přátelé!" :o)

    8. 11. 2005 v 21.55

  3. ronan říká:

    4. Tak me napada, musi byt hrozne porad pri praci narazet na problemy s IE, ne:)? Ja se s tim nastesti setkavam malokdy, ale vzdy kdyz to musim resit me to dost ubiji

    8. 11. 2005 v 22.23

  4. Dero říká:

    5. ronan: Svým způsobem už v drtivé většině případů vím, co od toho molocha čekat. :o) Ale je pravda, že ten program má v rukávu neskutečné množství… odlišností.

    8. 11. 2005 v 22.25

  5. Jan Brašna říká:

    6. Fujky :) Na podobné kejkle by byl ideální CSS generovaný obsah, strukturálně to vypadá děsivě.

    8. 11. 2005 v 23.04

  6. Multimotyl říká:

    7. Na podobné kejkle je hlavně SVG! Na podporu v majoritních prohlížečích se těším jako malej kluk.

    9. 11. 2005 v 2.25

  7. Martin Picek říká:

    8. Mně je jedno, přes co to vzniká, ale blbě se to čte. ;-)

    9. 11. 2005 v 7.24

  8. llook říká:

    9. Mě se to líbí. Taky mi občas leze krkem, že je na webu všechno tak hranatý.

    [6] Lepší by bylo říct "by byl". Nebo pokud jsi velký optimista, tak "snad jednou bude". Také bych byl rád, kdyby se konečně nějaký podobný vektorový formát ujal. VML se to nepovedlo, snad se to povede SVG.

    9. 11. 2005 v 7.38

  9. Lukáš Mačí říká:

    10. Pěkná ukázka. Bohužel HTML a CSS jsou zatím hranaté a díky IE jsou i s hranatými věcmi potíže. Takže pokud si grafici nějakou takovouto věc vymyslí a zákazník to prostě chce,není prakticky možné jiné řešení.

    9. 11. 2005 v 10.05

  10. spud říká:

    11. Zdarec, inspiroval si me a zkusil jsem to tvy reseni trochu vylepsit – nechat html klasicke (obrazek je tam coby img) a obtekani pres divy udelat scriptem. Funguje to v pohode v IE a Mozile, ale Opera nejak nechce zpracovat vlastnost float u nove generovanych divu. Treba prijdes na to, jak to osetrit v Opere (nebo to v ni vubec nespoustet) a trochu to zobecnis… ja jsem na to moc linej. :-) viz "http://bacha.cz/mess/imgfloat/"

    9. 11. 2005 v 10.09

  11. Arcao říká:

    12. Uz jsem to nekde videl, ale jinak delany (jednodusseji). Rozkouskuje se obrazek na radky a pak pres foating se hodi na patricnou stranu. Treba takhle: http://www.meyerweb.com/…at/demo.html

    9. 11. 2005 v 10.29

  12. Roj říká:

    13. Ja jsem to dosud delal pre rozsekany obrazek, ale TOHLE JE LEPSI!!! A uz vim, kde to pouziju. Tohle ma tu vyhodu, ze ten text muze obrazek v potrebnych mistech castecne PREKRYVAT, coz se u rozkouskovaneho obrazku dosahnout neda.

    SUPR SUPR SUPR!!!!

    9. 11. 2005 v 11.17

  13. Fred říká:

    14. Kolikrát mě naštve, že skoro všechno už tady bylo viz odkaz na meyerweb, nejsi asi ani první koho na tom štvalo to řezání toho obrázku viz http://flumpcakes.co.uk/css/chef-curv , ale to spudovo řešení má šťávu, žádné zbytečné divy navíc, a bez js žádná pohroma. Takže se zase ukázalo, že má smysl psát i o věcech již objevených. Jen škoda tý opery, asi je lepší jí odříznout. function noopera(){if(!window.opera){obtekej()}} window.onload = noopera;

    9. 11. 2005 v 12.10

  14. Fred říká:

    15. Update nastav to float přes className a funguje to i v Opeře

    css:.divElm{float:left;clear:left;line-height:0;margin-right:0;}

    js: divElm=document.createElement(‚div‘); divElm.className=‚divElm‘; with(divElm.style){ width=screwWidths[i]+‚px‘;

    9. 11. 2005 v 12.21

  15. spud říká:

    16. Fred: Prima, s tim jmenem tridy jsem to taky zkousel a neslo to. Jeste koukam, ze IE trosku osekne nektery pismenka, ale to neni takovej problem a dal by se taky doresit (uprava stylu pro IE, transparentni pozadi obrazku). Opravil jsem ten svuj "link"

    9. 11. 2005 v 13.18

  16. Fred říká:

    17. Ještě to trochu blbne při zvětšování písma v MSIE a ve starších operách (7.23,7.5) poslal jsem Ti to mailem opravené.

    9. 11. 2005 v 14.03

  17. spud říká:

    18. 9. 11. 2005 v 16.36

  18. Dero říká:

    19. Velice hezká práce, spude!

    Nevyužiješ Ty, využijí jiní. Budeš slavný, ženy Ti budou padat k nohám, muži s respektem kynout a programátoři závidět. To je přeci krásné!

    Jsem rád, že Tě provokuji k takovým lotrovinám. :o)

    9. 11. 2005 v 17.00

  19. Fred říká:

    20. Teď už je to dokonalost sama :-)

    9. 11. 2005 v 17.47

  20. Plaváček říká:

    21. Co na to říct. Snad jen, že ta javascritptová vymyšlenost je pěkná vyfikundace (omlouvám se za to slovo, jiné mě nenapadlo), ale pokud se hluboce zamyslíte, zjistíte, že podobná řešení jsou už ze své podstaty nesmyslná. V konečném důsledku je totiž vitacit (šumák), jestli text obrázek obtéká či nikoliv. Jinak řečeno, důležité je vlastní sdělení, nikoliv jeho forma.

    Já osobně tohle přetahování fajnovůstek z DTP na web moc v lásce nemám, zvláště pokud vyžadují podobné obezličky.

    Nicméně, Spudovo řešení je velmi elegantní a ve výjimečných případech se může hodit, to musím uznat.

    9. 11. 2005 v 19.21

  21. ald říká:

    22. fuuuuuuuuuj to snad ani omylem, brrr nikdy

    9. 11. 2005 v 20.14

  22. Petr Klouček říká:

    23. Taky dobrý, ale stejně je nejlepší fotbal:)

    2. 1. 2006 v 18.52

  23. Anonymous říká:

    24. Ach jo řešeni to je…...Ale docela vyřečný

    16. 1. 2006 v 21.14

  24. zirafka říká:

    25. [18]

    … Budeš slavný, ženy Ti budou padat k nohám…

    2spud: BÁC!

    29. 3. 2006 v 10.10

  25. sdf říká:

    26. sdfwholesale nfl</br>aweq wholesale mbt shoes</br> wholesale abercrombie</br>dsfds

    3. 3. 2010 v 9.15

  26. lady bags říká:

    27. mioob airbags handbags lady bags golf bags

    9. 4. 2010 v 4.51

  27. replica watches říká:

    28. cheap replica watches
    Rolex DateJust watches<BR

    26. 4. 2010 v 6.26

  28. jersey říká:

    29. Bohužel Internet Explorer tuto vlastnost nezná, zná však špatně vlasnost height, se kterou nakládá stejně jako rozumné dd

    10. 5. 2010 v 3.11

  29. replica watches říká:

    30. cartiervacheron constantin

    11. 6. 2010 v 5.10

  30. gucci říká:

    31. Thank you .gucci bags sale gucci gucci handbags cheap gucci bags

    21. 6. 2010 v 9.13

  31. dsfds říká:

    32. christian louboutin sale

    30. 6. 2010 v 10.05

  32. johnhand říká:

    33. Tom Penny and Antwian Dixon. Apart from a large fan base compromising skateboarders, supra vaider high tophas also aught the attention of the music industries big names such as Jay-Z, Justin Timberlake and Lil Wayne. supra vaider black high boots, it is the main creative recreation sneakers teal we push in our online shop these days.

    1. 7. 2010 v 2.26

  33. johnhand říká:

    34. Check out our new models, you can have your own Timberland boots mailed right to your door a few seconds from now. What are you waiting for? timberland boots uk.
    timberland boots were created closely and carefully designed to provide its wearer with comfort and protection necessary for outdoor activities.they continuetimberland Shoes to adjust how and with what materials boots are made.

    1. 7. 2010 v 2.27

  34. Dream World říká:

    35. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work.Jewish Directory Hot Fix Motif Catering Service Home Gift

    1. 7. 2010 v 5.05

  35. sdfsd říká:

    36. gucci bags sells Designsfsgjulreer

    12. 7. 2010 v 11.03

  36. Gucci Outlet říká:

    37. Thank you very much.gucci bags sale gucci gucci handbags cheap gucci bags http://www.guccis.net

    21. 7. 2010 v 4.14

  37. hollister uk říká:

    38. hollister uk good think

    26. 7. 2010 v 10.43

  38. UGG Classic Tall Boots říká:

    39. [url=http://www.uggboots5815.com]UGG Boots,UGG Boots 5815[/url] [url=http://www.uggboots5815.com]UGG Classic Boots,UGG Boots Classic Tall[/url] [url=http://www.uggboots5815.com]UGG Classic Tall Boots,UGG Boots 5815[/url]

    27. 7. 2010 v 10.03

  39. UGG 5825 říká:

    40. UGG Boots 5163, 03.

    28. 7. 2010 v 4.59

  40. UGG 5825 říká:

    41. UGG Classic Short Boots --

    28. 7. 2010 v 6.40

  41. UGG 5825 říká:

    42. ghd hair straighteners, ghd styler 9990

    28. 7. 2010 v 6.48

  42. Gucci Handbags říká:

    43. Gucci Handbags,Gucci Bags --

    28. 7. 2010 v 6.54

  43. Gucci Handbags říká:

    44. UGG Boots,UGG Classic Boots -/-

    28. 7. 2010 v 7.05

  44. UGG Classic Tall Boots říká:

    45. http://uggboots5815.com http://uggboots5815.com http://uggboots5815.com http://uggboots5815.com

    29. 7. 2010 v 8.55

  45. abercrombie říká:

    46. It's always nice when you can not only be informed, but also engaged! abercrombie fitch

    30. 7. 2010 v 15.28

  46. tiffany online říká:

    47. Well said, such a person should be a good sentenceed eyebrow with this as welltiffany outletouiu dsiufnhyshd nmdjsfjiuhnc

    2. 8. 2010 v 10.57

  47. Wholesale accessories říká:

    48. This way you have one for fine details,Wholesale Accessories and another for larger fill areas,China Wholesale so you don't have to start and stop in the middle.tattoo machine More than two allows you to switch from one color to another fluidly.

    10. 8. 2010 v 7.41

  48. womens ugg boots říká:

    49. Not even as I shook womens ugg boots and trembled uncontrollably in the trenches, did I forget your ugg boots face. I would sit huddled into the wet mud, terrified, as the ugg australia hails of bullets and mortars crashed down around me. WYQ

    16. 8. 2010 v 1.39

  49. Wholesale Accessories říká:

    50. This way you Kawasaki ZX-12R have one for fineKawasaki ZX 2 R details,and another for larger fillSuzuki RGV 250 areas

    24. 8. 2010 v 8.01

  50. louis vuitton wallet říká:

    51. Online buy Louis Vuitton Outlet at wholesale price from lv handbags online store, 24/7 live service, Free Shipping and accept PayPal.

    1. 9. 2010 v 6.47

  51. lv říká:

    52. Cheap Louis Vuitton handbags sale and Cheap Louis Vuitton bags sale and Cheap Louis Vuitton purses sale and Cheap Louis Vuitton luggage sale

    6. 9. 2010 v 2.48

  52. UGG Boots říká:

    53. so you don'tUGG Boots Bailey Button have to start and stop in the middleUGG Mini Boots 5854.More than two allows you to switch from one color Corum Replica Watchesto another fluidly.

    7. 9. 2010 v 8.38

  53. NFL Jersey říká:

    54. Nice post.Thank you for taking the time to publish this information very useful! I’m still waiting for some interesting thoughts from your side in your next post thanks

    8. 9. 2010 v 7.57

  54. Nike Air Jordan říká:

    55. I've been reading a few posts and i'm adding Abercrombie Onlineyour Nike Air Jordan blog to my rss reader , thanks !

    10. 9. 2010 v 9.36

  55. Timberland Boots říká:

    56. I admire what you have done here. I like the part where you say you are doing this to Timberland Boots give back but I would assume by all the comments that this is working for you as well.

    10. 9. 2010 v 9.37

Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.