UPOTETTAVA eläinten tietosivu

Alla on koodin jonka voit liittää oman sivusi tekstikenttään. Sopii parheiten ulkoasuihin, joissa leveä tekstikenttä.
Katso esimerkki (upotettu puna-harmaaseen ulkoasuun)

<h1>Virallinen nimi</h1>

<a href="pikkukuva.jpg" target="blank_"><img src="pikkukuva.jpg" style="padding: 5px; margin: 5px; margin-bottom: 0; width: 15%; height: auto;"/></a>
</div>
<div style="width: 48%; padding: 1%; float: right;">
<strong>» Virallinen nimi:</strong> tieto<br />
<strong>» Sukupuoli:</strong> tieto<br />
<strong>» Rotu:</strong> tieto<br />
<strong>» Säkäkorkeus:</strong> tieto<br /><br />

<strong>» Koulutus:</strong> tieto <br />
<strong>» Painotuslaji:</strong> tieto <br /><br />

<strong>» Kasvattaja:</strong> tieto <br />
<strong>» Omistaja:</strong> tieto <br /><br />

<strong>» Rekisterinumero:</strong> tieto <br /><br />

<p style="font-size: 1.1em; font-weight:bold;">
Menestys
</p>
<ul>
<strong>»</strong> saavutus <br />
<strong>»</strong> saavutus<br /><br />
</ul>

</div>
</div>
<br clear="all" />

<table style="width: 90%; border: 0; font-size: 0.8em; margin: 0 auto;" cellpadding="5" cellspacing="0">
<tr>
<td valign="middle">
3 vuotias - 00.00.0000<br />
4 vuotias - 00.00.0000<br />
5 vuotias - 00.00.0000<br />
6 vuotias - 00.00.0000<br />
7 vuotias - 00.00.0000<br />
</td>
<td valign="middle">
8 vuotias - 00.00.0000<br />
9 vuotias - 00.00.0000<br />
10 vuotias - 00.00.0000<br />
11 vuotias - 00.00.0000<br />
12 vuotias - 00.00.0000<br />
</td>
<td valign="middle">
13 vuotias - 00.00.0000<br />
14 vuotias - 00.00.0000<br />
15 vuotias - 00.00.0000<br />
16 vuotias - 00.00.0000<br />
17 vuotias - 00.00.0000<br />
</td>
<td valign="middle">
18 vuotias - 00.00.0000<br />
19 vuotias - 00.00.0000<br />
20 vuotias - 00.00.0000<br />
21 vuotias - 00.00.0000<br />
22 vuotias - 00.00.0000<br />
</td>
</tr>
</table>
<h2>Luonne</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra   ultricies massa non ultricies. Duis pharetra lectus et pellentesque   dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula   lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed diam congue tristique.   Morbi ornare volutpat porttitor. Aenean scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem. Pellentesque aliquam interdum   ante, eget elementum neque vulputate quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue est. </p>
<p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et   tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique   consectetur augue. Praesent pharetra urna at scelerisque sodales.   Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit   amet, consectetur adipiscing elit. Proin non elit nisi. Aenean interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet ante ornare.   Cras at dui at tellus accumsan condimentum. </p>

<p style="font-size: 1.1em; font-weight:bold;">
Sukuselvitys
</p>
<p><b>i.</b> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique consectetur augue. Praesent pharetra urna at scelerisque sodales.</p> 
<p><b>e.</b> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique consectetur augue. Praesent pharetra urna at scelerisque sodales.</p>

<p style="font-size: 1.1em; font-weight:bold;">Jälkeläiset</p>
<table style="width: 100%; border: 0;" cellpadding="2" cellspacing="2">
<tr style="border-bottom: 1px solid #CCC;">
<td>
00.00.0000
</td>
<td>
o. / t.
</td>
<td>
<a href="#" target="_blank">Varsan nimi</a>
</td>
<td>
<a href="#" target="_blank">emä / isä</a>
</td>
</tr>
<tr style="border-bottom: 1px solid #CCC;">
<td>
00.00.0000
</td>
<td>
o. / t.
</td>
<td>
<a href="#" target="_blank">Varsan nimi</a>
</td>
<td>
<a href="#" target="_blank">emä / isä</a>
</td>
</tr>
</table>

<h2>Kilpailukalenteri</h2>
<pre style="font-size: 0.8em; width: 48%; padding: 1%; font-family:Arial, Helvetica, sans-serif; float: left;">
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
</pre>
<pre style="font-size: 0.8em; width: 48%; padding: 1%; font-family:Arial, Helvetica, sans-serif; float: right;">
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
00.00.0000 - luokka - <a href="#" target="_blank">kutsu</a> - sija
</pre>
<br clear="all" />
<div style="width: 100%; margin: 0 auto; ">
<div style="width: 48%; padding: 1%; float: left;">
<h2>Valmennukset</h2>
<div style=" overflow: auto; width: 90%; height: 400px; margin: 0 auto;">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra     ultricies massa non ultricies. Duis pharetra lectus et pellentesque     dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula     lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc   iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec   suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed   diam congue tristique.   Morbi ornare volutpat porttitor. Aenean   scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem.   Pellentesque aliquam interdum   ante, eget elementum neque vulputate   quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa   rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus   imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue   est. </p>
  <p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et     tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique     consectetur augue. Praesent pharetra urna at scelerisque sodales.     Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit     amet, consectetur adipiscing elit. Proin non elit nisi. Aenean   interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo   tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo   et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque   justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet   ante ornare.   Cras at dui at tellus accumsan condimentum. </p>
</div>
</div>
<div style="width: 48%; padding: 1%; float: right;">
<h2>Päiväkirja</h2>
<div style=" overflow: auto; width: 90%; height: 400px; margin: 0 auto;">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra     ultricies massa non ultricies. Duis pharetra lectus et pellentesque     dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula     lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc   iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec   suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed   diam congue tristique.   Morbi ornare volutpat porttitor. Aenean   scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem.   Pellentesque aliquam interdum   ante, eget elementum neque vulputate   quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa   rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus   imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue   est. </p>
  <p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et     tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique     consectetur augue. Praesent pharetra urna at scelerisque sodales.     Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit     amet, consectetur adipiscing elit. Proin non elit nisi. Aenean   interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo   tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo   et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque   justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet   ante ornare.   Cras at dui at tellus accumsan condimentum. </p>
</div>

</div>
</div>
<br clear="all" />
<p style="font-size: small; text-align: center;">
Ulkoasu © <a href="http://raitatossu.net/pilvimarja" target="_blank">Pilvimarja 2013</a> / Heidi
</p>