@ ElMoustiko
Pour le multi colonnage, c'est que je ne voyais qu'une colonne structurée par des divs, bien que la restitution graphique en laisse paraître deux.
Je viens de refaire succintement le tuto de base et chez moi ça marche, certes pas sur Mac mais si quelq'un peut tester ce code sur Safari, je penses que cela devrait marcher comme le tuto de ElMoustiko.
Je ne vois pas où mais il doit y avoir un code mal former quelque part dans l'exemple du post initial, mais j'ai plus l'habitude des éléments en majuscule
. Il faudrait également reduire la largeur des éléments li du menu et la taille des caractères vu le nombre d'item du menu à mon avis.
HTML et CSS:
<!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">
<head>
<title>
Titre de page à changer
</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
*{
padding:0;
margin:0;
}
body{
text-align: center ;
font: 1em 'Trebuchet MS', helvetica, sans-serif ;
background: #214694 ;
}
p{
margin:0 0 .8em 0;
}
#container{
width:770px;
margin:10px auto;
border: solid 1px #fff;
background:#fff;
text-align:left;
}
h1#header{
height:150px;
background:#ccc;
}
#page{
margin-left:100px;
padding:1em;
}
ul#menu
{
height: 35px ;
width:100%;
margin: 0 ;
padding: 0 ;
background: #214694;
list-style-type: none ;
}
ul#menu li
{
float: left ;
text-align: center ;
}
ul#menu li a
{
width: 100px ;
line-height: 35px ;
font-size: 1em ;
font-weight: bold ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #dea ;
background:#214694;
}
ul#menu li a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}
p#footer{
clear:both;
padding:1em;
background:#ccc;
margin:0;
}
-->
</style>
</head>
<body>
<div id="container">
<h1 id="header">
Mon titre
</h1>
<ul id="menu">
<li>
<a href="news.php">News</a>
</li>
<li>
<a href="pilotes.php">Les Pilotes</a>
</li>
<li>
<a href="calendrier.php">Calendrier</a>
</li>
<li>
<a href="resultats.php">Resultats</a>
</li>
<li>
<a href="gallery.php">Photos</a>
</li>
<li>
<a href="forum/index.php">Forum</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
</ul>
<div id="page">
<h2>
Ut vitae mi
</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Ut vitae mi. Praesent mollis quam non mauris.
Suspendisse porttitor, diam at faucibus aliquam, turpis
nisl suscipit felis, eleifend rhoncus pede lectus vel
ligula. Proin eget velit. Vivamus gravida, mauris porta
laoreet aliquet, mauris risus consequat metus, quis
molestie risus tortor in odio. Suspendisse nunc.
Suspendisse aliquet tempor metus. Phasellus nunc wisi,
congue ut, accumsan et, scelerisque et, risus. Mauris
blandit, lectus a vulputate ultricies, lorem risus
dignissim augue, quis vulputate tortor arcu volutpat
felis. Suspendisse interdum. Suspendisse bibendum, nisl
id nonummy rutrum, urna neque pulvinar sem, at molestie
augue dui vitae libero. Suspendisse potenti.
</p>
</div>
<p id="footer">
blabla copyright
</p>
</div>
</body>
</html>