Beral2 | Bonjour à toutes et tous.
J'essaie de faire un menu déroulant. Je me suis inspiré de cela (même plus qu'inspiré) : http://css.alsacreations.com/modelesmenus/vd2.htm
Merci à Raphaël GOETTER au passage et à tous ceux qui partagent leur savoir faire ( http://www.elmoustikoblog.net/tutoriels/css/mise_page/ , http://marcarea.com/tuto/menu01.php etc...).
Un petit problème dans ce menu cependant (en fait un peu gros parce que cela le rend inutilisable).
Sour IE, tout "va bien", sous Firefox, le menu "flicke" comme un fou avec le fond : je n'ai pourtant pas développé ma page pour IE spécialement. Je crois qu'en fait le menu (toujours ici http://css.alsacreations.com/modelesmenus/vd2.htm) le fait aussi mais comme il est "petit", cela ne se voit pas beaucoup.
LE CODE HTML (avec un peu de javascript au début, je voulais sans mais je ne crois pas que cela soit possible tout en restant compatible avec IE) :
Citation :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/comm/enterprise/styles/index_xx.css">
<title>Direction Générale Entreprises et industrie : Page d'accueil</title>
<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="contenu">
<h1>COMPETITIVENESS FOR SUSTAINABLE GROWTH</h1>
<h2>Quoi de neuf ?</h2>
</div>
<dl id="menu">
<dt onmouseover="javascript:montre('smenu1');"><a href="/comm/enterprise/policy_fr.htm">DOMAINES D'ACTION...</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li>
<a href="/comm/enterprise/policy_fr.htm">DOMAINES D'ACTION</a></li>
<li>
<a href="/comm/enterprise/enterprise_policy/index_fr.htm">Politique d'entreprise</a></li>
<li>
<a href="/comm/enterprise/enterprise_policy/industry/index_fr.htm">Politique industrielle</a></li>
<li>
<a href="/comm/enterprise/enlargement/index_fr.htm">Elargissement et politique d'entreprise</a></li>
<li>
<a href="/comm/enterprise/entrepreneurship/index_fr.htm">Promotion de l'entrepreunariat et des PMEs - artisanat, économie sociale</a></li>
<li>
<a href="/comm/enterprise/entrepreneurship/financing/index_en.htm">Accès au financement [EN]</a></li>
<li>
<a href="/comm/enterprise/innovation/index_en.htm">Promotion de l'innovation et du transfert de technologies [EN]</a></li>
<li>
<a href="/comm/enterprise/services/index.htm">Services, commerce et distribution, tourisme [EN]</a></li>
<li>
<a href="/comm/enterprise/ict/index.htm">E-business - Industries et services des technologies de l'information et de la communication [EN]</a>
<li>
<a href="/comm/enterprise/csr/index_fr.htm">Responsabilité sociale des entreprises</a></li>
<li>
<a href="/comm/enterprise/regulation/index_en.htm">Réglementation - Marché unique - Nouvelle approche globale [EN]</a></li>
<li>
<a href="/comm/enterprise/regulation/goods/index_fr.htm">Libre circulation des marchandises</a></li>
<li>
<a href="/comm/enterprise/space/index_en.htm">Politique spatiale [EN]</a></li>
<li>
<a href="/comm/enterprise/environment/index.htm">Environnement et développement durable [EN]</a></li>
<li>
<a href="/comm/enterprise/ida/index.htm">IDABC (services paneuropéens d'administration en ligne aux administrations publiques, aux entreprises et aux citoyens) [EN]</a></li>
<li>
<a href="/comm/enterprise/regulation/better_regulation/index_fr.htm">Mieux légiférer</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="/comm/enterprise/sectors_fr.htm">SECTEURS INDUSTRIELS...</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="/comm/enterprise/sectors_fr.htm">SECTEURS INDUSTRIELS</a></li>
<li><a href="/comm/enterprise/aerospace/index_fr.htm">Aérospatiale</a></li>
</ul>
</dd>
<dt><a href="/comm/enterprise/news/index.htm">Evènements [EN]</a></dt>
<dt><a href="/comm/enterprise/speeches/index.htm">Discours clefs [EN]</a></dt>
<dt><a href="/comm/enterprise/library/index.htm">Publications [EN]</a></dt>
<dt><a href="/comm/enterprise/funding/index.htm">Instruments financiers [EN]</a></dt>
<dt><a href="/comm/enterprise/calls/calls.html">Appels d'offres [EN]</a></dt>
<dt><a href="/comm/enterprise/faq/index_en.htm">Foire Aux Questions [EN]</a></dt>
<dt><a href="/comm/enterprise/consultations/index_fr.htm">Consultations en ligne</a></dt>
</dl>
</body>
</html>
|
LA CSS :
Citation :
body
{
overflow: auto;
margin: 0;
padding: 0;
}
h1
{
text-align: center;
font-weight: bold;
font-size: 120%;
color: #3399CC;
font-family: Arial, Verdana, Sans-Serif;
padding: 0px 0px 0px 0px;
}
h2
{
text-align: left;
font-weight: bold;
font-size: 90%;
color: #607189;
font-family: Arial, Verdana, Sans-Serif;
padding: 0px 0px 0px 0px;
margin: 50px 0px 6px 4px;
}
div#contenu
{
margin: 36px 190px 0 190px;
}
dl, dt, dd, ul, li
{
list-style-type: none;
}
#menu
{
position: absolute;
top: 99px;
left: 8px;
width: 164px;
height: 188px;
margin: 0;
background-color: #FAFAFB;
}
#menu dt
{
margin: 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: bold;
}
#menu dt a
{
color: #2982AE;
text-decoration: none;
}
#menu dt a:hover
{
text-decoration: underline;
}
#menu dd
{
position: absolute;
margin-top: -1em;
left: 120px;
width: 554px;
background-color: #FAFAFB;
border: 1px solid #999999;
}
#menu ul
{
padding: 0;
margin: 0;
}
#menu li
{
padding: 0;
margin: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
}
#menu li a
{
color: #2982AE;
text-decoration: none;
}
#menu li a:hover
{
text-decoration: underline;
}
|
Y'aurait-il une possibilité d'empêcher ce scintillement svp ?
Il se produit lorsqu'il passe sur la DIV "contenu".
Je dois vous avouer mon ignorance presque totale du javascript.
Si vous avez une piste...
Et si vous voyez d'autres problèmes, suis toujours ok pour apprendre, sinks.
Merci.
Message édité par Beral2 le 10-05-2005 à 10:48:48
|
à raison. Sinks qd-même.
Help plize, si ce défaut est inhérent à ce menu, pourriez-vous m'indiquer une méthode pour en faire un (avec le moins de javascript possible) qui fonctionne svp ?