Bonjour,
J'essaye de créer un site web. J'ai découvert le CSS grâce à ce forum. J'ai utilisé un des menus verticals déroulant. Mais je rencontre un problème sous IE alors que sous firefox tout va bien.
Voila le code html problèmatique:
Et ma feuille CSS:
Le problème est le suivant:
j'aimerais que le menu déroulant et les images ne fassent qu'un seule bloc, sous firefox c'est parfait. Mais sous IE, la première image est au bonne endroit mais les autres sont dans les menus déroulants.
De plus j'ai des liens-images mais je ne sais pas comment supprimer la bordure bleu autour de mes images.
Merci à tous.
Modifié par pgetsa (25 Apr 2006 - 00:02)
J'essaye de créer un site web. J'ai découvert le CSS grâce à ce forum. J'ai utilisé un des menus verticals déroulant. Mais je rencontre un problème sous IE alors que sous firefox tout va bien.
Voila le code html problèmatique:
<div id="conteneur_menu-texte">
<dl id="menu">
<img class="menu_image" alt="Sports collectifd" src="Site_menu1.gif" />
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Football</a></dt>
<dd style="display: block;" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">France</a></li>
<li><a href="#">Etranger</a></li>
<li><a href="#">Ligue des champions</a></li>
<li><a href="#">Coupe de l'UEFA</a></li>
<li><a href="#">Equipe nationale</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Rugby</a></dt>
<dd style="display: none;" id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">France</a></li>
<li><a href="#">Etranger</a></li>
<li><a href="#">H Cup</a></li>
<li><a href="#">Grand chelem</a></li>
<li><a href="#">Tri-nation</a></li>
</ul>
</dd>
<img class="menu_image" alt="Sport individuel" src="Site_menu4.gif" />
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"><a href="#">Tennis</a></dt>
<dd style="display: block;" id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">Hommes</a></li>
<li><a href="#">Femmes</a></li>
</ul>
</dd>
<img class="menu_image" alt="Sports sur roues" src="Site_menu6.gif" />
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="#">Cyclisme</a></dt>
<dd style="display: block;" id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">UCI Protour</a></li>
<li><a href="#">Grands Tours</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"><a href="#">Automobile</a></dt>
<dd style="display: block;" id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">Formule 1</a></li>
<li><a href="#">Rally</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"><a href="#">Moto</a></dt>
<dd style="display: block;" id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">125cc</a></li>
<li><a href="#">250cc</a></li>
<li><a href="#">Moto GP</a></li>
</ul>
</dd>
<img class="menu_image" alt="Sport virtuel" src="Site_menu10.gif" />
<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"><a href="#">Jeux video</a></dt>
<dd style="display: block;" id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Actu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">Astuces</a></li>
<li><a href="#">Download</a></li>
</ul>
</dd>
</dl>
<div id="texte">
<br /><br /><br />Voici<br />l'espace<br />pour<br />le<br />texte<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
Et ma feuille CSS:
<STYLE TYPE="text/css">
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
--> </STYLE>
<style type="text/css">
<!--
body {
padding:0;
margin:0;
font-family: comic sans ms;
font-size: 90%;
color: white;
text-align: center;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#global {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
#conteneur_menu-texte {
width: 795px;
padding: 0px 0px 5px 5px;
background: #0099FF;
}
#menu {
float: left;
position: relative;
width: 115px;
border: 2px solid #FFFFFF;
}
#menu dt {
cursor: pointer;
background: #0099FF;
width: 115px
height: 20px;
line-height: 20px;
margin: 0px 0;
border: 0px solid gray;
text-align: center;
font-weight: bold;
}
#menu dd {
position: absolute;
z-index: 100;
left: 115px;
margin-top: -24px;
width: 130px;
background: #0099FF;
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity: 0.50;
border: 0px solid gray;
}
#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: none;
}
#mentions {
font-family: comic sans ms;
position: absolute;
bottom : 200px;
left : 10px;
color: #FFF;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
#menu_image{
float: left;
display: block;
}
#texte {
width: 673px;
margin-left: 117px;
background: #FFFFFF;
text-align: center;
}
#bouton_image {
border: 0px;
Hspace: 3px;
}
-->
</style>
Le problème est le suivant:
j'aimerais que le menu déroulant et les images ne fassent qu'un seule bloc, sous firefox c'est parfait. Mais sous IE, la première image est au bonne endroit mais les autres sont dans les menus déroulants.
De plus j'ai des liens-images mais je ne sais pas comment supprimer la bordure bleu autour de mes images.
Merci à tous.
Modifié par pgetsa (25 Apr 2006 - 00:02)