Aidenet.com Aide informatique et nouvelles technologies
 |
|
|
||||||||||||||||||||||||||||
|
Aidenet.com Aide informatique et nouvelles technologies
|
|||||||||||||||||||||||||||||||
Forum d'entraide sur l'informatique et les nouvelles technologies
Vous n'êtes pas identifié.
Pages: 1
Bonjour,
Je viens de creer mon premier site web, le probleme se situe sur la mise en page du menu. Sur internet explorer, pas de probleme. Sur Firefox:
- la couleur de fond est remplacee par du blanc
- les mots sont compresses dans les cases (avec internet explorer les cases sont plus larges)
Le code source du menu (le menu est dans une page de 100px a droite et le reste dans une autre page "princ.htm":
<html>
<head>
<title>Les bons plans d Hurghada</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: 0;
padding: 0;
background: ff9900;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 7em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ffff00;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #ffff99;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="princ.html"target=princ>Acceuil</a></dt>
<dt onclick="javascript:montre('smenu5');">Intendance</dt>
<dd id="smenu5">
<ul>
<li><a href="logement.htm"target=princ>ou dormir?</a></li>
<li><a href="manger.htm"target=princ>ou manger?</a></li>
<li><a href="sortir.htm"target=princ>ou sortir?</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu2');">Pratique</dt>
<dd id="smenu2">
<ul>
<li><a href="plan.htm"target=princ>Se reperer</a></li>
<li><a href="meteo.htm"target=princ>climat</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Activites sur place</dt>
<dd id="smenu3">
<ul>
<li><a href="plongee sous marine.htm"target=princ>Plongee</a></li>
<li><a href="snorkeling.htm"target=princ>Randonee palmee</a></li>
<li><a href="desert.htm"target=princ>Desert</a></li>
<li><a href="cheval.htm"target=princ>Equitation</a></li>
<li><a href="visite.htm"target=princ>Visite</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Activites hors Hurghada</dt>
<dd id="smenu4">
<ul>
<li><a href="louxor et le caire.htm"target=princ>Louxor et Le caire</a></li>
</ul>
</dd>
<dt onclick="javascript:montre();"><a href="coutumes.htm"target=princ>Coutumes</a></dt>
<dt onclick="javascript:montre();"><a href="contact.htm"target=princ>Contact</a></dt>
</dl>
</body>
</html>
Pour voir le resultat: www.celinehurghada.com (la correction orthographique du site est en cours)
Merci d'avance
Celine
Hors ligne
J'ai peut etre un debut de solution?????
Je n'ai pas de "doctype" sur ma page apparament cette ligne servirai a la reconnaissance des codes pour certains navigateur. Le doctype depend du type de html utilise mais je n'ai aucune idee du type d html que j'utilise donc ca ne resout pas mon probleme
Hors ligne
voila ce que tu dois coller en haut de toutes tes pages html pour indiquer le Standard que tu utilise et qui est obligatoire. C'est a dire que tu dois respecter un syntaxe dans la rédaction de tes codes sans quoi tes pages risques de ne pas s'afficher correctement , pire de ne pas être prise en compte tt simplement en fonction d'une étique sur le web, entre autre pour les mal voyants, les sourd etc, en gros des raisons d'accéssibilités. Le plus mauvais des navigateur, d'avis de web master, est Internet explorer. Mais une fois ton code "standard" rédigé, il te faudra tester son affichage sur different navigateur et trouver sur le net les correction qui permettent de rendre celui-ci passe partout. A l'impossible nul n'est tenu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Ici ton titre </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="ici titre de ton css" href="ici son adresse.css" /
</head>
Voila, tu ne modifie rien aux trois premieres lignes. Sauf peut tre à la seconde tu remplaces dans ....xml:lang="fr"> par "es" pour espagnol, en fin ta pigé c la déclaration de langue. Lol.
Entre <title> et </title> le titre de ton site.
<meta http-equiv="tralalalilou..... tu ne change strictement rien c'est la norme.
<link rel="stylesheet"............ sur cette ligne tu déclare ton fichier CSS dans title=" tontitre de feuille" et dans href="" tu met l'adresse complete avec le nom de fichier et son extension.
Voili voilou.
et tu termine par </head>.
Tu peux aussi dans dans le <head> </head> Déclarer du javascript que tu aura enregistré sur une autre feuille :
Pas touche===========> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ouverture HTML =======> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
Début header=========> <head>
ton titre=============> <title>Agencement & Pratique _ Concept & Inovation</title>
pas touche ===========> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Déclaration feuille CSS===> <link rel="stylesheet" media="screen" type="text/css" title="styles" href="styles/style_du_site.css" /
Déclaration feuille java===> <script type="text/javascript" src="styles/menu_deroulant_sfhover.js"></script>
Fin header===========> </head>
puis ta page ==========> <body>
Alors la tu te laches avec la syntaxe de code la plus puriste possible avec tous les codes que tu veux. pense a travailler ton style sur une, ou des feuilles CSS. c'est plus pratique. de meme pour le java ou le PHP.
Tu fermes ta page=======> </body>
Tu ferme ton HTML ======> </html>
Note bien la balise d'ouverture HTML tout en haut, et ce qu'elle contient, c'est imperatif de le mettre ;o)
Voila, j'y go
bye.
Hors ligne
Merci pour ta reponse mais la declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
fait que j'ai maintenant le probleme precedant (- la couleur de fond est remplacee par du blanc
- les mots sont compresses dans les cases) avec les deux naviagteurs (avant avec ff seulement)
Hors ligne
Oui, je vois ca. Je suis en train d'éssayer de comprendre le code. Mais il faudrait déja isoler les feuilles HTML du CSS et du JAVASCRIP, pour une meilleure lisibilité.
Tout les problemes de navigateur se résolvent a partir du CSS en gardant imperativement les déclaration DOCTYPE ;o)
Hors ligne
Dis moi... tu as combien de fichier CSS ?
Hors ligne
Pour le site j'ai 3 fichiers css (jaune.css sable.css et bleu.css) le menu est dans une page a part (frameset) et je n'ai pas creer de css pour le menu mais copie et colle un code trouve sur un tutoriel (je ne sais plus sur quel site)
Hors ligne
Probleme resolu par un autre forum
il fallait enlever le height: 20px; de #menu dt {
Hors ligne
Pages: 1
|
|
|
|
