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:
K dispozici máme tento 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;"> </div>
<div class="indent" style="width: 90px;"> </div>
<div class="indent" style="width: 110px;"> </div>
<div class="indent" style="width: 120px;"> </div>
<div class="indent" style="width: 130px;"> </div>
<div class="indent" style="width: 150px;"> </div>
<div class="indent" style="width: 170px;"> </div>
<div class="indent" style="width: 190px;"> </div>
<div class="indent" style="width: 210px;"> </div>
<div class="indent" style="width: 210px;"> </div>
<div class="indent" style="width: 210px;"> </div>
Lorem ipsum ...
</div>