Comment faire un design extensible (sobre)

Dans ce nouveau tutoriel vidéo, vous allez apprendre à faire un design extensible (c’est à dire que le site s’adapte à l’écran, et occupe tout l’espace disponible contrairement à un design fixe ou il y a des marges sur les bords par exemple). Cela a des avantages mais aussi des inconvénient. L’avantages principale, c’est que tous l’écran est utilisé, et sa s’adapte à la résolution du visiteur. L’inconvénient est que l’on ne peut pas faire de design avec énormément d’image (car les images ne s’agrandissent pas … ou alors sa deviendrait flou avec des gros pixels). Voila un exemple de la page que nous allons créer : cliquez ici

Je pense que vous avez compris l’essentiel dans la vidéo. Pour faire un design extensible, il faut exprimé ces valeurs en pourcentage dans le CSS (le plus important étant d’exprimer la largeur en pourcentage, la longeur s’adapte en fonction du texte). Il faut faire quelques calculs, pour évité de ce retrouvé avec des 110% ce qui serait pas top du tout ! Autre petit détail, il faut une banniere assez simple avec des images qui se répète sur les cotés, comme ça on peut rusé pour faire une banière qui prend toutes la largeur de l »écran (on peu aussi faire une bannière avec un fond noir et faire une div banniere avec un background noir) ! Je vais vous fournir tout les codes, sa vous évitera de les recopié, mais attention je ne garantie rien ! Je vous présente ma méthode mais rien ne dit qu’elle est infaillible.

La page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="design" href="images/design.css" />
   </head>
 
 <body>
       
       <div id="banniere">
       <a href="#"><img src="images/banniere.jpg" alt="banniere" /></a>
       </div>
       
       <div id="menu">
		<div class="sous_menu">
			<h3 class="titre_menu">Menu 1</h3>
			<ul class="liste">
				<li><a href="#">lien</a></li>
				<li><a href="#">lien</a></li>
				<li><a href="#">lien</a></li>
			</ul>
		</div>
		
		<div class="sous_menu">
			<h3 class="titre_menu">Menu 2</h3>
			<ul class="liste">
				<li><a href="#">lien</a></li>
				<li><a href="#">lien</a></li>
				<li><a href="#">lien</a></li>
			</ul>
		</div>
       
       </div>
       
       <div id="contenu">
       		<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
		<p>Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.</p>
		<p>Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</p>
		<p>Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.</p>
		<p>Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.</p>
       
       </div>
       
       <div id="pied_page">
              		<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
       </div>
       
   </body>
</html>

Et le css :

body
{
	margin:0;
	padding:0; 
	background-color: #333333; 
}

#banniere
{
	text-align:center; 
	background-image:url("bg.gif"); 
	background-repeat: repeat-x; 
	margin-bottom:1%;
}

#menu
{
	margin-left:1%; 
	width:16%;
	background-color: #444444; 
	border: 1px solid #222222; 
	float:left;
	padding: 5px; 
}
.liste
{
	list-style-image:url("puce.png"); 
}

#contenu
{
	margin-left: 20%; 
	width: 78%; 
	background-color: #444444; 
	border: 1px solid #222222; 
	padding: 5px; 
	margin-bottom:1%; 
}

#pied_page
{
	width:97%; 
	background-color: #444444; 
	border: 1px solid #222222; 
	padding: 5px; 
	margin-left:1%; 
}
a img
{
	border:none;
}

.titre_menu
{
	text-align:center; 
	color:#222222; 
}
a:hover
{
	color:green;
	font-style:italic;
}
a:visited
{
	color:#ccc; 
}
a:visited:hover
{
	color:green; 
}

Voila vous avez toutes les informations pour faire votre site internet avec un design extensible. Ne vous contentez pas de copier/coller mes codes, modifier les c’est comme sa qu’on apprend ! Et surtout, essayer d’être aux norme W3C, c’est important, donc faites des test régulièrement (d’autant plus que sa peut vous aidez a trouvé ce qui ne fonctionne pas correctement !). Si vous avez des questions, laissez un commentaire et j’y répondrait du mieux que je pourrais !

16 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. many

    bonjour

    ce tuto est très simpa
    mais ma question est:

    puis je remplacer les deux menu par mon propre menu déroulant qui en fait est un menu avec un background et il est horizontal ce qui viendrais a dire qu’il faut que je supprime carrément la dive du menu déjà existant dans ce tuto
    en fait le menu c’est celui ci

    http://www.cireasy.com/menu-deroulant/menu-deroulant-en-css/

    merci pour ta réponse

  2. Arketype-13

    Bonjour, J’ai quelques problèmes avec le menu et le contenu, ils ne sont pas au même même niveau. J’ai essayé de le refaire tous seul (sans copier/coller) et à chaque fois, mon menu se trouve au-dessus ou en dessous de mon paragraphe conteneur. J’aimerai quelque explication si c’est possible.