Hrátky s okrajem textu

9. ledna 2006

•

Někdy se může hodit poněkud netypické formátování plovoucích objektů v textu. Denně takové formátování můžeme vidět například v tištěných novinách. Toto řešení ukazuje, jak podobného efektu dosáhnout na webových stránkách pomocí CSS.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Martin Snížek. Bližší popis najdete v článku Hrátky s okrajem textu v CSS.

CSS

body
{
color: #000;
background-color: #fff;
font: x-small/1.3 „Helvetica CE“, Arial, sans-serif;
fo\nt-size: small;
text-align: center;
padding: 1em;
}
div#hlavni
{
background: #da6;
border: solid #333 1px;
text-align: justify;
width: 500px;
_width: 522px; /* IE */
padding: 20px 20px 20px 100px;
margin: 0 auto;
}
h2
{
float: left;
color: #fff;
background: #b84;
font-size: 140%;
font-style: italic;
text-align: center;
width: 160px;
_width: 170px; /* IE */
position: relative;
left: -80px;
margin: 0 -70px 5px 0;
padding: 5px;
}
dt
{
float: left;
position: relative;
left: -70px;
font-weight: bold;
text-align: center;
color: white;
border-top: solid white 1px;
border-bottom: solid white 1px;
width: 90px;
margin: 0 -70px -40px 0;
padding: .2em 0;
}
dd
{
margin: 0.7em 0 0.7em 40px;
}
p.obrazek
{
float: left;
position: relative;
left: -80px;
color: white;
background: #b84;
font-style: italic;
text-align: center;
font-size: 90%;
width: 190px;
_width: 210px; /* IE */
padding: 12px 10px;
margin: 0 -70px 5px 0;
}

XHTML

<html>
<body>
<div id=“hlavni“>
<p>Lorem ipsum dolor sit amet…</p>
<p class=“obrazek“><img src=“65-1.jpg“ alt=““><br />vivamus commodo.</p>
<p>Lorem ipsum dolor sit amet…</p>
<dl>
<dt>Vivamus commodo</dt>
<dd>Lorem ipsum dolor sit amet…</dd>
<dt>Suspendisse</dt>
<dd>Lorem ipsum dolor sit amet…</dd>
</dl>
<h2>Etiam aliquam, ligula non semper commodo.</h2>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</body>
</html>