18073 sujets

Questions générales et questions de débutants

[résolu] décalage menu sous firefox

Pages :
Salut, à tous
Sur internet explorer ça fonctionne mais sous firefox mon arrière plan se met avant le menu ce qui crée un décalage

[#black]/* CSS Document */
body {
margin: auto;
padding: 0;
background-image: url(images/Blue.png);
font-size: 80%;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;

}

#logo{
	background-image: url(images/bus.jpg);
	background-repeat: no-repeat;
	height:100px;
	background-position: center;
}

#corps{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: justify;
	padding-left: 30px;
	padding-right: 30px;
}

h1.corps{
	letter-spacing: 1em;
	text-align: center;
	color: #FFFFFF;
}

h2.corps{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #f29400;
	background-repeat: no-repeat;
	text-indent: 35px;
	text-align: left;
}

h3.corps{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #003f8a;
	text-align: left;
	background-repeat: no-repeat;
	text-indent: 35px;
}

.code{
 padding:3px;
 color:#03f;
 background:#eef
}
.noJs{display:none}

/* le menu */

#menu {
	border-bottom:1px solid #000; /* ligne sèparant titres et sous-menus premier niveau */
	height:25px;
	margin-bottom:2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.45em;
	line-height: 1.45;
	background-color: #b1c800;
}
#menu dl {float: left;}
#menu dt {position:relative;z-index:2;text-align:center;width:5em;cursor:default}
#menu li{ /* titres des menus */
 list-style:none;
 float:left;
 text-align:center;
}
#menu li a{ /* onglet */
 position:relative; /* sort du flux de la page */
 z-index:2; /* au premier plan */
 text-decoration:none;
 font:0.65em/1.65 "Comic Sans MS" normal;
 padding:1px 5px;
 width:5em;
 color:#000;
 background:transparent;
}
#menu dd{ /* sous-menus */
 position:absolute; 
 padding-top:5px;
 font-size:.9em;
 left:-99em; /* invisibles */
 top:32px;
 width:30em /* largeur du plus grand sous-menu, indispensable pour Opera */ 
}
#menu ul a:link:hover{
 text-decoration:underline;
}

#menu dt a{text-decoration:none;color:#003f8a}
#menu dt a:hover{color:#fabc20}
#menu li a{color:#003f8a;background:#fff;text-decoration:none;padding:1px 4px;margin-right:1px}
#menu li a:link:hover,#menu li a:link:active{text-decoration:underline;background-color:#fabc20;color:#fff}

/* class dynamique */
#menu .montre dd{left:10px;}
#menu .montre dt{border:1px solid #000;border-bottom:1px solid #fff;
top:1px;background:#fff}

#pied_de_page{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #FFFFFF;
	background-color: #b1c800;
	border: 1px solid #333333;
	text-align: center;
}
<style>
[if lte IE 6]>
<style>
#menu a{height:0;/*ie5*/}
</style>] <![endif [#black]


S'il vous plait, une aide serait la bienvenue car je suis encore novice.
Merci, d'avance. Smiley sweatdrop
Modifié par falco (24 Apr 2006 - 13:55)
Pour le code:
faq a écrit :

Pour marquer les codes et exemples de CSS dans vos messages :
- Cliquer sur le bouton [CODE] pour ouvrir votre espace de code
- ajouter votre code (HTML, CSS, etc.)
- Cliquer sur le bouton [CODE] pour fermer votre espace de code
Salut,

Une personne pourrait m'aider s'il vous plait, je n'ai toujours pas trouver la solution à mon problème.
Merci, d'avance.
Bonjour falco,

Tu pourrais donner aussi ton html stp ou mieux, un lien de ton travail si tu l'as mis en ligne ?
Salut,

J'ai pas encore mis le site en ligne,
Voici le code Xhtml


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="Style.css" rel="stylesheet" type="text/css" />

</head>

<body>


<div id="menu">
	<dl>
		<dt><a href="index.html">Accueil</a></dt>
			
	</dl>
	<dl>
		<dt><a href="#">Réseau</a></dt>
			
    <dd > 
      <ul>
        <li><a href="Liens_1.html">Liens 1</a></li>
        <li><a href="Liens_2.html">Liens 2</a></li>
        <li><a href="Liens_3.html">Liens 3</a></li>
      </ul>
    </dd>
	</dl>
	
	<dl>			
		<dt><a href="#">Vidéos</a></dt>
			
    <dd> 
      <ul>
        <li><a href="Liens_1.html">Liens 1</a></li>
        <li><a href="Liens_2.html">Liens 2</a></li>
		<li><a href="Liens_3.html">Liens 3</a></li>
        <li><a href="Liens_4.html">Liens 4</a></li>
		<li><a href="Liens_5.html">Liens 5</a></li>
        <li><a href="Liens_6.html">Liens 6</a></li>
		<li><a href="Liens_7.html">Liens 7</a></li>
        <li><a href="Liens_8.html">Liens 8</a></li>
		<li><a href="Liens_9.html">Liens 9</a></li>
        <li><a href="Liens_10.html">Liens 10</a></li>
		<li><a href="Liens_11.html">Liens 11</a></li>
		<li><a href="Liens_12.html">Liens 12</a></li>
      </ul>
    </dd>
	</dl>
	
	<dl class="montre">	
		<dt><a href="#">mangas</a></dt>
    <dd > 
      <ul>
        <li><a href="Liens_1.html">Liens 1</a></li>
        <li><a href="Liens_2.html">Liens 2</a></li>
        <li><a href="Liens_3.html">Liens 3</a></li>
        <li><a href="Liens_4.html">Liens 4</a></li>
        <li><a href="Liens_5.html">Liens 5</a></li>
<li><a href="Liens_6.html">Liens 6</a></li>
      </ul>
    </dd>
	</dl>
	
	<dl>	
		<dt><a href="#">Forum</a></dt>
			
    <dd> 
      <ul>
        <li><a href="Liens_1.html">Liens_1</a></li>
        <li><a href="Liens_2.html">Liens_2</a></li>
      </ul>
    </dd>
	</dl>
	
</div>

<div id="logo">
</div>
 <script type=text/javascript>
<!--
dynMenu = function(idMenu,delai) {
tempo=0;
dls = document.getElementById(idMenu).getElementsByTagName("dl");
for(var i=0;i<dls.length;i++){
	dls[i].onmouseover=function(){
		clearTimeout(tempo);
		encours=this;
		tempo=setTimeout("chgClass()",delai)
		}
  }
menu.onmouseover=function(){
clearTimeout(tempo);
tempo=setTimeout("chgClass()",delai)
}
}

function chgClass(){
	for(var j=0;j<dls.length;j++) //cache tout
		dls[j].className=dls[j].className.replace(/ montre|montre|montre /,"");
		encours.className+=!encours.className?"montre":" montre"; //montre le sous-menu
}

dynMenu("menu",200)
//-->
</script>

<div id="corps">
  <h1 class="corps">Bienvenue sur le site Alpha</h1>
  <h1 class="corps">&nbsp;</h1>
  <h2 class="corps">News</h2>

  <div align="center"><img src="images/alpha.jpg" width="565" height="382" />  </div>
  <p>Mon texte</p>

</div>

<div id="pied_de_page">

<p>Mentions légales</p>

</div>

</body>
</html>
[/i]
Merci Smiley smile

Par contre, je comprend pas la fin de ton code css, tu peux regarder s'il n'y a pas un souci :


<style>
[if lte IE 6]>
<style>
#menu a{height:0;/*ie5*/}
</style>] <![endif
Salut,

J'ai retirer ce code en css, il servait à rien.
Normalement, c'était une histoire de hauteur du menu pour qu'il soit compatible internet explorer 5 et 6 mais je suis pas sûr à 100%, car j'ai vu ce code bizarre sur un forum. Smiley biggrin
Modifié par falco (20 Apr 2006 - 11:07)
C'était tout bête en fait Smiley smile

Il faut que tu rajoutes à ton css :

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}
Merci, Blue Smiley cligne

C'est déjà mieux, mais sous firefox l'arrière plan ne prend pas toute la dimension du menu.
L'arrière plan arrive à la moitié des cases du menu.
Please, à l'aide !!!! Smiley sweatdrop
falco a écrit :
Merci, Blue Smiley cligne

C'est déjà mieux, mais sous firefox l'arrière plan ne prend pas toute la dimension du menu.
L'arrière plan arrive à la moitié des cases du menu.
Please, à l'aide !!!! Smiley sweatdrop


hmm, moi ça ne me le fait pas, tu parles de l'arrière-plan vert du menu ?
Salut,
Oui, l'arrière plan vert du menu.
Quel version de firefox as-tu ?
Moi, c'est la 1.5.0.1.
Merci, à l'avance.
Salut,

Je ne peux pas encore le mettre en ligne car je n'ai pas de nom de domaine.
J'aimerais t'envoyer un jpeg du site mais je ne sais pas comment faire !!!
Sinon, je vais essayer ta version de firefox.
Déjà, peut-tu me donner ton css et ton html complet, après que tu ais fait tes dernières modifs, que je compare ?
Pour les probleme de décalages, (quej 'ai eu aussi), ma solution a été d'enlever les dimenstions des colonnes ou cadres.
par exemple j'avais 82 px, je l'ai supprimé et mis 0 px de facon a ce que la colonne soit adapté au contenu.

Ca m'a evité les décalages.
Je ne sais pas si ca pourra t'aider maintenant
Salut,
Merci pour cette solution mais ça change rien.
Voici, le code Xhtml :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menu">
	<dl>
		<dt><a href="index.html">Accueil</a></dt>
			
	</dl>
	<dl>
		<dt><a href="#">Réseau</a></dt>
			
    <dd > 
      <ul>
        <li><a href="Liens_1.html">Liens 1</a></li>
        <li><a href="Liens_2.html">Liens 2</a></li>
        <li><a href="Liens_3.html">Liens 3</a></li>
      </ul>
    </dd>
	</dl>
	
	<dl>			
		<dt><a href="#">Vidéos</a></dt>
			
    <dd> 
      <ul>
        <li><a href="Liens_1.html">Liens 1</a></li>
        <li><a href="Liens_2.html">Liens 2</a></li>
		<li><a href="Liens_3.html">Liens 3</a></li>
        <li><a href="Liens_4.html">Liens 4</a></li>
		<li><a href="Liens_5.html">Liens 5</a></li>
        <li><a href="Liens_6.html">Liens 6</a></li>
		<li><a href="Liens_7.html">Liens 7</a></li>
        <li><a href="Liens_8.html">Liens 8</a></li>
		<li><a href="Liens_9.html">Liens 9</a></li>
        <li><a href="Liens_10.html">Liens 10</a></li>
		<li><a href="Liens_11.html">Liens 11</a></li>
		<li><a href="Liens_12.html">Liens 12</a></li>
      </ul>
    </dd>
	</dl>
	
	<dl class="montre">	
		<dt><a href="#">mangas</a></dt>
    <dd > 
      <ul>
        <li><a href="Liens_1.html">Liens 1</a></li>
        <li><a href="Liens_2.html">Liens 2</a></li>
        <li><a href="Liens_3.html">Liens 3</a></li>
        <li><a href="Liens_4.html">Liens 4</a></li>
        <li><a href="Liens_5.html">Liens 5</a></li>
		<li><a href="Liens_6.html">Liens 6</a></li>
      </ul>
    </dd>
	</dl>
	
	<dl>	
		<dt><a href="#">Forum</a></dt>
			
    <dd> 
      <ul>
        <li><a href="Liens_1.html">Liens_1</a></li>
        <li><a href="Liens_2.html">Liens_2</a></li>
      </ul>
    </dd>
	</dl>
	
</div>

<script type=text/javascript>
<!--
dynMenu = function(idMenu,delai) {
tempo=0;
dls = document.getElementById(idMenu).getElementsByTagName("dl");
for(var i=0;i<dls.length;i++){
	dls.onmouseover=function(){
		clearTimeout(tempo);
		encours=this;
		tempo=setTimeout("chgClass()",delai)
		}
  }
menu.onmouseover=function(){
clearTimeout(tempo);
tempo=setTimeout("chgClass()",delai)
}
}

function chgClass(){
	for(var j=0;j<dls.length;j++) //cache tout
		dls[j].className=dls[j].className.replace(/ montre|montre|montre /,"");
		encours.className+=!encours.className?"montre":" montre"; //montre le sous-menu
}

dynMenu("menu",200)
//-->
</script>

<div id="corps">
  <h1 class="corps">Bienvenue sur le site Alpha</h1>
  <h1 class="corps">&nbsp;</h1>
  <h2 class="corps">News</h2>

  <p>Mon texte</p>

</div>

<div id="pied_de_page">

<p>Mentions légales</p>

</div>

</body>
</html>

Maintenant, le css :


/* CSS Document */

body {
margin: auto;
padding: 0;
background-image: url(images/Blue.png);
font-size: 80%;
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
}

dl, dt, dd, ul, li{
margin: 0;
padding: 0;
}

#corps{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: justify;
	padding-left: 30px;
	padding-right: 30px;
}

h1.corps{
	letter-spacing: 1em;
	text-align: center;
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
}

h2.corps{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.7em;
	color: #b1c800;
	text-align: left;
}

h3.corps{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	color: #003f8a;
	text-align: left;
}

h4.corps{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	color: #000000;
	text-align: left;
}

.code{
 padding:3px;
 color:#03f;
 background:#eef
}

.noJs{display:none}

/* le menu */

#menu {
	border-bottom:1px solid #000; /* ligne sèparant titres et sous-menus premier niveau */
	height:25px;
	margin-bottom:2em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.80em;
	line-height: 1.80em;
	background-color: #b1c800;
}

#menu dl {float: left;}

#menu dt {position:relative;z-index:2;text-align:center;width:5em;cursor:default}

#menu li{ /* titres des menus */
 list-style:none;
 float:left;
 text-align:center;
}

#menu li a{ /* onglet */
	position:relative; /* sort du flux de la page */
	z-index:2; /* au premier plan */
	text-decoration:none;
	font-size: 0.50em;
	line-height: 1.65em; 
	padding:1px 5px;
	width:5em;
	color:#000;
	background:transparent;
	font-family: Arial, Helvetica, sans-serif;	
}

#menu dd{ /* sous-menus */
 position:absolute; 
 padding-top:5px;
 font-size:1.25em;
 left:-99em; /* invisibles */
 top:32px;
 width:30em /* largeur du plus grand sous-menu, indispensable pour Opera */ 
}

#menu ul a:link:hover{
 text-decoration:underline;
}

#menu dt a{text-decoration:none;color:#003f8a}
#menu dt a:hover{color:#fabc20}
#menu li a{color:#003f8a;background:#fff;text-decoration:none;padding:1px 4px;margin-right:1px}
#menu li a:link:hover,#menu li a:link:active{text-decoration:none;background-color:#fabc20;color:#fff}

/* class dynamique */
#menu .montre dd{left:10px;}
#menu .montre dt{border:1px solid #000;border-bottom:1px solid #fff;
top:1px;background:#fff}

#pied_de_page{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	color: #FFFFFF;
	background-color: #b1c800;
	border: 1px solid #333333;
	text-align: center;
}

Merci, d'avance.
Bonjour Falco,

Ne voyant toujours pas le fond de ton menu coupé sous Firefox (même en me paramétrant en 1024 x 768) j'ai mis tes derniers codes en ligne à cette adresse

Peux-tu me dire si tu constates, la aussi, le problème de coupure du fond ?
Pages :
Sujet clos
Aller à