all html : Le portail des webmaster
La communauté ALL HTML c'est 58649 membres à ce jour dont 0 inscrits aujourd'hui et 32 depuis une semaine.
Cet article est actuellement publié sur le site.
Article publié le jeudi 21 décembre 2006 par elidris.
Cet article est classé dans les catégories « CSS, XHTML »
Voici mon gabarit de site web centré tout en DIV sans tableaux sur trois colonnes. Valide XHTML 1.0 transitionnel et CSS
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>/* 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; } Plus d'informations sur :