css/design40/manual/table-dimensions.html

   1 <!DOCTYPE html>
   2 <html lang="de">
   3 <head>
   4   <meta charset="utf-8" />
   5   <link href="../style.css" rel="stylesheet">
   6   <title>Tabellen in Kivitendo</title>
   7
   8   <script type="text/javascript" src="/js/jquery.js"></script>
   9   <script type="text/javascript" src="/js/common.js"></script>
  10   <script type="text/javascript" src="/js/namespace.js"></script>
  11   <script type="text/javascript" src="/js/kivi.js"></script>
  12   <script type="text/javascript" src="/js/locale/de.js"></script>
  13   <script type="text/javascript" src="/js/jquery-ui.js"></script>
  14   <script type="text/javascript" src="/js/kivi.QuickSearch.js"></script>
  15   <script type="text/javascript" src="/js/kivi.ActionBar.js"></script>
  16   <script type="text/javascript" src="/js/kivi.Draft.js"></script>
  17   <script type="text/javascript" src="/js/kivi.File.js"></script>
  18   <script type="text/javascript" src="/js/kivi.SalesPurchase.js"></script>
  19   <script type="text/javascript" src="/js/kivi.Part.js"></script>
  20   <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
  21   <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
  22   <script type="text/javascript" src="/js/kivi.io.js"></script>
  23   <script type="text/javascript" src="/js/autocomplete_customer.js"></script>
  24   <script type="text/javascript" src="/js/client_js.js"></script>
  25   <script type="text/javascript" src="/js/jquery.cookie.js"></script>
  26   <script type="text/javascript" src="/js/jquery.checkall.js"></script>
  27   <script type="text/javascript" src="/js/jquery.download.js"></script>
  28   <script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
  29   <script type="text/javascript" src="/js/jquery/fixes.js"></script>
  30   <script type="text/javascript" src="/js/jquery/jquery.tooltipster.min.js"></script>
  31   <script type="text/javascript" src="/js/jquery/ui/i18n/jquery.ui.datepicker-de.js"></script>
  32
  33 </head>
  34 <body class="developing">
  35 <header>
  36   <h1>Abmessungen der horizontalen Tabellen in Kivitendo</h1>
  37   <nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
  38 </header>
  39
  40 <form action="#">
  41
  42 <div class="wrapper">
  43
  44 <p></p>
  45 </div><!-- /.wrapper -->
  46
  47
  48
  49 <div class="wrapper clear">
  50 <div class="col">
  51
  52
  53 <h2>Small</h2>
  54
  55 <table class="tbl-horizontal test-plain">
  56   <caption>Colums Small &amp; Small</caption>
  57   <colgroup> <col class="wi-small"><col class="wi-small"> </colgroup>
  58   <tbody>
  59     <tr>
  60       <th>Label</th>
  61       <td><div class="data">div.data</div></td>
  62     </tr>
  63     <tr>
  64       <th>Label</th>
  65       <td class="data">td.data</td>
  66     </tr>
  67   </tbody>
  68 </table>
  69
  70 <table class="tbl-horizontal wi-small-small test-plain">
  71   <caption>Table Small-Small</caption>
  72   <tbody>
  73     <tr>
  74       <td><div class="data">div.data</div></td>
  75     </tr>
  76     <tr>
  77       <td class="data">td.data</td>
  78     </tr>
  79   </tbody>
  80 </table>
  81
  82 <table class="tbl-horizontal test-plain">
  83   <caption>Small Formelemente</caption>
  84   <colgroup><col class="wi-small"><col class="wi-small"></colgroup>
  85   <tbody>
  86     <tr>
  87       <th>Textfeld</th>
  88       <td><input type="text" name="input-type-text-small-small-1-1" class="wi-small"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
  89     </tr>
  90     <tr>
  91       <th>Textfeld</th>
  92       <td><input type="text" name="input-type-text-small-small-1-2" class="wi-small">mm</td>
  93     </tr>
  94     <tr>
  95       <th>Select</th>
  96       <td>
  97       <select id="slct-small-1" name="slct-small-1" class="wi-small">
  98         <option value=""></option>
  99         <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 100         <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 101         <option value="Timothy Leary">Timothy Leary</option>
 102         <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 103       </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
 104     </tr>
 105   </tbody>
 106 </table>
 107
 108 <table class="tbl-horizontal test-plain wi-small-small">
 109   <caption>Small-Small Textarea</caption>
 110   <colgroup> <col class="wi-small-small"> </colgroup>
 111   <tbody>
 112     <tr>
 113       <th>KEIN Texteditor</th>
 114     </tr>
 115     <tr>
 116       <td><span class="label">Nur Textarea</span>
 117         <textarea name="texteditor-small-small" id="texteditor-small-small" class="wi-small-small">Diese Abmessung sollte nicht für den CKEditor verwendet werden.</textarea>
 118       </td>
 119     </tr>
 120   </tbody>
 121 </table>
 122
 123
 124 <div class="test-box wi-small">Div .small</div>
 125 <div class="test-box wi-small">Div .small</div>
 126
 127
 128
 129 </div><!-- /.col -->
 130 <div class="col">
 131
 132
 133 <h2>Mediumsmall</h2>
 134
 135 <table class="tbl-horizontal test-plain">
 136   <caption>Colums Small &amp; Mediumsmall</caption>
 137   <colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup>
 138   <tbody>
 139     <tr>
 140       <th>Label</th>
 141       <td><div class="data">div.data</div></td>
 142     </tr>
 143     <tr>
 144       <th>Label</th>
 145       <td class="data">td.data</td>
 146     </tr>
 147   </tbody>
 148 </table>
 149
 150 <table class="tbl-horizontal wi-small-mediumsmall test-plain">
 151   <caption>Table Small-Mediumsmall</caption>
 152   <tbody>
 153     <tr>
 154       <td><div class="data">div.data</div></td>
 155     </tr>
 156     <tr>
 157       <td class="data">td.data</td>
 158     </tr>
 159   </tbody>
 160
 161 </table>
 162
 163 <table class="tbl-horizontal test-plain">
 164   <caption>Mediumsmall Formelemente</caption>
 165   <colgroup><col class="wi-small"><col class="wi-mediumsmall"></colgroup>
 166   <tbody>
 167     <tr>
 168       <th>Textfeld</th>
 169       <td><input type="text" name="input-type-text-small-mediumsmall-2-1" class="wi-mediumsmall"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
 170     </tr>
 171     <tr>
 172       <th>Textfeld</th>
 173       <td><input type="text" name="input-type-text-small-mediumsmall-2-2" class="wi-mediumsmall">mm</td>
 174     </tr>
 175     <tr>
 176       <th>Select</th>
 177       <td>
 178       <select id="slct-small-mediumsmall" name="slct-small-mediumsmall" class="wi-mediumsmall">
 179         <option value=""></option>
 180         <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 181         <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 182         <option value="Timothy Leary">Timothy Leary</option>
 183         <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 184       </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button></td>
 185     </tr>
 186   </tbody>
 187 </table>
 188
 189 <table class="tbl-horizontal test-plain wi-small-mediumsmall">
 190   <caption>Small-Mediumsmall Textarea</caption>
 191   <colgroup> <col class="wi-small-mediumsmall"> </colgroup>
 192   <tbody>
 193     <tr>
 194       <th>KEIN Texteditor</th>
 195     </tr>
 196     <tr>
 197       <td>
 198         <span class="label">Nur Textarea</span>
 199         <textarea name="texteditor-small-mediumsmall" id="texteditor-small-mediumsmall" class="wi-small-mediumsmall">Diese Abmessung sollte nicht für den CKEditor verwendet werden.</textarea>
 200       </td>
 201     </tr>
 202   </tbody>
 203 </table>
 204
 205 <div class="test-box wi-small">Div .small</div>
 206 <div class="test-box wi-mediumsmall">Div .mediumsmall</div>
 207
 208
 209 </div><!-- /.col -->
 210 <div class="col">
 211
 212
 213 <h2>Normal</h2>
 214
 215 <table class="tbl-horizontal test-plain">
 216   <caption>Colums Small &amp; Normal</caption>
 217   <colgroup> <col class="wi-small"><col class="wi-normal"> </colgroup>
 218   <tbody>
 219     <tr>
 220       <th>Label</th>
 221       <td><div class="data">div.data</div></td>
 222     </tr>
 223     <tr>
 224       <th>Label</th>
 225       <td class="data">td.data</td>
 226     </tr>
 227   </tbody>
 228 </table>
 229
 230 <table class="tbl-horizontal wi-small-normal test-plain">
 231   <caption>Table Small-Normal</caption>
 232   <tbody>
 233     <tr>
 234       <td><div class="data">div.data</div></td>
 235     </tr>
 236     <tr>
 237       <td class="data">td.data</td>
 238     </tr>
 239   </tbody>
 240
 241 </table>
 242
 243
 244 <table class="tbl-horizontal test-plain">
 245   <caption>Normal Formelemente</caption>
 246   <colgroup> <col class="wi-small"><col class="wi-normal"> </colgroup>
 247   <tbody>
 248     <tr>
 249       <th>Textfeld</th>
 250       <td>
 251         <input type="text" name="input-type-text-5" class="wi-normal"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 252       </td>
 253     </tr>
 254     <tr>
 255       <th>Textfeld</th>
 256       <td>
 257         <input type="text" name="input-type-text-5" class="wi-normal">mm
 258       </td>
 259     </tr>
 260     <tr>
 261       <th>Textarea</th>
 262       <td>
 263         <textarea name="txtarea1" class="wi-normal">Dies ist ein ganz langer Text</textarea>
 264       </td>
 265     </tr>
 266     <tr>
 267       <th>Select</th>
 268       <td>
 269         <select id="slct-5" name="slct-5" class="wi-normal">
 270           <option value=""></option>
 271           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 272           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 273           <option value="Timothy Leary">Timothy Leary</option>
 274           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 275         </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 276       </td>
 277     </tr>
 278   </tbody>
 279 </table>
 280
 281 <table class="tbl-horizontal test-plain wi-small-normal">
 282   <caption>Small-Normal Textarea</caption>
 283   <colgroup> <col class="wi-small"><col class="wi-normal"> </colgroup>
 284   <tbody>
 285     <tr>
 286       <th>Texteditor</th>
 287     </tr>
 288     <tr>
 289       <td>
 290         <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-normal">Dies ist ein ganz langer Text</textarea>
 291       </td>
 292     </tr>
 293   </tbody>
 294 </table>
 295
 296 <div class="test-box wi-small">Div .small</div>
 297 <div class="test-box wi-normal">Div .normal</div>
 298
 299
 300
 301 </div><!-- /.col -->
 302 </div><!-- /.wrapper -->
 303 <div class="wrapper clear">
 304 <div class="col">
 305
 306
 307
 308 <h2>Lightwide</h2>
 309
 310 <table class="tbl-horizontal test-plain">
 311   <caption>Colums Small &amp; Lightwide</caption>
 312   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 313   <tbody>
 314     <tr>
 315       <th>Label</th>
 316       <td><div class="data">div.data</div></td>
 317     </tr>
 318     <tr>
 319       <th>Label</th>
 320       <td class="data">td.data</td>
 321     </tr>
 322   </tbody>
 323 </table>
 324
 325 <table class="tbl-horizontal wi-small-lightwide test-plain">
 326   <caption>Table Small-Lightwide</caption>
 327   <tbody>
 328     <tr>
 329       <td><div class="data">div.data</div></td>
 330     </tr>
 331     <tr>
 332       <td class="data">td.data</td>
 333     </tr>
 334   </tbody>
 335
 336 </table>
 337
 338
 339 <table class="tbl-horizontal test-plain">
 340   <caption>Lightwide Formelemente</caption>
 341   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 342   <tbody>
 343     <tr>
 344       <th>Textfeld</th>
 345       <td>
 346         <input type="text" name="input-type-text-1" class="wi-lightwide"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 347       </td>
 348     </tr>
 349     <tr>
 350       <th>Textfeld</th>
 351       <td>
 352         <input type="text" name="input-type-text-1" class="wi-lightwide">mm
 353       </td>
 354     </tr>
 355     <tr>
 356       <th>Textarea</th>
 357       <td>
 358         <textarea name="txtarea1" class="wi-lightwide">Dies ist ein ganz langer Text</textarea>
 359       </td>
 360     </tr>
 361     <tr>
 362       <th>Select</th>
 363       <td>
 364         <select id="slct-1" name="slct-1" class="wi-lightwide">
 365           <option value=""></option>
 366           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 367           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 368           <option value="Timothy Leary">Timothy Leary</option>
 369           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 370         </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 371       </td>
 372     </tr>
 373   </tbody>
 374 </table>
 375
 376 <table class="tbl-horizontal test-plain wi-small-lightwide">
 377   <caption>Small-Lightwide Textarea</caption>
 378   <colgroup> <col class="wi-small-lightwide"> </colgroup>
 379   <tbody>
 380     <tr>
 381       <th>Texteditor</th>
 382     </tr>
 383     <tr>
 384       <td><textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-lightwide">Dies ist ein ganz langer text</textarea></td>
 385     </tr>
 386   </tbody>
 387 </table>
 388
 389 <div class="test-box wi-small">Div .small</div>
 390 <div class="test-box wi-lightwide">Div .lightwide</div>
 391
 392
 393 </div><!-- /.col -->
 394 <div class="col">
 395
 396
 397
 398 <h2>Wide</h2>
 399
 400 <table class="tbl-horizontal test-plain">
 401   <caption>Colums Small &amp; Wide</caption>
 402   <colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup>
 403   <tbody>
 404     <tr>
 405       <th>Label</th>
 406       <td><div class="data">div.data</div></td>
 407     </tr>
 408     <tr>
 409       <th>Label</th>
 410       <td class="data">td.data</td>
 411     </tr>
 412   </tbody>
 413 </table>
 414
 415 <table class="tbl-horizontal wi-small-wide test-plain">
 416   <caption>Table Small-Wide</caption>
 417   <tbody>
 418     <tr>
 419       <td><div class="data">div.data</div></td>
 420     </tr>
 421     <tr>
 422       <td class="data">td.data</td>
 423     </tr>
 424   </tbody>
 425
 426 </table>
 427
 428
 429 <table class="tbl-horizontal test-plain">
 430   <caption>Wide Formelemente</caption>
 431   <colgroup> <col class="wi-small"><col class="wi-wide"> </colgroup>
 432   <tbody>
 433     <tr>
 434       <th>Textfeld</th>
 435       <td>
 436         <input type="text" name="input-type-text-9" class="wi-wide"><button name="bttn9" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 437       </td>
 438     </tr>
 439     <tr>
 440       <th>Textfeld</th>
 441       <td>
 442         <input type="text" name="input-type-text-9" class="wi-wide">mm
 443       </td>
 444     </tr>
 445     <tr>
 446       <th>Textarea</th>
 447       <td>
 448         <textarea name="txtarea1" class="wi-wide">Dies ist ein ganz langer Text</textarea>
 449       </td>
 450     </tr>
 451     <tr>
 452       <th>Select</th>
 453       <td>
 454         <select id="slct9" name="slct-9" class="wi-wide">
 455           <option value=""></option>
 456           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 457           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 458           <option value="Timothy Leary">Timothy Leary</option>
 459           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 460         </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 461       </td>
 462     </tr>
 463   </tbody>
 464 </table>
 465
 466 <table class="tbl-horizontal test-plain wi-small-wide">
 467   <caption>Small-Wide Textarea</caption>
 468   <colgroup> <col class="wi-small-wide"> </colgroup>
 469   <tbody>
 470     <tr>
 471       <th>Texteditor</th>
 472     </tr>
 473     <tr>
 474       <td>
 475         <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-wide">Dies ist ein ganz langer text</textarea>
 476       </td>
 477     </tr>
 478   </tbody>
 479 </table>
 480
 481
 482 <div class="test-box wi-small">Div .small</div>
 483 <div class="test-box wi-wide">Div .wide</div>
 484
 485
 486
 487 </div><!-- /.col -->
 488 <div class="col">
 489
 490
 491
 492 <h2>Wider</h2>
 493
 494 <table class="tbl-horizontal test-plain">
 495   <caption>Colums Small &amp; Wider</caption>
 496   <colgroup> <col class="wi-small"><col class="wi-wider"> </colgroup>
 497   <tbody>
 498     <tr>
 499       <th>Label</th>
 500       <td><div class="data">div.data</div></td>
 501     </tr>
 502     <tr>
 503       <th>Label</th>
 504       <td class="data">td.data</td>
 505     </tr>
 506   </tbody>
 507 </table>
 508
 509 <table class="tbl-horizontal wi-small-wider test-plain">
 510   <caption>Table Small-Wider</caption>
 511   <tbody>
 512     <tr>
 513       <td><div class="data">div.data</div></td>
 514     </tr>
 515     <tr>
 516       <td class="data">td.data</td>
 517     </tr>
 518   </tbody>
 519
 520 </table>
 521
 522
 523 <table class="tbl-horizontal test-plain">
 524   <caption>Wider Formelemente</caption>
 525   <colgroup> <col class="wi-small"><col class="wi-wider"> </colgroup>
 526   <tbody>
 527     <tr>
 528       <th>Textfeld</th>
 529       <td>
 530         <input type="text" name="input-type-text-3" class="wi-wider"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 531       </td>
 532     </tr>
 533     <tr>
 534       <th>Textfeld</th>
 535       <td>
 536         <input type="text" name="input-type-text-3" class="wi-wider">mm
 537       </td>
 538     </tr>
 539     <tr>
 540       <th>Textarea</th>
 541       <td>
 542         <textarea name="txtarea1" class="wi-wider">Dies ist ein ganz langer Text</textarea>
 543       </td>
 544     </tr>
 545     <tr>
 546       <th>Select</th>
 547       <td>
 548         <select id="slct-3" name="slct-3" class="wi-wider">
 549           <option value=""></option>
 550           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 551           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 552           <option value="Timothy Leary">Timothy Leary</option>
 553           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 554         </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 555       </td>
 556     </tr>
 557   </tbody>
 558 </table>
 559
 560 <table class="tbl-horizontal test-plain wi-small-wider">
 561   <caption>Small-Wider Textarea</caption>
 562   <colgroup> <col class="wi-small-wider"> </colgroup>
 563   <tbody>
 564     <tr>
 565       <th>Texteditor</th>
 566     </tr>
 567     <tr>
 568       <td>
 569         <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-wider">Dies ist ein ganz langer text</textarea>
 570       </td>
 571     </tr>
 572   </tbody>
 573 </table>
 574
 575
 576 <div class="test-box wi-small">Div .small</div>
 577 <div class="test-box wi-wider">Div .wider</div>
 578
 579
 580
 581 </div><!-- /.col -->
 582 <div class="col">
 583
 584
 585
 586 <h2>Verywide</h2>
 587
 588 <table class="tbl-horizontal test-plain">
 589   <caption>Colums Small &amp; Verywide</caption>
 590   <colgroup> <col class="wi-small"><col class="wi-verywide"> </colgroup>
 591   <tbody>
 592     <tr>
 593       <th>Label</th>
 594       <td><div class="data">div.data</div></td>
 595     </tr>
 596     <tr>
 597       <th>Label</th>
 598       <td class="data">td.data</td>
 599     </tr>
 600   </tbody>
 601 </table>
 602
 603 <table class="tbl-horizontal wi-small-verywide test-plain">
 604   <caption>Table Small-Verywide</caption>
 605   <tbody>
 606     <tr>
 607       <td><div class="data">Value 2</div></td>
 608     </tr>
 609   </tbody>
 610 </table>
 611
 612
 613 <table class="tbl-horizontal test-plain">
 614   <caption>Verywide Formelemente</caption>
 615   <colgroup> <col class="wi-small"><col class="wi-verywide"> </colgroup>
 616   <tbody>
 617     <tr>
 618       <th>Textfeld</th>
 619       <td>
 620         <input type="text" name="input-type-text-4" class="wi-verywide"><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 621       </td>
 622     </tr>
 623     <tr>
 624       <th>Textfeld</th>
 625       <td>
 626         <input type="text" name="input-type-text-4" class="wi-verywide">mm
 627       </td>
 628     </tr>
 629     <tr>
 630       <th>Textarea</th>
 631       <td>
 632         <textarea name="txtarea1" class="wi-verywide">Dies ist ein ganz langer Text</textarea>
 633       </td>
 634     </tr>
 635     <tr>
 636       <th>Select</th>
 637       <td>
 638         <select id="slct-4" name="slct-4" class="wi-verywide">
 639           <option value=""></option>
 640           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 641           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 642           <option value="Timothy Leary">Timothy Leary</option>
 643           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 644         </select><button name="bttn1" type="button" value="D" title="Details ansehen" class="wi-tiny">W</button>
 645       </td>
 646     </tr>
 647   </tbody>
 648 </table>
 649
 650 <table class="tbl-horizontal test-plain wi-small-verywide">
 651   <caption>Small-Verywide Textarea</caption>
 652   <colgroup> <col class="wi-small-verywide"> </colgroup>
 653   <tbody>
 654     <tr>
 655       <th>Texteditor</th>
 656     </tr>
 657     <tr>
 658       <td>
 659         <textarea name="texteditor-1" id="texteditor-1" class="texteditor wi-small-verywide">Dies ist ein ganz langer text</textarea>
 660       </td>
 661     </tr>
 662   </tbody>
 663 </table>
 664
 665
 666
 667 <div class="test-box wi-small">Div .small</div>
 668 <div class="test-box wi-verywide">Div .verywide</div>
 669
 670
 671
 672 </div><!-- /.col -->
 673 <div class="col">
 674
 675 <h2>Verysmall &amp; Smallest (nur DIVs)</h2>
 676
 677 <div style="clear:left;margin:0 0 1.0em 0;overflow:hidden;">
 678 <h3 class="caption">Div Verysmall</h3>
 679 <div class="test-box wi-small">Div .small</div>
 680 <div class="test-box wi-verysmall">Div .verysmall</div>
 681 </div>
 682 <div style="clear:left;margin-bottom:1.0em">
 683 <h3 class="caption">Div Verysmall</h3>
 684 <div class="test-box wi-small">Div .small</div>
 685 <div class="test-box wi-smallest">Div .smallest</div>
 686 </div>
 687 </div>
 688
 689
 690
 691
 692
 693
 694 </div><!-- /.wrapper -->
 695
 696 </form>
 697
 698 </body>
 699 </html>