18073 sujets

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

[RESOLU] Menu horizontal qui se positionne diffèremment...

Bonjour,

J'ai un soucis avec mon menu horizontal: celui-ci se positionne différemment selon les navigateurs.

- Sous FireFox et Netscape cela fonctionne...

- Sous IE le menu se tasse sur deux lignes en s'alignant sur le bord gauche du conteneur

- Sous Opera, c'est un mixte: idem que sous IE mais quatre menu sur la première ligne et deux sur la seconde...

J'ai beau chercher, modifier, je ne comprends rien de rien... ( noob de service Smiley murf )

Le lien pour constater par vous-même: http://lagardedamakna.free.fr

Mon code:

<!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" xml:lang="fr" lang="fr">

<head>

<title>Bienvenue</title>
<meta name="author" content="ArtNo" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-15" /> 
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="Dofus,MMORPG,MMOG,Ankama,jeux PC, jeux massivement multi-joueurs,jeu en ligne, rpg, flash, artno, guilde, garde" />
<meta name="Category" content="Games" />
<meta name="description" content="Dofus - Site et forum de discussion sur le MMORPG (jeux massivement multi-joueurs)" />
<meta name="Robots" content="index,follow,all" />
<meta name="Revisit-after" content="3 days" />

<link rel="stylesheet" type="text/css" href="styles.css" />

<script language="JavaScript">

/* Feuille de JavaScript */

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<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>

</head>

<body>

<div id="conteneur">
<p id="easy-access">
	<a href="#centre" accesskey="s">Aller au contenu</a>  <a href="#menu" accesskey="m">Aller au menu</a>  <a href="/Politique-accessibilite" accesskey="0">Politique d'accessibilité</a> <a href="mailto:lagardedamakna@no-log.org" accesskey="7">Nous contacter</a>
</p>

<div id="header">
<span>
<h1>Bannière de l'Ordre de la Garde d'Amakna</h1>
</span>
</div>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="http://lagardedamakna.free.fr" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">L'Ordre</dt>
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="http://lagardedamakna.free.fr/origines">Les origines</a></li>
				<li><a href="http://lagardedamakna.free.fr/charte">La charte</a></li>
				<li><a href="http://lagardedamakna.free.fr/rangs">Les rangs</a></li>
				<li><a href="http://lagardedamakna.free.fr/blason">Blason et devise</a></li>
				<li><a href="http://lagardedamakna.free.fr/membres">Les membres</a></li>
				<li><a href="http://lagardedamakna.free.fr/candidature">Candidature</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">La Milice</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="http://lagardedamakna.free.fr/milice">Le bras armé</a></li>
				<li><a href="http://lagardedamakna.free.fr/chartemilice">La charte</a></li>
				<li><a href="http://lagardedamakna.free.fr/candidature">Candidature</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Dofus?!</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="http://lagardedamakna.free.fr/jeu">Le jeu</a></li>
				<li><a href="http://lagardedamakna.free.fr/univers">L'univers Dofus</a></li>
				<li><a href="http://lagardedamakna.free.fr/fanart">Le FanArt</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">L'Antre</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="http://lagardedamakna.free.fr/forum/viewtopic.php?t=224">Les news du site</a></li>
				<li><a href="http://lagardedamakna.free.fr/liens">Les liens</a></li>
				<li><a href="http://lagardedamakna.free.fr/livre">Le livre d'or</a></li>
				<li><a href="http://lagardedamakna.free.fr/plan">Le Plan du site</a></li>
				<li><a href="mailto:lagardedamakna@no-log.org">Nous contacter</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>
		<dt onmouseover="javascript:montre();"><a href="http://lagardedamakna.free.fr/forum" title="Le forum">Le forum</a></dt>
	</dl>
</div>

<div id="centre">
<br/>
<br/>
  	<h1>Avis à la population d'Amakna</h1><br/>
	  <p>Oyez! Oyez! Amaknaens, amaknaennes, L'Ordre de la Garde d'Amakna vous souhaite la bienvenue sur son nouveau site.</p><br/>
<p>Notre Ordre a une vocation amaknaenne et affiche une neutralité dans le conflit opposant les deux citées voisines de Bonta et Brakmar.<br/>
 Mais comme chacun le sait, la richesse vient de la diversité, c'est pourquoi nous recrutons pour notre milice des amaknaen(ne)s partis s'entraîner dans les académies militaires de chacune de ces cités.</p><br/>
<p>Notre but est de nous amuser dans une ambiance conviviale et solidaire, dans le respect de chacun et des règles qui régissent en ce sens notre Ordre.</p><br/>
<p>Aventuriers, combattants, artisans, commerçants, promeneurs du dimanche, vagabonds de notre belle Province rejoignez nous!</p><br/>
<h2>Avis important:</h2>
<p>Le site est actuellement en refonte compléte. 
Notre forum reste lui disponible.<br/>
Progressivement, le site va se compléter, n'hésitez pas à nous visiter régulièrement.<br/>
La rubrique " <a href="http://lagardedamakna.free.fr/forum/viewtopic.php?t=224">Les news du site</a>", dans la partie " L'Antre", est là pour vous renseigner sur l'évolution du site.</p><br/>
<p>Bonne visite et bon jeu...</p><br/>
<p>Zolen, Grand Maître de l'Ordre de la Garde d'Amakna et Bworkmaster</p><br/>
<br/>
</div>		
<div id="pied">Réalisation du site <a href="mailto:lagardedamakna&#64;no&#45;log&#46;org">ArtNo</a> © 2005 <a href="mailto:lagardedamakna&#64;no&#45;log&#46;org">La Garde d'Amakna</a>. Tous droits réservés.<br/>
Les images et textes issus de <a href="http://www.dofus.com/fr/">Dofus</a> sont © 2004 <a href="http://www.ankama-studio.com/fr/accueil.html">Ankama Studio</a>.Tous droits réservés.
</div>
</div>
</body>
</html>


Ma feuille de style:

body {
margin: 0;
padding: 0;
background-color: #D8C8A8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #980000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#conteneur {
margin: 0 auto;
width: 750px;
left: 50%;
}
#header {
height: 143px;
background-image: url(/images/boutons/bandeaufinal.jpg) ;
}
#header span {
display: none ;
}
#centre {
background-color:#F0E4C0;
text-align: justify ;
text-indent: 2em ;
line-height: 1.3em ;
}
#pied {
height: 40px;
text-align: center;
font-size: 0.75em;
line-height: 1.3em;
background-color: #F0E4C0;
}
p {
margin: 0 10px 0;
}
h1{
font-size: 1.8em;
font-weight: bold;
text-align: center;
}
h2{
font-size: 1em;
font-weight: bold;
}
a {
color: #980000;
text-decoration: underline;
}
#menu {
position: absolute;
margin: 0 auto 0 -375px;
height: 24px;
background-color:#F0E8D8;
top: 158px;
left: 50%;
z-index:100;
}
#menu dl {
float: left;
width: 9.4em;
margin: 2px 2.5px 2px 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #E8DCC8;
border: 1.5px solid #A08060;
}
#menu dd {
border: 1.5px solid #A08060;
}
#menu li {
text-align: center;
background: #F0E8D8;
}
#menu li a, #menu dt a {
color: #980000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #F0F4E0;
}


Merci par avance pour votre aide Smiley smile
Modifié par Artno (19 Oct 2005 - 20:04)
Bonjour,
Fais un test en mettant un 
border:1px solid #0000ff;
au niveau de #menu et tu verras apparaître la source de tes ennuis.. Smiley cligne
comar91 a écrit :
Bonjour,
Fais un test en mettant un 
border:1px solid #0000ff;
au niveau de #menu et tu verras apparaître la source de tes ennuis.. Smiley cligne


Bonjour comar91 et merci de m'accorder de ton temps.

Bin euh oui... J'avais repéré que c'était au niveau du " conteneur" du menu mais je ne trouve justement pas comment résoudre le soucis. Smiley ohwell
De plus, sous Opéra il y a deux menus qui sortent de ce cadre... Smiley sweatdrop
je pense que tu dois éfinir une largeur dans ton #menu.
essaye avec "width : 100%" ou une valeur fixe, car je sais par experience qu'IE a un pbleme avec les valeurs non définies en largeur.
pour opera je ne sis pas, je connais mal ce navigateur.
Opera semble avoir le même soucis de souvenir ( j'avais lu ça sur le site Alsa, mais où?!)

J'ai suivi ton conseil, ça va nettement mieux effectivement en fixant une valeur fixe.

Sous Fire Fox c'est toujours ok.
Sous Opéra il reste un menu à la ligne mais je pense qu'en jouant sur la largeur des boutons tout va rentrer sur une seule ligne.
Sous IE et Net par contre il reste un hic: l'ouverture des sous-menus agrandie vers le bas la zone contenant les menus.
Il me semble avoir lu quelque chose là-dessus sur le forum donc je vais utiliser la fonction recherche Smiley murf

Merci à toi Smiley cligne

PS: je mets el sujet en RESOLU Smiley smile
Oui oui Smiley biggrin

Ils sont bien présent mais j'ai dû soit mal les placer, soit indiquer une mauvaise valeur. Il va falloir que je cherche, test et au besoin recherche sur le forum...

Si quelqu'un peu zieuter le code plus haut et m'orienter je n'ai rien contre bien au contraire Smiley cligne

Merci de votre aide Smiley smile
Sujet clos
Aller à