Bonsoir,
J'ai cherché pratiquement toute la journée une solution à un problème qui me gène,je suis débutant en css et html je le sais mais c'est la première fois que j'ai ce problème.
Dans mon code css, j'utilise la balise <h1> pour définir un espace où sera affiché tout ce qui sera inscrit entre les balises <h1> et </h1> ce qui permettrait que le texte ecrit et les images affichées ne soient pas derrière le menu en CSS, j'ai décidé de garder le code CSS dans la page html elle-même, ainsi ce sera plus simple pour moi de modifier les deux en même temps.
Le problème est qu'à l'inverse d'Internet Explorer et d'Opera, Mozzilla Firefox, lui, n'effectue pas le positionnement voulu, voici le lien où le problème persiste: [url]http://hangyaku-no-nagai.xdir.fr/systeme.htm/url.
et voici le code complet de la page:
<html>
<head>
<title>Hangyaku no Nagaï - Systèmes</title>
<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>
<style type="text/css" media="screen">
<!--
body {
margin:15px 10px 15px 10px;
}
h1 {
font-family:comic sans ms, sans-serif;
font-size:70%;
color:gray;
background-color:transparent;
text-align:left;
Position: Absolute;
Top: 5cm;
Left: 7cm;
}
h2 {
font-family:comic sans ms, sans-serif;
font-size:110%;
color:crimson;
background-color:transparent;
text-align:center;
}
h3 {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:white;
background-color:transparent;
text-align:left;
}
p {
font-family:comic sans ms, sans-serif;
font-size:90%;
color:white;
background-color:transparent;
text-align:center;
margin-left:5px;
margin-right:5px;
}
li {
font-family:comic sans ms, sans-serif;
font-size:90%;
color:red;
background-color:transparent;
text-align:left;
margin-left:10px;
margin-right:10px;
}
a:link {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:#696969;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:#696969;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:silver;
background-color:transparent;
text-decoration:none;
}
table {
border-color:silver;
border-style:outset;
border-width:2px;
}
td {
font-family:comic sans ms, sans-serif;
font-size:80%;
color:silver;
text-align:center;
background-color:transparent;
border-color:#696969;
border-style:inset;
border-width:2px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: Absolute;
top: 5cm;
left: 0,5cm;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #740000;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #454545;
}
#menu li a, #menu dt a {
color: black;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #440101;
}
-->
</style>
</head>
<body bgcolor="Black" text="Silver">
<center><img src="http://img172.imageshack.us/img172/2421/bannirery4.jpg" alt="Hangyaku no Nagaï"></center><br><br><br>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="accueil.htm">Accueil</a></dt>
<dt onclick="javascript:montre('smenu2');">Présentation</dt>
<dd id="smenu2">
<ul>
<li><a href="projet.htm">Projet</a></li>
<li><a href="histoire.htm">Histoire</a></li>
<li><a href="perso.htm">Personnages</a></li>
<li><a href="lieux.htm">Lieux</a></li>
<li><a href="monstre.htm">Monstres</a></li>
<li><a href="systeme.htm">Systèmes</a></li>
<li><a href="quete.htm">Quètes secondaires</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="grenier.htm">Grenier</a></dt>
<dt onclick="javascript:montre();"><a href="dl.htm">Telecharger</a></dt>
<dt onclick="javascript:montre();"><a href="http://hangyaku-no-nagai.grafbb.com">Forum</a></dt>
<dt onclick="javascript:montre();"><a href="partenaires.htm">Partenaires</a></dt>
<dt onclick="javascript:montre();"><a href="contact.htm">Nous contacter</a></dt>
</dl>
<h1><h2>Systèmes du jeux</h2><br><br>Vous voici sur la page des systèmes du jeu, vous vous en douterez, tous les systèmes ne seront pas présents sur cette page car tout simplement, ils n'ont pas tous étés réalisés, mais une bonne partie l'est déjà, descendez le long de la page pour les découvrir.<br><br><br>
<u>Custom Title System [CTS]:</u><br><br>
Ceci est un système d'écran-titre personnalisé qui a été créé à partir d'un script de Corbaque sans qui ce système n'aurait pas vu le jour dans notre jeux.<br><br>
<u>Exemple en image:</u><br><br>
<img src="images/menu-cts.jpg"><br><br>
<u>Custom Menu System [CMS]:</u><br><br>
Ceci est un système de menu personnalisé à la Final Fantasy X-2 dont le scirpteur est:CatchM.<br>
À partir de ce script que nous avons traduit et dont le graphisme a été totalement refait, nous avons pu d'ores et déjà naviguer dans un menu 50% customisé par nous puisque le code n'est pas de nous.<br><br>
<u>Exemple en image:</u><br><br>
<img src="images/menu.jpg"><br><br>
<u>La suite dans un instant:</u><br><br></h1>
</body>
</html>
Pourriez-vous m'aider à trouver un moyen pour que l'affichage soit le même entre Internet Explorer et Firefox?
Afficher structure répertoire disque dur
