OK avec Firefox, pas bien avec IE, pb dreamweaver menu déroulants

Marsh Posté le 22-03-2005 à 14:51:15

J'ai essayé de faire un début de site au bloc notes et en copiant / collant des menus (je ne sais pas les faire) et en changeant leur design :
- avec Firefox : ça a l'air ok, les menus marchent

- avec explorer : ça part dans tous les sens

Les menus sont décalés la barre des menus du bas sort du cadre bleu alors qu'elle devrait y rester, comme sous FF

- Sous dreamweaver, ça me donne ça :

Les menus restent déoulés, empechant toute modification du texte en dessous (embetant...)
D'autre part, le titre est caché par la bande bleue et je ne sais pas où mettre des "top=xxpx" pour rémédier à ça (j'ai essayé partout, ça ne marche pas)

Voici le fichier xhtml :

Code :

<!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>Les miniatures de Julius</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
<link rel="stylesheet" media="screen" type="text/css" title="miniatures" href="../styles/miniatures2.css" />
</head>
<body>
<div id="haut">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="mailto:xxxx@gmail.com" title="Pour me contacter">Contact</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Liens">Liens</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Conseils</a></dt>
</dl>
<p class="copyright"> Les miniatures du Julius</p>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="lien.htm">Liens</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="site">
<h2 class="titre">Titre</h2>
<p class="texte_milieu"> texte le saucisson sec c'est bon pour la santé, trop en manger c'est grossir, mangez des pommes c'est meilleur et moins cher. Mais tout ça ne vaut pas un bon plat de pates à la tomage, seulemnt 400 calories et on n'a plus faim. blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/> </p>
</p>
</div>
<div id="bas">
</div>
</body>
</html>

et le css :

Code :

<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
padding: 0;
background: #06c;
font: 80% verdana, arial, sans-serif;
width: 100%;
height: 100%;
margin:auto;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute;
top: 2px;
left: 2px;
z-index:100;
width: 100%;
height: 29px;
}
#menu dl {
float: left;
width: 15%;
margin: 0.1px;
font-weight: bold;
font-size:16px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #0066a6;
border: 1px solid gray;
color:white
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #edf3f3;
}
#menu li a,
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #0093cc;
color:white;
}
#site
{
width: 98%;
height: 480px;
background-color: #FFFFFF;
font-size: 18px;
text-align: justify;
margin:5px;
overflow: auto;
}
a:link
{
text-decoration: none;
color:black;
}
a:visited
{
text-decoration: none;
color: red;
}
.copyright
{
color=white;
text-align:right;
padding:0;
margin:0;
font-weight:bold;
}
a:active
{
text-decoration: none;
color: #FF3300;
}
a:hover
{
text-decoration:none;
color:white;
background-color:#06C;
}
.titre_paragraphe
{
text-align:left;
font-style:italic;
font-size:36px;
}
.texte_milieu
{
text-align:justify;
font-size:18px;
margin:20px;
background-color: #FFFFFF;
marginright:20px;
}
#bas
{
width: 100%;
height: 30px;
background-color: #06c;
font-size: 16px;
padding:0;
text-decoration: none;
color:white;
position:absolute;
left:0
}
#haut{
background-color:#06c;
height:30px;
width:100%;
position:absolute;
padding:0;
top:0;
left:0
}
.titre
{
text-align:center;
font-size:30px;
font-style: italic;
font-weight: bold;
background-color: #FFFFFF;
}
-->
</style>

Help d'un débutant :cry:

Merci

Message édité par gros minet le 22-03-2005 à 14:51:59

Marsh Posté le 22-03-2005 à 14:51:15

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *