Bonjour,
J'ai suivi un tuto Alsacréations pour créer un menu déroulant associant du java script et du css (je débute)... Le problème est que lorsque l'on arrive sur ma page d'accueil le menu est déjà déroulé sur safari et firefox mais pas sur opéra, sur Opéra je ne peux carrément plus accéder aux sou-menus... Je travaille sur mac et vérifie donc mon accessibilité que sur safari, firefox et opéra mais pas Ie (je ne l'ai pas désolé!..) comment pourai-je régler ce problème?
mon site : www.filemon.fr
J'ai esseyer de poster ce même message sur le forum pour débutant mais personne ne me répond...
(De plus je crois que l'on peut lier une page xhtml avec une autre où il n'y'aurait que le javascript et éviteer que ce code soit dans la page "contenu", tel un lien avec la page de style CSS)
Help me please....
J'ai suivi un tuto Alsacréations pour créer un menu déroulant associant du java script et du css (je débute)... Le problème est que lorsque l'on arrive sur ma page d'accueil le menu est déjà déroulé sur safari et firefox mais pas sur opéra, sur Opéra je ne peux carrément plus accéder aux sou-menus... Je travaille sur mac et vérifie donc mon accessibilité que sur safari, firefox et opéra mais pas Ie (je ne l'ai pas désolé!..) comment pourai-je régler ce problème?
mon site : www.filemon.fr
------code css ----
@charset "UTF-8";
html/* CSS Document */
{
font-size: 76%;
color: #000000;
}
#conteneur
{
width: 780px;
border: thin solid #999999;
position: absolute;
padding: 10px;
top: 0;
right: auto;
bottom: auto;
left: 50%;
margin: 0 0 0 -390px;
height: auto;
}
#footer
{
text-transform: uppercase;
color: #999999;
float: left;
width: 780px;
height: 15px;
text-align: center;
vertical-align: middle;
border: thin solid #999999;
padding: 0px;
margin: 5px 0px 0px;
white-space: normal;
clip: rect(0px,auto,auto,auto);
top: 0px;
position: static;
font: 80%/130% Arial, Helvetica, sans-serif;
}
.link
{
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #000000;
list-style: url(none) none;
margin: 25px 0px 0px;
font-weight: 700;
}
#entete
{
background: url(/images/enconstruction.jpg) no-repeat center top;
height: 200px;
width: 780px;
border: thin solid #999999;
position: static;
text-align: center;
float: left;
margin-bottom: 10px;
}
#contact
{
float: left;
height: 80px;
width: 50px;
margin-left: 10px;
border: thin dotted #999999;
}
#contenu
{
height: 100%;
width: 590px;
border: thin solid #999999;
float: right;
position: relative;
vertical-align: top;
top: 0px;
margin-top: 10px;
}
#filemonshop
{
background: url(/images/filemonshop.jpg);
height: 80px;
width: 170px;
position: absolute;
float: left;
left: 11px;
}
.filemoncrea
{
background: url(/images/filemoncrea.jpg);
height: 90px;
width: 165px;
position: relative;
margin-top: 10px;
float: none;
left: 2px;
}
#mentionlegale
{
font: 10px Arial, Helvetica, sans-serif;
color: #999999;
height: 26px;
width: 800px;
border-top: thin solid #999999;
border-right: thin none #999999;
border-bottom: thin none #999999;
border-left: thin none #999999;
position: absolute;
}
.img {
border:thin dotted #999999;
margin: 5px 0 0 0;
padding: 5px;
}
/*Menu gauche*/
#menugauche
{
height: auto;
width: 170px;
border: thin solid #999999;
float: left;
position: relative;
vertical-align: top;
top: 0px;
margin-top: 10px;
margin-left: 0px;
padding-left: 0px;
}
#menu
{
font: 1em Arial, Helvetica, sans-serif;
text-transform: none;
height: auto;
width: 170px;
list-style: url(none) none;
position: relative;
font-weight: 400;
font-style: normal;
}
dl, dt, ul, li {
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
dd {
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
margin: 0 0 0 0;
text-transform: uppercase;
text-indent: 15px;
line-height: 110%;
}
dl#menu dt {
cursor: pointer;
margin: 1% 0;
height: 20px;
line-height: 20px;
text-align: left;
background: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
}
dl#menu li {
text-align: left;
font-variant: normal;
}
dl#menu li a, dl#menu dt a{
color: black;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
text-indent: 5px;
}
dl#menu li a:hover, dl#menu dt a:hover {
background: black;
color: #FFFFFF;
text-indent: 5px;
}
/* MYSPACE*/
ul#myspace
{
margin: 20 0 0;
padding: 0;
list-style-type: none;
}
ul#myspace li
{
margin: 0 0 5px 0 ;
padding: 0 ;
}
ul#myspace li a
{
display: block ;
width: 170px ;
height: 130px;
line-height: 30px ;
color: #000 ;
text-indent: 40px ;
text-decoration: none ;
background: url(/images/myspace.jpg) no-repeat 0 0 ;
border: none ;
}
ul#myspace li a:hover
{
background: url(/images/myspace.jpg) no-repeat 0 -130px ;
border:none ;
}
-----code html -----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>FILEMON, graphiste,bordeaux</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="/styles.css" rel="stylesheet" type="text/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>
<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #666666;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body onload="MM_preloadImages('/images/myspace2.jpg')">
<div id="conteneur">
<div id="entete"></div>
<div id="contenu"><!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3<!-- TemplateEndEditable --></div>
<div id="menugauche"><div class="filemoncrea"></div>
<dl id="menu">
<dt onclick="javascript:montre('smenu1');"><a href="#">print</a></dt>
<dd id="smenu1">
<ul>
<li><a href="/bordeaux3.html">universite Bdx3</a></li>
<li><a href="#">kino session</a></li>
<li><a href="#">lux berline</a></li>
<li><a href="#">arb3</a></li>
<li><a href="#">l'hacienda</a></li>
<li><a href="#">tres courts</a></li>
<li><a href="#">publicites</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu2');"><a href="#">logos</a></dt>
<dt onclick="javascript:montre('smenu3');"><a href="#">illustrations</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">infographies</a></li>
<li><a href="#">traditionnelles</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');"><a href="#">photographies</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">portraits</a></li>
<li><a href="#">paysages</a></li>
<li><a href="#">divers</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');"><a href="#">travaux personnels</a></dt>
</dl>
<ul class="link">
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
</ul>
<ul id="myspace">
<li><a href="http://www.myspace.com/mangacrapoulet"> </a></li>
</ul>
</div>
<div id="footer"><a href="#">mentions legales</a> - filemon est une marquee depose - tout droit reserve © 2007 - 2008</div>
</div>
</body>
</html>J'ai esseyer de poster ce même message sur le forum pour débutant mais personne ne me répond...
(De plus je crois que l'on peut lier une page xhtml avec une autre où il n'y'aurait que le javascript et éviteer que ce code soit dans la page "contenu", tel un lien avec la page de style CSS)
Help me please....
," Gatsu 35" j'ai fait ce que tu semblais être le mieux dans mon code mais là je suis trop naze pour tout mettre à jour, on verra demain... 
, merci "matmat" et "gaelgerard" pour vos commentaires mais c'est une question esthétique je pense, de vouloir que mon menu en arrivant sur ma page soit "fermé", malgré tout, ce que je souhaite (je suis novice...) c'est qu'une personne "déficiente(...)"puisse tout de même voir les images et naviguer sur mon site facilement.