Nejprve ukázka, vysvětlení najdete pod ní:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dignissim cursus ligula. Fusce at eros eget eros tempus iaculis. In iaculis placerat dui. Integer est neque, porttitor nec, eleifend et, ullamcorper sed, lectus. Vestibulum est purus, lacinia id, tincidunt id, nonummy et, lectus.
Ut sapien eros, imperdiet et, congue eget, eleifend porttitor, augue. Morbi ac risus. Donec sit amet dui eu elit congue condimentum. Nullam id ante id orci cursus adipiscing. Donec tincidunt ligula eu mauris. Nulla facilisi. Aenean vulputate. Sed pharetra, leo id luctus tempor, diam tortor ullamcorper nunc, sagittis feugiat massa sapien eu ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dignissim cursus ligula. Fusce at eros eget eros tempus iaculis. In iaculis placerat dui. Integer est neque, porttitor nec, eleifend et, ullamcorper sed, lectus. Vestibulum est purus, lacinia id, tincidunt id, nonummy et, lectus.
Ut sapien eros, imperdiet et, congue eget, eleifend porttitor, augue. Morbi ac risus. Donec sit amet dui eu elit congue condimentum. Nullam id ante id orci cursus adipiscing. Donec tincidunt ligula eu mauris. Nulla facilisi. Aenean vulputate. Sed pharetra, leo id luctus tempor, diam tortor ullamcorper nunc, sagittis feugiat massa sapien eu ligula.
Pro tuto stránku jsem se rozhodl použít formátování, které zdůrazní její
rozdělení na jednotlivé části. Každá část je obklopena prvkem
<div> s odpovídající třídou. Ten zajistí rámeček kolem celé
části. Jeho definice je následující:
.ram {
border: solid 2px #95A9E6;
padding: 1em;
margin-bottom: 2em;
position: relative;
}
Obsah části vždy začíná prvkem <h2> obsahujícím její
nadpis. Nadpis jsem se rozhodl umístit efektně na rámeček. Stylový předpis pro
prvek <h2> vypadá takto:
h2 {
font: bold 1.2em sans-serif;
background-color: #95A9E6;
color: #fff;
margin: 0; padding: 0.1em 0.5em;
position: absolute;
top: -0.75em;
}
Pro umístění jsou podstatné poslední dva řádky. Stanoví, že poloha nadpisu je absolutní (díky tomu zmizí z běžného toku a nezůstane po něm prázdné místo mezi rámečkem a začátkem prvního odstavce jeho obsahu) a jeho horní hrana se má vůči horní hraně obsahující prvku zvednout o 0,75 em.
Nastavení position: relative pro rámečkovací
<div> je zde velmi podstatné, protože způsobí, že poloha
nadpisu bude stanovena vůči rámečku.
První část na této stránce ukazuje, jak by formátování dopadlo, kdyby u rámečku tato definice chyběla. V tom případě by rámeček byl umístěn v normálním toku, v důsledku toho by se poloha nadpisu stanovila vůči celé stránce. Proto je první nadpis umístěn zcela nahoře a jeho část, která přesahuje okraj stránky, je neviditelná.
zpět: CSS – absolutní umístění