bonjour les designers du web, voilà j'ai un peu changé d'avis sur ce que je voulais et je cherche maintenant à adapter un menu déroulant du meme type mais sur un menu concu sur le meme principe que celui d'alsacréations. Je sais c'est du plagia mais quand j'aurai pondu l'interface graphique ca ne sera plus qu'un mauvais souvenir.
donc voici le code de ma page html
<!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>Sisteer beta 1.0</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 rel="stylesheet" type="text/css" href="./style.css" />
<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>
</head>
<body>
<div id="conteneur">
<h1 id="header"></h1>
<dl id="menu">
<dt onmouseover="montre('smenu1');"><a id="menu1" href="etape1.html">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li id="smenu1"><a href="#">Sous-menu 1.1</a></li>
<li id="smenu1"><a href="#">Sous-menu 1.2</a></li>
<li id="smenu1"><a href="#">Sous-menu 1.3</a></li>
</ul>
</dd>
<dt onmouseover="montre('smenu2');"><a id="menu2" href="etape1.html">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li id="smenu2"><a href="#">Sous-menu 2.1</a></li>
<li id="smenu2"><a href="#">Sous-menu 2.2</a></li>
<li id="smenu2"><a href="#">Sous-menu 2.3</a></li>
</ul>
</dd>
<dt><a id="menu3" href="etape3.html">Menu 3</a></dt>
<dt><a id="menu4" href="etape4.html">Menu 4</a></dt>
<dt><a id="menu5" href="etape5.html">Menu 5</a></dt>
</dl>
<div id="vide">
</div>
<div id="contenu">
<h2>Titre principal niveau 1</h2>
<?php include ("page2.html");?>
<h2>Titre principal niveau 1</h2>
<?php include ("page2.html");?>
<h3>Sous titre</h3>
<?php include ("page2.html");?>
<h3>Sous titre</h3>
<?php include ("page2.html");?>
</div>
<p id="footer">Mentions légales</p>
</div>
</body>
</html>
et voici ma feuille de style
/* CSS du site Sisteer*/
body
{
margin: 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: darkgray ;
}/* caracteristiques principales de la page*/
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border-left: 1px solid orangered ;
border-right: 1px solid orangered ;
background: #fff ;
}/*caractéristiques du cadre principal*/
h1#header
{
height: 131px ;
margin: 0 ;
background: url(banniere.jpg) ;
}/*propriétés de la bannière*/
dl#menu
{
height: 28px ;
margin: 0 ;
padding: 0 ;
background: url(menu.jpg) repeat-x 0 -28px ;
list-style-type: none ;
}/*propriétés du cadre de menu*/
dl#menu dt
{
float: left ;
text-align: center ;
}/*alignement des liens dans le menu*/
dl#menu dt a
{
width: 110px ;
line-height: 28px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 1px solid #fff ;
}/*style visuel des liens*/
/*------------------------------------------------------------------------ parametres du menu ------*/
dl#menu dt a:hover
{
color: #fff;
background: transparent url(menu.jpg) /*top left no-repeat*/;
}
dl#menu dt a#menu1:hover
{
background-position: 0px 0px;
}
dl#menu dt a#menu2:hover
{
background-position: -111px 0px;
}/*reglages du décalage pour le rollover*/
dl#menu dt a#menu3:hover
{
background-position: -222px 0px;
}
dl#menu dt a#menu4:hover
{
background-position: -333px 0px;
}
dl#menu dt a#menu5:hover
{
background-position: -444px 0px;
}
/*--------------------------------------------------------------------------------------------------------------*/
dl#menu dd
{
position: relative;
top: 20px;
left: 0;
font-size: 12px;
/*border-top: 1px solid gray;*/
width: 400px;
}/**/
dl#menu li
{
display: inline;
}/* met les liens des sous rubriques en ligne*/
div#vide{
height: 28px ;
margin: 0 ;
padding: 0 ;
}
div#contenu
{
padding: 0 25px 0 100px ;
background: url(bg_page.gif) no-repeat 15px 15px ;
}/*parametre qui integre un element graphique su rle coté de la page*/
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
/*background: url(fleche.gif) no-repeat left bottom ;*/
/*background: darkgray;*/
color: orangered ;
border-bottom: 1px solid orangered ;
}/*parametres pour les titres*/
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid darkgray ;
/*border-left: 2px solid darkgray ;*/
color: darkgray ;
}/*parametres pour les sous menus*/
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}/*parametres pour le texte*/
div#contenu a
{
color: darkorange ;
font-weight: bold ;
/*text-decoration: none ;*/
}/*parametre du lien par défaut*/
div#contenu a:hover
{
color: orange ;
font-weight: bold ;
text-decoration: none ;
}/*parametre du lien survolé*/
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: darkgray ;
font-size: 1em ;
}/*paremetres du bas de page*/
le probleme est le suivant, quand je survol le premier lien du menu, les sous rubriques apparaissent mais font décaler tous mes autres boutons de menu. Si je met alors la position des sous menus en absolute, ca marche a peu près normalement mais c'est moins précis que ce que je désire.
Je suis désolé mais je n'ai aucun moyen d'uploader mes pages la ou je suis car ya un pb de firewall au boulot, je vous posterai ca le plus vite possible mais si deja vous aviez une idée ca serait super.
merci d'avance.
le seul exemple que j'ai date d'hier soir et a été legerement modifié depuis mais le bug est le meme .
http://skalpl.free.fr/sisteer/nouvo%20test/ Modifié par Sk4pis0 (11 Oct 2005 - 15:40)
