Reprenons au début.
Ton site semble se composer d'un entête de page, d'une navigation horizontale, d'une navigation verticale en regard du contenu principal. Je rajouterais personnellement un pied de page. Le tout étant centré dans les navigateurs quelques que soient leur résolution grâce à un conteneur englobant tous les autres éléments.
Au total on dénombre plusieurs éléments unique dans cette page que sont identifés dans le html et déclarés dans la feuille de style:
#global{}/*centrage*/
#header{}/*entête de la page*/
ul#menutop{}/*navigation horizontale avec une liste*/
#navigation{}/*navigation verticale*/
#centre{}/*contenu*/
#footer{}/*infos de copyright par exemple*/
<div id="global">
<div id="header">
<h1>Titre</h1>
</div>
<ul id="menutop">
<li><a href="...">Accueil</a></li>
<li><a href="...">Produits</a></li>
<li><a href="...">Catalogue</a></li>
<li><a href="...">Forum</a></li>
<li><a href="...">Contacts</a></li>
</ul>
<div id="navigation">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu6</li>
</ul></div>
<div id="centre">
<h2>Voici à quoi va ressembler le site</h2>
<p>contenu de la page !</p>
</div>
<div id="footer"><p>copyright</p></div>
</div>
Pour le centrage, utilisons les marges automatiques comme indiquées dans le tutoriel. Notes que pour que cela fonctionne avec IE il faut rajouter à l'élément body une instruction de centrage du texte et rétablir l'alignement classique de global. Pour centrer quelque que soit la résolution on peut utiliser une largeur en pourcentage:
body{text-align:center;}
#global{
width:90%;
margin:0 auto;
background-color:#eee;
text-align:left;}
Pour le header: rien à faire à part lui donner une hauteur (height).
La navigation horizontale: on peut utiliser une liste que l'on présente horizontalement grâce à css (display:inline, d'autres possibilités existe voire
Faire un menu de navigation en CSS):
ul#menutop{
height:25px;
background-color:#3f3f3f;
text-align:right;}
ul#menutop li{
display:inline;/*les éléments de liste li sont affichés en ligne*/
list-style-type:none;/*les puces ont disparues*/
padding:0 5px;/*un peu d'air à droite et à gauche}
La navigation verticale: une nouvelle fois une liste à laquelle on donne une largeur et que l'on fait flotter à gauche (
propriété float), tu insères ta liste dans cette div définie par:
#navigation{
width:160px;
float:left;
background-color:#ccc;}
Ton contenu principal doit occupé le reste de l'espace disponible moins la largeur de #navigation. Une marge externe gauche d'au moins sa largeur suffit:
#centre{
margin-left:160px;}
Le pied de page que je rajoute est muni d'une propriété css clear adaptée à l'utilisation des flottants. l'explication est dans
la faq:
#footer{
clear:both;
background-color:#000;
color:#fff;}
C'est à peu près tout pour l'organisation globale de la page avec les flottants et le centrage. D'autres possibilités existent avec divers modes de postionnement. Ils sont dans les
gabarits de Raphaël.
Pour te sentir à l'aise avec les différents types de positionnement il est indispensable de bien assimiler les différents principes comme ils sont présentés sur Openweb:
Initiation au positionnement CSS : 1.flux et position relative
Initiation au positionnement CSS : 2.position float
Initiation au positionnement CSS : 3. position absolue et fixe
avec ce condensé sur Alsacréations:
Comprendre le positionnement des balises en CSS.
Voilà une possibilité. Bon courage.
C'est la seule chose qui me gêne pour pouvoir continuer mon projet de site.
,
