ALL HTML - Gabarit de site web en CSS sur trois colonnes

retour

Gabarit de site web en CSS sur trois colonnes

Article publié le dimanche 10 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>

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

Plus d'informations :

Intoxitation

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le vendredi 05 janvier 2007 à 14 h 08 par Archron: Très beau travail...
Commentaire publié le dimanche 07 janvier 2007 à 02 h 04 par koala64: Salut,

Quelques petits points à noter...

Tu as mis :
<link href="style.css" rel="stylesheet" media="all" type="text/css" />media="all" est à éviter car peu de personnes s'occupent d'afficher correctement leur site sur tous les supports existants. media="screen" ou media="screen, projection" suffit.

Tous les <br /> de ton texte peuvent être évités. Sans doute est-ce pour l'exemple mais c'est une mauvaise habitude; des marges ou du remplissage suffit.

Pourquoi avoir mis <div class="cadre_chaut"><p>images/haut_central.png</p></div> ? Si une image doit être incorporée un seul conteneur suffit et vu que ce sera certainement un titre, une balise de type hn aurait été préférable.

L'attribut align est déprécié. Le positionnement doit s'effectuer via CSS.

Pourquoi t'être servi de classes plutôt que d'identifiants vu que chacune est unique ? (Ce n'est pas un reproche, ça peut avoir son utilité)

Tes menus gauche et droit n'ont pas le même rendu et pour cause, le menu droit devrait être une liste et non un paragraphe. La div qui les contient est inutile.

Dans un soucis d'accessibilité, les polices ne doivent pas être affichées en px mais de préférence en em.
(voir cet article pour plus de précisions)
-> Les polices ne sont pas redimensionnables sous IE.

Une taille de 960px est encore considérée comme une erreur, les résolutions 800*600 n'étant à ce jour toujours pas négligeables.

Sur tes liens, certaines propriétés CSS sont redondantes et pas toujours utiles (ex. : font-family)
Aucun navigateur ne change la police définie dans body. Vu que tu définis aussi color dans body, toutes les autres définitions de color se trouvant dans ton CSS sont inutiles.
Vu qu'un fichier CSS est limité à 20ko, il est souhaitable de ne mettre que le strict nécessaire, ne serait-ce que pour la maintenance ou le poids.

Lorsqu'on définit une puce de type image, on doit aussi définir le type de la puce de base, des fois que l'image soit indisponible.

Mon plus gros regret : Aucune explication dans ta publication. Un débutant en a pourtant besoin lorsqu'il tente ses premières mises en page.

Voilà... Désolé de descendre ta publication ainsi mais c'est plus pour que ça puisse te servir pour la suite, tout comme à ceux qui te lisent. Cette démarche d'entraide reste malgré tout à ton honneur, tout le monde ne s'y aventure pas. ;)

Bien que la mise en page ne soit pas tout à fait la même, voici quand même le type de publication que j'aurais préféré voir :

http://www.allhtml.com/articles/detail/533 (3 colonnes fluides)
Commentaire publié le vendredi 12 janvier 2007 à 00 h 58 par elidris: Bonjour koala64,

tout d'abord merci pour ces nombreux conseils que je ne manquerais pas d'appliquer la prochaine fois.

* pour media="all" je ne savais pas !
* les <br /> sont bien sur de trop^^

* tu veux dire que j'aurais du faire :
<div class="cadre_chaut"><hn>...Titre...</hn></div>
plutot que
<div class="cadre_chaut"><p>...Titre...</p></div> ?

* en effet le Align n'a rien a faire ici^^
* j'ai utilisé des classes pour les menus droit,central et gauche pour pouvoir les utiliser comme une sorte de modules et en mettre plusieurs à la suite avec un contenu different bien sur.

* je cite : "Tes menus gauche et droit n'ont pas le même rendu et pour cause, le menu droit devrait être une liste et non un paragraphe. La div qui les contient est inutile."
ça je ne comprend pas ce que tu veux dire ?

* la prochaine fois tout en "em"...promis;)
* 800x600 non mais je suis en 1280x1024, tu imagines 800 au lieu de 960, il ne reste plus rien du site....je vais essayer de faire des efforts^^

* je cite : "Sur tes liens, certaines propriétés CSS sont redondantes et pas toujours utiles "
quoi te dire, tout est exacte, se seras corrigé

* ok pour les puces !

merci pour toutes ces remarques, pour ce qui est des commentaires, malheureusement je ne crois pas qu'on puisse modifié une publication en ligne...

c'etait tres constructif, merci^^

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans nos forums XHTML - HTML - CSS, XHTML - HTML - CSS.

11/03/2010 à 20 h 26 Problème avec l'utilisation de lightbox sur une area shape (0 réponse)
10/03/2010 à 11 h 05 IE6 et hauteur automatique (2 réponses)
10/03/2010 à 09 h 55 Accéder à un dossier via l'introduction de son nom dans un formulaire (6 réponses)
08/03/2010 à 22 h 16 Accès à une page Web après saisie d'une date (0 réponse)
08/03/2010 à 19 h 02 Accès à un signet dans page C incluse dans une iFrame de page B (1 réponse)

all html : Le portail des webmaster

Gabarit de site web en CSS sur trois colonnes

VOS COMMENTAIRES ...

Forums de discussions associés

Liens sponsorisés