A. But du Tuto.
Créer un site XHTML/CSS valide WC3 en n'utilisant que du CSS ^^
B. Prérequis.
- COnnaissance en XHTML/CSS
- Votre attention
C. Au travail !
1. La page en XHTML.
2. Le CSS
3. Explications
Je pense que le code est plus explicite qu'autre chose.
Posez donc vos questions et j'y répondrai avec plaisir ^^
La page est disponible ici : www.erandar.com/project/minimalistic/index.html
Certe, c'est très simple comme site, mais voyez que seulement avec le CSS on sait rendre quelque chose de tout à fait convenable ^^
Je tiens a préciser que le site est tout de même à moi, et qu'il sert d'exemple et de nid d'idée pour tous les webdesigner ^^
Si vous voulez l'utiliser, MP moi ^^
4. Avantages des sites "Full" CSS
- Le principal avantage d'un site comme celui-ci est sa vitesse de chargement :
14.4K : 5.20 seconds
28.8K : 2.80 seconds
33.6K : 2.46 seconds
56K : 1.63 seconds
ISDN 126K : 0.78 seconds
T1 1.44Mbps : 0.43 seconds
- Sa facilité d'entretien (code et non image donc pas de retouche)
Créer un site XHTML/CSS valide WC3 en n'utilisant que du CSS ^^
B. Prérequis.
- COnnaissance en XHTML/CSS
- Votre attention
C. Au travail !
1. La page en XHTML.
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 */}3. Explications
Je pense que le code est plus explicite qu'autre chose.
Posez donc vos questions et j'y répondrai avec plaisir ^^
La page est disponible ici : www.erandar.com/project/minimalistic/index.html
Certe, c'est très simple comme site, mais voyez que seulement avec le CSS on sait rendre quelque chose de tout à fait convenable ^^
Je tiens a préciser que le site est tout de même à moi, et qu'il sert d'exemple et de nid d'idée pour tous les webdesigner ^^
Si vous voulez l'utiliser, MP moi ^^
4. Avantages des sites "Full" CSS
- Le principal avantage d'un site comme celui-ci est sa vitesse de chargement :
14.4K : 5.20 seconds
28.8K : 2.80 seconds
33.6K : 2.46 seconds
56K : 1.63 seconds
ISDN 126K : 0.78 seconds
T1 1.44Mbps : 0.43 seconds
- Sa facilité d'entretien (code et non image donc pas de retouche)
