Bonsoir,
Ce n'est sûrement pas la meilleure production de l'année, mais cela semble correspondre au cahier des charges...
Il s'agit du mariage étonnant de deux tutoriels d'Alsacreations
En esparant que cela vous conviendra
Cdt,
Sylvain
<!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" lang="fr">
<head>
<title>Fouko</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
/* CSS issu des tutoriels css.alsacreations.com/ */
html, body {
margin:0pt;
padding:0pt;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
text-align:left;
}
#header h1 {
background:#EEEEEE none repeat scroll 0%;
color:#79B30B;
height:80px;
line-height:80px;
margin:0pt;
padding-left:10px;
}
#conteneur {
position: absolute;
width: 700px;
left:50%;
right:50%;
margin-left:-350px;
}
#centre {
margin-left: 150px;
margin-right: 150px;
padding-top:18px;
}
#centre p {
margin:0pt 10px 10px;
line-height:1.4;
}
#gauche {
position: absolute;
left:0;
width: 150px;
background-color:#FF8539;
top:100px;
}
#droite {
position: absolute;
right:0;
width: 150px;
background-color:#B9CAFF;
top:100px;
}
#footer {
height:30px;
background:#333333;
color:#FFFFFF;
}
#footer p {
margin:0pt;
padding:5px 10px;
text-align:center;
}
p {margin: 0 0 10px 0;}
/*Menu*/
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top:80px;
left: 0;
z-index:100;
width:700px;
}
#menu dl {
float: left;
width:137px;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
</head>
<body>
<div id="conteneur">
<div id="header"><h1>header</h1></div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="gauche">
<p>3) Left Sidebar. Lorem ipsum dolor sit amet consectetuer auctor sem auctor rhoncus Curabitur. Consectetuer eget urna sociis ut magnis pretium Nunc id dolor justo.</p>
</div>
<div id="droite">
<p>2) Right Sidebar. Lorem ipsum dolor sit amet consectetuer auctor sem auctor rhoncus Curabitur. Consectetuer eget urna sociis ut magnis pretium Nunc id dolor justo. Pharetra molestie Aenean gravida sed Phasellus malesuada velit ligula felis et.</p>
</div>
<div id="centre">
<p>1) Contenu du Site. Lorem ipsum dolor sit amet consectetuer auctor sem auctor rhoncus Curabitur. Consectetuer eget urna sociis ut magnis pretium Nunc id dolor justo. Pharetra molestie Aenean gravida sed Phasellus malesuada velit ligula felis et. Orci auctor gravida lacinia Sed volutpat eros Vestibulum Sed metus Fusce. Pellentesque dapibus urna.</p>
<p>Lorem ipsum dolor sit amet consectetuer auctor sem auctor rhoncus Curabitur. Consectetuer eget urna sociis ut magnis pretium Nunc id dolor justo. Pharetra molestie Aenean gravida sed Phasellus malesuada velit ligula felis et. Orci auctor gravida lacinia Sed volutpat eros Vestibulum Sed metus Fusce. Pellentesque dapibus urna.</p>
<p>Lorem ipsum dolor sit amet consectetuer auctor sem auctor rhoncus Curabitur. Consectetuer eget urna sociis ut magnis pretium Nunc id dolor justo. Pharetra molestie Aenean gravida sed.</p>
<p>Lorem ipsum dolor sit amet consectetuer auctor sem auctor rhoncus Curabitur. Consectetuer eget urna sociis ut magnis pretium Nunc id dolor justo. Pharetra molestie Aenean gravida sed Phasellus malesuada velit ligula felis et.</p>
</div>
<div id="footer"><p>pied de page</p></div>
</div>
</body>
</html>
