Obrázek na pozadí odstavce

12. prosince 2005

•

Toto řešení ukazuje, jak zlepšit vzhled odstavců na Vašich stránkách. Ukazuje jak vytvořit zvýraznění prvního slova v odstavci obrázkem na pozadí nebo možnost jak například vylepšit citace. Jedná se o jednoduché řešení.

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

Toto řešení publikovala Kathy Marks. Bližší popis najdete v článku CSS and Images: A Beginner’s Cheat Sheet..

CSS

.bublina
{
background: url(bublina.gif) no-repeat top left;
padding: 8px 0 0 6px;
color: #9b7b0c;
}
.uvozovky-nahore
{
background-image: url(uvozovky.gif);
background-repeat: no-repeat;
background-position: top left;
text-indent: 0.8cm;
color:#a9174a;
}
.uvozovky-dole
{
background-image: url(uvozovky.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

XHTML

<html>
<body>
<p class=“bublina“>
Lorem ipsum dolor sit amet, consectetuer…
</p>
<p class=“uvozovky-nahore“>
Vivamus id nisl eu dui aliquet…
</p>
<div class=“uvozovky-nahore“>
<div class=“uvozovky-dole“>
Vivamus id nisl eu dui aliquet…
</div>
</div>
</body>
</html>