Nadpis s obrázkem jako odrážkou a podtržením

1. prosince 2005

•

Toto řešení ukazuje, jak vylepšit tvorbu nadpisů na Vašich stránkách. Ukazuje jak vytvořit nadpisy s obrázkem jako odrážkou a dále pak jak vytvořit efektní podtržení u těchto nadpisů. 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

h1
{
font-family:“Arial Narrow CE“, „Arial Narrow“, Arial, Helvetica, „Helvetica CE“, sans-serif;
font-size:150%;
font-weight: normal;
color: #DD0000;
}
h1.odrazky
{
background: url(h1.gif) no-repeat left center;
padding: 0 0 0 20px;
}
h1.podtrzeni
{
border-bottom: 2px solid #8c6e25;
}

XHTML

<html>
<body>
<h1>Obyčejný nadpis</h1>
<h1 class=“podtrzeni“>Nadpis s podtržením</h1>
<h1 class=“odrazky“>Nadpis s obrázkem jako odrážkou</h1>
<h1 class=“odrazky podtrzeni“>Nadpis s kombinací obou možností</h1>
</body>
</html>

Předchozí článek Třísloupcový fixní layout se stejnou délkou panelů

Další článek hodinky.cz