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 sur opéra. 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
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.
Merci de m'aider...
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 sur opéra. 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
[b]------code css ----[/b]
@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 ;
}
[b]-----code html -----[/b]
<!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>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.
Merci de m'aider...