ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Odkaz Více

2. května 2006
•
Redakce Interval.cz

Obsah

  1. CSS
  2. XHTML

Související

Toto řešení ukazuje, jak pomocí CSS vytvořit populární odkaz „více“ nebo „více zde“, který po kliknutí zobrazí pokračování započatého textu ve zvětšeném objektu. Při opětovném kliknutí jinam zase tento text elegantně zmizí.

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

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku SHOW ME SOME MORE….

CSS

body
{
font-size: 76%;
}
.tucne
{
font-weight:bold;
}
.holder
{
width:210px;
margin:5px;
padding:1em;
border:1px solid #ddd;
float:left;
}
.holder h2
{
color: navy;
text-align:center;
letter-spacing:0.2em;
font-variant: small-caps;
}
a.skryty
{
color:#000;
text-decoration:none;
outline-style:none;
}
a.skryty em
{
display:none;
}
a.skryty:hover
{
text-decoration:none;
}
a.skryty:active, a.skryty:focus
{
background:#fff;
}
a.skryty:active span, a.skryty:focus span
{
display:none;
}
a.skryty:active em, a.skryty:focus em
{
display:block;
color:#000;
width:100%;
font-style:normal;
cursor:default;
}
.clear
{
clear:both;
}

XHTML

<html>
<body>
<div class=“holder“>
<h2>Lorem ipsum</h2>
<p class=“tucne“>DOLOR SIT AMET</p>
<p>Nunc tincidunt varius felis.<br />
Etiam id lectus sed justo posuere lacinia. <br />
Etiam odio mi, elementum vitae,<br />
porta non lacus. Praesent vestibulum. </p>
<p><a class=“skryty“ href=“#more“><span>více »</span>
<em>Cum sociis natoque et magnis,<br />
nascetur ridiculus mus. Fusce ac ante.<br />
Donec pretium nunc sollicitudin velit. <br />
Integer ac lorem. Vestibulum in odio.<br />
Ut metus. Maecenas vestibulum metus.<br />
Mauris sit amet felis. Ut dui.<br />
Donec lacinia in enim. Integer ut orci.<br />
Maecenas ac augue. Nullam semper justo.<br /><br />
Morbi blandit rhoncus ante. Donec lectus.<br />
Ut condimentum. Quisque tempus porta,<br />
lorem volutpat purus, non venenatis velit.<br />
In est sapien, ultrices in, condimentum,<br />
vestibulum vitae, odio. Nullam sodalesn.<br /></em></a></p>
</div>
</body>
</html>

Předchozí článek vandalove.cz
Další článek DatePicker pomocí Calendar control v ASP.NET
Štítky: Články, Pro CSS: triky a finty
Redakce Interval.cz

Mohlo by vás také zajímat

Nejnovější

4 komentářů

  1. Conky

    Říj 8, 2009 v 10:59

    Nefunguje v Google Chrome…!?

    Odpovědět

  2. Matěj Johanides

    Pro 10, 2009 v 13:45

    Nefunguje ani v IE ve Win7….

    Odpovědět

  3. Anne

    Led 16, 2010 v 10:56

    nefunguje v Mozille…

    Odpovědět

  4. Miroslav Kucera

    Led 16, 2010 v 17:07

    Anne: ve firefoxu 3.5.7 funguje :)

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *