body {
margin: 10px;
padding: 0;
font: 0.8em "Trebuchet MS", helvetica, sans-serif;
text-align: center;
background-color: #DDEEAA;}

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

.menu li {
float: left;
margin-bottom: 30px;
}

.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;
}
div#conteneur
{
width: 750px;
margin: 0 auto;
text-align: left;
background: #ffffff;
border: 1px solid #000000;
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */

div#header
{
height: 130px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 40px;
background-image: url(/alkablog_header.jpg);
}
/* On définit la hauteur de la partie header, contenant le titre du site */

pre
{
overflow: auto;
}

/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
* html pre
{
width: 636px;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
div#contenu
{
padding: 0 30px 0 30px;
margin-right: 150px;
}
div#contenu h2
{
padding-top:25px;
padding-left: 25px;
line-height: 25px;
font-size: 1.4em;
background: url("/petit_logo.png") no-repeat left bottom;
color: #333333;
border-bottom: 1px solid #000000;
}
div#contenu h3
{
margin-left: 15px;
padding-left: 5px;
border-bottom: 1px solid #9b2;
border-left: 3px solid #9b2;
color: #9b2;
}
div#contenu p
{
text-align: justify;
text-indent: 2em;
line-height: 1.7em;
}
div#contenu a
{
color: #8a0;
}

div#contenu a:hover
{
color: #9b2;
}
p#footer
{
margin: 0;
padding-right: 10px;
line-height: 30px;
text-align: right;
color: #333333;
}
pre
{
overflow: auto;
background: #dea;
border: 2px solid #9b2;
padding: 5px 0 0 5px;
font-size: 1.2em;
}
pre span
{
color: #560;
}
pre span.comment
{
color: #b30000;
}
table#header {
background-color: #000000;
color: #FFFFFF;
}
form { margin: 0px; }
div#contenu table {
clear: left;
}
div#colonne_droite {
right:0;
width: 150px;
float: right;
font-size: 11px;
}
div#colonne_droite h3 {
font-size: 12px;
font-weight: bold;
}
ul#stats {
margin-left: 0px;
padding-left: 0px;
}
/* MENU */
td.item { background: #F5F5F5; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; }
td.item2 { background: #DDDDDD; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; }
td.itemcat { background: #666666; color: #FFFFFF; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; }

/* PROFILE PAGE */
table.profile { border: 1px solid #AAAAAA; }
td.profile1 { background: #DDDDDD; font-weight: bold; border-bottom: 1px solid #AAAAAA; padding: 6px; padding-bottom: 0px; }
td.profile2 { background: #F5F5F5; padding: 6px; line-height: 17px; color: #333333; }

/* TABLES */
td.content { padding: 10px; padding-top: 2px; padding-right: 0px; line-height: 17px; color: #333333; }
td.list { background: #FFFFFF; padding: 7px; border: 1px solid #AAAAAA; border-top: none; color: }
td.header { border: 1px solid #AAAAAA; padding: 7px; padding-bottom: 7px; background: #DDDDDD; font-weight: bold; }
td.box { padding: 7px; line-height: 17px; padding-left: 0px; padding-top: 0px; }
td.empty { background: #F5F5F5; padding: 7px; border: 1px solid #AAAAAA; }
td.entry1 { border-right: 1px solid #DDDDDD; padding: 5px; padding-right: 10px; padding-bottom: 0px; }
td.entry2 { padding: 5px; padding-left: 10px; padding-bottom: 0px; }
td.advanced { padding: 5px; background: #EEEEEE; border-bottom: 1px solid #AAAAAA; }
div.float { float: left; padding-right: 1px; }
table.box { border: 1px solid #666666; border-bottom: 2px solid #666666; background: #F5F5F5; }

/* ALTERNATING LISTS */
td.list1a { background: #FFFFFF; padding: 7px; border: 1px solid #CCCCCC; border-top: none; border-right: none; }
td.list1b { background: #FFFFFF; padding: 7px; border: 1px solid #CCCCCC; border-top: none; }
td.list2a { background: #F5F5F5; padding: 7px; border: 1px solid #CCCCCC; border-top: none; border-right: none; }
td.list2b { background: #F5F5F5; padding: 7px; border: 1px solid #CCCCCC; border-top: none; }

/* OTHER FONTS */
font.disabled { color: #666666; }
font.gray { color: #666666; }
font.stats { font-size: 7pt; font-family: arial, verdana, tahoma; }
font.url { font-size: 9pt; font-weight: normal; }

/* INPUT STYLES */
input.button { background-color: #DDDDDD; padding: 3px; font-size: 9pt; font-weight: bold; font-family: verdana, arial, tahoma; }
input.sbutton { background-color: #DDDDDD; font-size: 8pt; font-weight: bold; font-family: verdana, arial, tahoma; }
input.text { font-family: arial, verdana, tahoma; }
textarea, select { font-family: arial, verdana, tahoma; margin-top: 1px; font-size: 10pt; }
select.small { font-size: 8pt; margin-left: 4px; }
div#blogposttitle {
background: url("/icone-billet.png") no-repeat left bottom;
padding-left: 22px;
}

div#contenu_2
{
padding: 0 30px 0 30px;
margin-right: 0px;
}
div#contenu_2 h2
{
padding-top:25px;
padding-left: 25px;
line-height: 25px;
font-size: 1.4em;
background: url("/petit_logo.png") no-repeat left bottom;
color: #333333;
border-bottom: 1px solid #000000;
}
div#contenu_2 h3
{
margin-left: 15px;
padding-left: 5px;
border-bottom: 1px solid #9b2;
border-left: 3px solid #9b2;
color: #9b2;
}
div#contenu_2 p
{
text-align: justify;
text-indent: 2em;
line-height: 1.7em;
}
div#contenu_2 a
{
color: #8a0;
}

div#contenu_2 a:hover
{
color: #9b2;
}
div#contenu_2 table {
clear: left;
}
[/code]

et HTML

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XXXXXXXXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="/style_alkablog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="conteneur">
 <div id="header">
 </div>
 <ul class="menu">
   <li>MENU</li>
 </ul>
 <div id="colonne_droite">
   <h3>XXXXXX</h3>
   <p>&nbsp;    </p>
   <h3>XXXXXX</h3>
   <p>&nbsp;    </p>
   <h3>XXXXXX </h3>
   <p>&nbsp;    </p>
 </div>
 <div id="contenu">
   XXXXXXXXXXXXXX  </div>
 <p id="footer">XXXXXXXXXXX</p>
</div>
</body>
</html>

div#header
{
height: 130px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 40px;
background-image: url(/alkablog_header.jpg);
}

UL {
    WIDTH: 100%; LIST-STYLE-TYPE: none; margin:0px; padding:0px;
}

UL {
    WIDTH: 80%; LIST-STYLE-TYPE: none;
}