TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Duch
Hoj
jsem celkem zacatecnik v CSS a XHTML. Zajimalo by mě jak udělat takovýto ukaž více -> méně. Našel jsem si pěkný příklad na http://www.stunicholls.com/various/more.html
jenže oni tam maji jen kod bez vysvětlení. Vůbec nechápu jak to fuguje. Řikal jsem si, že z toho vytahnu kod, jen k tomu prvnímu div-u, ale ani to se mi poradne nepovedlo :( Vypada to stejne, ale chybi tomu funkcnost. Vytahnuty kod:
</head>
<style>
/* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}
/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}
/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}
</style>
<body>
<div id="outer">
<div class="holder">
<h2>Alice's Adventures in Wonderland</h2>
<p class="bold">by Lewis Carroll</p>
<p class="bold">Down the Rabbit-Hole</p>
<p>ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>
<img src="http://www.stunicholls.com/various/more/rabbit.jpg" alt="rabbit" title="" />
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.</p>
</div> <!-- end of more -->
</div> <!-- end of holder -->
</div>
Pls co mi tam chybi? (Mozna uz bych to pak pochopil, ale zkuste mi popsat ten princip jak to funguje)
Diky
Nahlásit jako SPAM
IP: 212.71.129.–
Grafoman
Newbie
Věrný člen
Zjistit počet nových příspěvků
