Gabarit de site web en CSS sur trois colonnes
Le fichier index.html<!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">
<head>
<title>Titre de votre site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" media="all" type="text/css" />
</head>
<body>
<div id="document">
<div id="entete">
<div id="cadre_haut" align="left"><p>Titre de votre choix (l'image doit
s'appeler : images/image_haut_1.png et faire 960x22)</p></div>
<div id="cadre_bas" align="left"><p>Site centré réalisé sans tableaux, tout
en DIV sur 3 colonnes, compatible tous navigateurs<br /><br />Texte de votre choix (l'image
doit s'appeler : images/image_bas_1.png et faire 960 de longueur la hauteur dependra du
texte que vous mettez ici)
<br /><br />voilà, voilà !!!
</p></div>
</div>
<div id="colonne1">
<div class="cadre_ghaut"><p>images/gauche_haut.png</p></div>
<div class="cadre_gbas">images/gauche_bas.png
<ul><li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul></div>
</div>
<div id="corps">
<div class="cadre_chaut"><p>images/haut_central.png</p></div>
<div class="cadre_cbas"><p><br /><br />images/bas_central.png<br /><br
/>Texte de votre choix (l'image doit s'appeler : images/bas_central.png et faire 600 de
longueur la hauteur dependra du texte que vous mettez ici)<br /><br />voilà, voilà !!!<br
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
N'oubliez pas d'aller consulter le fichier style.css qui gere entierment l'aspect du
site.<br />essayez de modifier des choses et de regarder le resultat,<br />c'est comme ça
que l'on apprends le mieux<br /><br /><br />Je ne suis qu'un amateur donc je ne sais pas si
ce gabarit ne comporte pas d'erreur mais en tout cas il fonctionne avec tous les
navigateurs^^<br /><br /><br /><br /><br /><br /><br /><br /><br /></p></div>
</div>
<div id="colonne2">
<div class="cadre_dhaut"><p>images/droit_haut.png</p></div>
<div class="cadre_dbas"><p>images/droit_bas.png<br />
<br />Menu droit 1
<br />Menu droit 2
<br />Menu droit 3
<br />Menu droit 4
</p></div>
</div>
</div>
</body>
</html>Le fichier style.css:
/* CSS Document */
* { padding: 0; margin: 0; border: 0; }
body { background-color:#fefefe; font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color:#000; }
/* ################ caracteristiques des liens par defaut ################ */
a:link {background-color : inherit; color : #000; text-decoration : none; font-family : Verdana, Arial, Helvetica, sans-serif; }
a:visited { text-decoration : none; background-color : inherit; color : #000; font-family : Verdana, Arial, Helvetica, sans-serif;}
a:hover { text-decoration : underline;
background-color : inherit; color : #9836e2; font-family : Verdana, Arial, Helvetica, sans-serif; }
a:active { text-decoration : none;
background-color : inherit; color : #000; font-family : Verdana, Arial, Helvetica, sans-serif; }
/* ############## CADRE DU HAUT ############### */
div#cadre_haut {background : url(images/image_haut_1.png) no-repeat bottom left; padding-bottom : 2px; width : 960px; height: 22px; }
div#cadre_bas {background : url(images/image_bas_1.png) no-repeat bottom left;
padding-bottom : 30px; width : 960px; }
div#cadre_haut p {padding-left : 400px; padding-top : 5px; font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; font-weight : normal; font-style : italic; text-decoration:underline; }
div#cadre_bas p {padding-left : 50px; padding-top : 10px; font-size : 10px; font-weight:normal; font-style : italic; font-family : Verdana, Arial, Helvetica, sans-serif; }
/* ############## CADRE GAUCHE ############### */
.cadre_ghaut {background : url(images/gauche_haut.png) no-repeat bottom left; padding-bottom : 5px; width : 200px; }
.cadre_gbas {background : url(images/gauche_bas.png) no-repeat bottom left; padding-bottom : 50px; padding-top : 2px; width : 200px; }
.cadre_ghaut p {margin-left: 30px;padding-top : 4px; font-size : 11px; font-weight : normal; font-style : italic; font-family : Verdana, Arial, Helvetica, sans-serif; text-decoration:none; }
.cadre_gbas p {margin : 0 15px 0 25px;
font-size : 10px; font-family : Verdana, Arial, Helvetica, sans-serif; font-weight : normal; }
ul { margin : 10px 0 0 40px; line-height:12px; list-style-image: url(images/puce_menu.png); padding-left:3px; font-style : italic; font-family : Verdana, Arial, Helvetica, sans-serif; }
li { font-size : 12px; }
/* ############## CADRE CENTRALE ############### */
.cadre_chaut {background : url(images/haut_central.png) no-repeat bottom left; padding-bottom : 4px; width : 600px; }
.cadre_cbas {background : url(images/bas_central.png) no-repeat bottom left; padding-bottom : 30px; width : 600px; }
.cadre_chaut p{padding-top : 4px; font-size : 12px; font-weight : normal; font-family : Verdana, Arial, Helvetica, sans-serif; font-style : italic; text-align:center; }
.cadre_cbas p{margin : 0 25px 20px 25px; font-size : 11px; font-family : Verdana, Arial, Helvetica, sans-serif; font-weight : normal; text-align:center;}
/* ############## CADRE DE DROITE ############### */
.cadre_dhaut {background : url(images/droit_haut.png) no-repeat bottom right; padding-bottom : 4px; width : 160px; }
.cadre_dbas {background : url(images/droit_bas.png) no-repeat bottom right; padding-bottom : 50px; padding-top : 2px; width : 160px; }
.cadre_dhaut p {padding-left : 30px; padding-top : 6px; font-size : 9px; font-weight : normal; font-style : italic; text-decoration:none; }
.cadre_dbas p {padding-left : 25px; padding-top : 5px; font-size : 10px; font-weight : normal; font-style : italic; }
/* ######################## CONTENEURS DU SITE ###################### */
#document { position:absolute; width: 960px; background-color:inherit; height: auto; left: 50%; margin-left: -480px; margin-top: 8px; color:#000; }
#entete { width: 960px; height: 130px; background-color:inherit; color:#000; }
#colonne1 { left: 0; }
#corps { margin: 0 200px; background-color: #fff; color:#000;}
#colonne2 { right: 0; }
#colonne1 { position: absolute; width: 200px; background-color: #fff; top: 130px; color:#000; }
#colonne2 { position: absolute; width: 160px; background-color: #fff; top: 130px; left: 800px; color:#000; } Voilà, je pense que ça pourras aider les débutants,
vous pouvez telecharger le dossier complet ici, comme ça vous aurez les images avec:
Fichier rar
Complément d’informations
Article publié le par elidris.