[Article] Un site full CSS - Version imprimable

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Mon Site Full CSS</title>

        <!-- JE LIE LA FEUILLE DE STYLE -->

        <link href="minimal.css" rel="stylesheet" type="text/css" />        

</head>

<body>

<div id="all">

    <!-- LE COTE GAUCHE DE LA PAGE -->

    <div id="main-left">

        <!-- LE LOGO -->

        <div id="logo">

            <div id="large">Minimalistic</div>

            <div id="small">Simple minimalistic CSS Website</div>

        </div>

        <div class="post">

            <div class="meta">

                <div class="day">28</div>

                <div class="month">Décembre</div>

            </div>

            <h1>Mon retour sur JeuWeb</h1>

            <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nunc eget pretium diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis quam aliquam risus. Proin quis massa semper felis euismod ultricies.</p>

        </div>

        <div class="post">

            <div class="meta">

                <div class="day">10</div>

                <div class="month">Janvier</div>

            </div>

            <h1>Nouveau site</h1>

            <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nunc eget pretium diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis quam aliquam risus. Proin quis massa semper felis euismod ultricies.</p>

        </div>

        <div id="credits">

            Minimalistic tous droits réservés - Par Bodeux Thibault<br />

            Merci de ne pas copier ce site sous peine de poursuites judiciaires

        </div>

    </div>

    

    <div id="main-right">

        <h2>Main Menu</h2>

        <ul class="menu">

            <li><a href="#">Accueil</a></li>

            <li><a href="#"class="last">Forum</a></li>

        </ul>

        <h2>Autres</h2>

        <ul class="menu">

            <li><a href="#">25 excellents tutoriaux ...</a></li>

            <li><a href="#">Article sur la préservation ...</a></li>

            <li><a href="#">Sauvons les Pandas</a></li>

            <li><a href="#">La marmelade et ses mystères</a></li>

            <li><a href="#" class="last">Link</a></li>

        </ul>

    </div>

</div>

</body>

</html>

Code :

body {

background:#fff;

font-family:"Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;

color:#333;

font-size:11px;}



#all {

     width:800px;                   /* Ici on défini la taille globale du site */

     margin:30px auto auto;     /* On centre le tout */}



/* LA GAUCHE */

#all #main-left {

     width:575px;                   /* Taille de la partie de gauche */

     float:left;}

#all #main-left #logo {

     width:495px;                   /* On diminue sa taille pour pouvoir decaler */

     float:right;                      /* On le place du coté droit */

     border-bottom:3px dashed #CCC;

     margin:0 0 20px 80px;}

#all #main-left #logo #large {

     font-family:times, Times New Roman, times-roman, georgia, serif;

     color:#444;

     font-size:51px;

     font-weight:700;

     letter-spacing:-2px;          /* Propriété pour espacer les lettres d'un mot */

     padding:0;}

#all #main-left #logo #large:first-letter {

     color:#D2423D;               /* On change la couleur de la première lettre */}

#all #main-left #logo #small {

     font-family:Gill Sans, Verdana;

     font-size:11px;

     margin-top:-10px;            /* Comme sa les deux parties sont plus rapprochées */

     font-weight:700;

     text-transform:uppercase; /* On transforme tout en Majuscules */

     letter-spacing:1.2px;

     padding:0 0 10px;}

#all #main-left .post {

     border-bottom:1px dashed #eee;}

#all #main-left .post .meta {

     width:60px;                     /* Je fixe une largeur Max */

     float:left;                        /* Comme sa je le place a la gauche du H1 */

     text-align:right;

     margin:0 10px 0 0;

     padding:0 10px 0 0;}

#all #main-left .post .day {

     color:#D2423D;               /* Changement de couleur pour fixer l'attention */

     font-size:18px;}

#all #main-left .post .month {

     color:#999;

     font-size:9px;

     text-transform:uppercase;}

#all #main-left .post h1 {

     letter-spacing:-2px;           /* Vu que la police est grande, on serre les lettres */

     font-size:30px;                 /* Cela permet de mettre des h1 plus longs */

     border-bottom:1px dotted #ddd;

     margin:0 0 5px;

     padding:0;}

#all #main-left .post p {

     padding-left:80px;            /* On le décale par rapport a la date */

     font-size:12px;

     text-align:justify;             /* On justifie le texte (ici cela rend mieux) */

     margin:0 0 20px;}

#all #main-left #credits {

     width:495px;                  /* On lui fixe une taille pour le décaller */

     float:right;                     /* Idem que pour le logo */

     background:#eee;           /* On donne du relief */

     border-bottom:10px solid #fff;

     color:#aaa;                   /* Couleur sombre pour ne pas attirer l'attention du visiteur */

     text-align:right;

     padding:3px 10px;}



/* LA DROITE */

#all #main-right {

     width:200px;                  /* Taille Maximum */

     float:left;                       /* On place cela a droite du site */

     margin:0 0 0 25px;}

#all #main-right h2 {

     font-size:14px;               /* Les titres des menus */

     letter-spacing:-1.5px;

     margin:0 0 5px;}

#all #main-right ul {

     list-style:none;               /* On enleve les puces */

     margin:0 0 10px;            /* Pour separer chacun des menus */

     padding:0;}

#all #main-right li a {

     border-bottom:1px dotted #999;

     color:#555;

     text-decoration:none;

     display:block;                /* Effet block que j'apprécie */

     padding:2px 0 2px 5px;}

#all #main-right li a:hover {

     background:#eee;          /* Bel effet qui remplace javascript */}

#all #main-right li .last {

     border:none;                 /* On evite une ligne inutile et inestéthique */}