Oui, c'est vrai...
Voici mon css :
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
div#conteneur
{
width: 778px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#header
{
height: 262px ;
background: url(images/design/logo_1.jpg) no-repeat left top ;
margin: 0 ;
}
h1#header a
{
width: 400px ;
height: 70px ;
display: block ;
background: url(images/design/logo_2.jpg) no-repeat ;
position: relative ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
possible grâce à la propriété display: block ; qui transforme le lien
en élément de type block, auquel on peut donner des propriétés de taille.
On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
exploitable pour les syntèses vocales */
div#contenu
{
padding: 0 25px 0 25px ;
background: url(images/design/bg_page.gif) no-repeat 15px 15px ;
padding-top: 1px;
font-size:12px;
}
h2
{
font-size: 1.4em ;
color: #9b2 ;
border-bottom: 2px solid #9b2;
padding: 40px 425px 0px 100px ;
}
p#footer,#footer a:link, p#footer a:hover, p#footer a:visited
{
margin: 0 ;
padding-right: 10px ;
line-height: 25px ;
color: #FFFFFF ;
text-align : center;
background: url(images/design/menu_haut_link.gif) ;
height : 25px ;
font-size:12px;
}
#menu {
text-decoration:none;
font-size:16px;
}
#menu dl {
float: left;
text-decoration:none;
text-align:center;
border: 1px solid black;
width:65px;
}
#menu li {
display: inline;
top:125px;
}
#menu a {
text-decoration: none;
color: #000;
background: #fff;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
position: absolute;
font-size: 12px;
text-decoration:none;
padding-top:5px;
padding-left:40px;
padding-right:40px;
}
Et ma page web :
<!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>SEE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<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>
<div id="conteneur">
<h1 id="header"><a href="#" title="SEE"></a></h1>
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<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>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-menu 2.1</a></li>
<li><a href="#">Sous-menu 2.2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
<dd id="smenu3">
<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="montre('smenu4');"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<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>
<dl>
<dt onmouseover="montre('smenu5');"><a href="#">Menu 5</a></dt>
<dd id="smenu5">
<ul>
<li><a href="#">Sous-menu 5.1</a></li>
<li><a href="#">Sous-menu 5.2</a></li>
<li><a href="#">Sous-menu 5.3</a></li>
</ul>
</dd>
</dl>
</div><h2>See.fr</h2>
<div id="contenu">
Notre expertise et nos développements nous permet de répondre à l’ensemble des besoins en terme de communications radio.
Nous avons à cœur :
L’intégration permanente des nouvelles technologies pour proposer des moyens de communications toujours plus innovants.
D'utliser notre expérience (plus de 40 ans) pour l'expertisse de problèmes radio complexe.
Notre expérience nous permet expertisse des problèmes radio, La réalisation et l’installation de réseaux de sécurité.
Nos activités principales concernent les réseaux radio de sécurité routière :
Sur les autoroutes avec le réseau radio ROCADE
Sur les départements avec le réseau DDE
Dans les tunnels
Actuellement les réseaux SEE couvrent la majeure partie de la France.
</div>
<p id="footer"><a href="#" title="">SEE</a> - <a href="#" title="">Localisation</a> - <a href="#" title="">Plan du site</a> - <a href="#" title="">Nous contacter</a></p>
</div>
</body>
</html>
.