No prob ;)
Alors, le plus dérangeant dans un design en tranches, c'est qu'on oublie souvent que l'utilisateur myope va faire CTRL+molette, et foutre en l'air la belle mise en page... xD
Pour le header, s'il ne change pas d'une page à l'autre tu peux simplement mettre une balise <img> seule.
Pour le menu, une <ul>, car sa sémantique lui permet de jouer le rôle de menu (eh oui, désolé hani), et pour le corps du texte, une <div> (une seule) qui contiendra tout ce qui a besoin d'y être, <h2>, <h3>, <p>, <form>, <img>, etc.
Et pour le footer, un <p> si tu n'as pas besoin de mettre des éléments de type block à l'intérieur, ou bien une <img>, ou sinon une autre <div>.
Bien sûr, au début la <ul> apparaît au-dessus de la <div> principale. C'est là que le CSS intervient. Il y a plusieurs solutions, voici ma préférée :
il s'agit de la rendre flottante avec un
float : left, ce qui implique de mettre un
clear : both sur le footer pour qu'il ne se retrouve pas recouvert par une partie de la <ul>. Du coup, le texte de la <div> va reprendre sa place sous la <ul> lorsque celle-ci est trop courte. Solution : mettre un
float : left sur la <div> aussi. Ou mieux : un
float : right, car si on est attentif au coup du CTRL+molette on évite de faire trop de largeurs fixes, donc on met des % et du coup ça colle pas exactement. Le
float : right permet alors de faire coller la <div> au bord droit du body.
Ca donnerait un truc dans ce genre-là (c'est vraiment du très basique, c'est un "squelette") :
<html>
<head>
<style>
* {
padding : 0;
margin : 0;
}
body {
background : black;
color : white;
width : 950px; /* par exemple */
}
ul#nav {
float : left;
width : 33%;
background : gray;
}
ul#nav li a {
display : block; /* pour que le hover soit sur toute la case */
}
ul#nav li a:hover {
color : red;
}
div#main {
float : right;
width : 66%;
background : silver;
}
p#footer {
clear : both;
width : 100%;
text-align : center;
background : gray;
}
</style>
</head>
<body>
<img id="header" height="100px" width="950px" alt="title" />
<ul id="nav">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul><!-- nav -->
<div id="main">
<h2>babla</h2>
<p>machin</p>
<p>truc</p>
<h2>reblabla</h2>
<p>remachin</p>
<p>retruc</p>
</div><!-- main -->
<p id="footer">
footer
</p><!-- footer -->
</body>
</html>
