<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test du Framework CSS BluePrint</title> <!-- Framework CSS --> <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="perso2_2.css" type="text/css" media="screen, projection"> <!--[if IE]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> <script type="text/javascript" charset="utf-8"> function removegrid () { var div = document.getElementById('main'); div.style.background="none"; } function applygrid () { var div = document.getElementById('main'); div.style.background="url(grid.png)"; } </script> </head> <body> <div id="main"> <center>Background Image: <a href="#" onclick="removegrid();return false;">Remove Grid</a> | <a href="#" onclick="applygrid();return false;">Apply Grid</a></center> <div class="container "> <div class="span-24"> <div class="accessibar"> <ul> <li><a href="#content" title="Aller directement au contenu">Aller au contenu</a></li> <li><a href="#content" title="Aller directement au menu">Aller au menu</a></li> <li><a href="#content" title="Afficher le plan du site">Plan du site</a></li> </ul> </div> </div> <div class="span-24 topbar"> <div class="span-16"> <div class="titlebar"> <h1>Titre de la page</h1> <h2>Slogan de la page</h2> </div> </div> <div class="span-7 last"> <div class="quicklinks"> <form> <input type="text" name="value_to_search"><input type="submit" name="submit_search" value="Ok"> <ul> <li><a href="#" title="">RSS</a></li> <li><a href="#" title="">RSS for comments</a></li> </ul> </form> </div> </div> </div> <div class="span-11 colborder"> <div class="edito"> <h3>Edito</h3> <p>Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p> </div> </div> <div class="span-12 last"> <div class="article"> <p>Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p> </div> </div> <hr class="clear" /> <div class="span-8"> <div class="category-1"> <h3>Category 1</h3> <dl> <dt><dfn>Post 1</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 2</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 3</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 4</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 5</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 6</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> </dl> </div> </div> <div class="span-8"> <div class="category-2"> <h3>Category 2</h3> <dl> <dt><dfn>Post 1</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 2</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 3</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 4</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 5</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 6</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> </dl> </div> </div> <div class="span-8 last"> <div class="category-3"> <h3>Category 3</h3> <dl> <dt><dfn>Post 1</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 2</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 3</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 4</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 5</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> <dt><dfn>Post 6</dfn> Author: xxx, Date: dd-mmm-yyyy </dt> <dd>Excerpt</dd> </dl> </div> </div> <br class="clear" /> <div class="span-24"> <div class="footer"> Footer line1<br /> Footer line2<br /> Footer line3 </div> </div> </div> </div> </body> </html>