Obsah dokumentu

23. ledna 2006

•

Toto řešení ukazuje, jak vytvořit jednoduchý obsah dokumentu. Jako základu využívá tabulky a dolní podtržení jako vodící linku. Řešení je dále možno použít i jako jídelní lístek.

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

Toto řešení publikoval Tantek Çelik. Bližší popis najdete v článku CSS Examples.

CSS

h1
{
font-size: 1.5em;
font-style: italic;
font-family: serif;
text-align: center;
margin-bottom: 2em;
}
table
{
width: 100%;
line-height: 1.1em;
}
tr
{
height:1.3em;
}
td
{
white-space: nowrap;
height: 1.3em;
vertical-align: baseline;
}
td.kapitola
{
font-size: 1.2em;
font-weight: bold;
font-variant: small-caps;
text-decoration: underline;
}
td.podkapitola
{
font-weight: bold;
font-size: 110%;
height: 0.8em;
text-indent: 5em;
}
.vodic
{
width:100%;
vertical-align:30%;
}
.vodic div
{
line-height: 1.2ex;
width: 100%;
border-bottom: 1px dotted;
}
.strana
{
text-align: right;
font-weight: bold;
}
.popisek
{
font-style: italic;
}
.drobnotisk
{
font-size: xx-small;
text-align: center;
margin-top: 3em;
}

XHTML

<html>
<body>
<h1>Obsah</h1>
<table><tr><td class=“kapitola“>1. Úvod</td><td class=“vodic“><div></div></td><td class=“strana“>1</td></tr></table>
<table><tr><td class=“kapitola“>2. Kapitola</td><td class=“vodic“><div></div></td><td class=“strana“>1</td></tr></table>
<table><tr><td class=“podkapitola“>2.1 Podkapitola – </td><td class=“popisek“>Doprovodný text</td><td class=“vodic“><div></div></td><td class=“strana“>1</td></tr></table>
<table><tr><td class=“podkapitola“>2.2 Podkapitola – </td><td class=“popisek“>…</td><td class=“vodic“><div></div></td><td class=“strana“>2</td></tr></table>
<table><tr><td class=“kapitola“>3. Kapitola</td><td class=“vodic“><div></div></td><td class=“strana“>3</td></tr></table>
<table><tr><td class=“podkapitola“>3.1 Podkapitola – </td><td class=“popisek“>…</td><td class=“vodic“><div></div></td><td class=“strana“>3</td></tr></table>
<table><tr><td class=“podkapitola“>3.2 Podkapitola – </td><td class=“popisek“>…</td><td class=“vodic“><div></div></td><td class=“strana“>3</td></tr></table>
<table><tr><td class=“kapitola“>4. Závěr</td><td class=“vodic“><div></div></td><td class=“strana“>5</td></tr></table>
<div class=“drobnotisk“>
<div class=“poznamky“>Upozornění nebo poznámky 1</div>
<div class=“poznamky“>Upozornění nebo poznámky 2</div>
</div>
</body>
</html>