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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : OK avec Firefox, pas bien avec IE, pb dreamweaver menu déroulants

gros minet

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
css et menu	Menu CSS
Cmt savoir si PHP a bien load MySQL ?!	Menu dynamique (problème avec visibility)
Liens vers un FTP ne fonctionne pas sous Firefox	Dreamweaver et " "
Probléme de mise en page ( ça marche sous IE mais pas sous firefox)	probleme de decalage d'un sous menu en javascript avec IE
pb dreamweaver calques et menus déroulants (options manquantes)
Plus de sujets relatifs à : OK avec Firefox, pas bien avec IE, pb dreamweaver menu déroulants

Page générée en 0.075 secondes