Site Web : HTML5 & CSS3 : pb affichage selon les navigateurs web

Arno59 Messages postés 4600 Date d'inscription   Statut Contributeur Dernière intervention   -  
Arno59 Messages postés 4600 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je tente de refaire mon site internet en HTML5 mais je galère :

--> Dysfonctionnement d'affichage des menus horizontales et verticaux
Comment le rendre compatible avec Navigateurs Web :

- Mozilla Firefox 24.0 :
- Microsoft Internet Explorer ( 8, 9, 10) : n'affiche pas le menu vertical
- Google Chrome 29 : clignotement
- Opera 16

Je souhaite remplacer les fonctions Javascript en HTML5
- corriger les menus
- rendre conforme les articles, header et footer.

Voici le source de la page HTML : 

<!DOCTYPE html>
<html>
	<head>
		<!-- meta -->
                <meta charset="utf-8"><!-- HTML 5 -->
		<meta name="author" content=""/>
		<meta name="copyright" content="©"/>
		<meta name="description" content="Site web de "/>
		<meta name="generator" content="Editeur"/>
                <meta name="geo.placename" content="Localisation" />
                <meta name="Language" content="fr"/>
                <meta name="pragma" content="no-cache"/>
		<meta name="robots" content="index, follow, noarchive"/>
                <!-- Les caractéristiques pour chaque robots :
                <meta name="Googlebot" content="directives pour Google Search" />
                <meta name="Slurp" content="directives pour Yahoo! Search" />
                <meta name="MSNbot" content="directives pour Live Search" />
                <meta name="keywords" content= : devenue obsolète 
                -->
		<meta name="keywords" content="...."/>
		<meta name="viewport" content="width=device-width" />
                <!-- meta http-equiv -->
                <meta http-equiv="content-language" content="fr"/>
                <!-- <meta http-equiv="refresh" content="5"/> -->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                <meta http-equiv="refresh" content="0; url=site">
                <meta http-equiv="cache-control" content="no-cache"/>
                <meta http-equiv="Cache" Content="no store"/>
                <meta http-equiv="Expires" Content="0"/>
                <meta http-equiv="pragma" content="no-cache"/>
                <meta http-equiv="robots" content="index, follow, noarchive"/>
		<title> ... - Accueil</title>
		<!-- Elements <base /> -->
		<base href="site"/>
		<!-- Elements <link/> -->
		<link rel="canonical" href="index.html"/>
		<link rel="shortcut icon" type="image/x-icon" href="file.ico"/>
		<link type="text/plain" rel="author" href="../humans.txt"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<link rel="alternate" type="application/rss+xml" href="../rss.xml"/>
		<link rel="prev" type="text/html" href="/Contact.html"/>
		<link rel="next" type="text/html" href="A_propos.html"/>
		<link rel="start" type="text/html" href="index.html"/>
		<!-- Structuration de la page html -->
		<script type="text/javascript">
			<!-- En tête de page : remplace <div id="header"/> -->
			document.createElement('header');
			<!-- Pieds de page : remplace <div id="footer"/>  -->
			document.createElement('footer');
			<!-- zone de Navigation -->
			document.createElement('nav');
			<!--  rôle de barre latérale, et élément section est appelé pour regrouper le contenu principal. -->
			document.createElement('aside');
			document.createElement('section');
			document.createElement('article');
			document.createElement('hgroup');
			document.createElement('figure');
			document.createElement('figcaption');
			document.createElement('iframe');
		</script>
                <!-- JQuery 
                    JQuery 2.0.1 compatible avec les navigateurs récents : <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		    JQuery 1.10.0 compatible avec tous les navigateurs : <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		    JQuery mobile-1.3.2 compatible avec les smartphones : <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
                -->
	</head>
	<body>
		<!-- En tête de page-->
		<header>
                        <span>Message du jour :</span>
			<script type="text/javascript">
				<!--
                                    var d = new Date()
                                    var j = d.getDate()
                                    var m = d.getMonth()
                                    var y = d.getFullYear()
                                    var h = d.getHours()
                                    var mn = d.getMinutes()
                                    var jour;
                                    var dayNames = new
                                    Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
                                    var mois=["janvier","février","mars","avril","mai","juin","juillet","aout","septembre","octobre","novembre","décembre"]
                                    if (j == 1) jour = "1er"
                                    else jour = j;
                                    // Test pour déterminer la formule à employer
                                    if (h >= 18)
                                    document.write("Bonsoir");
                                    else document.write("Bonjour");
                                    document.write(" et bienvenue sur mon site. ")
                                    document.write("Aujourd'hui nous sommes le " + dayNames[d.getDay()] + " " + jour + " " + mois[m] + " " + y +", ")
                                    document.write("il est " + h)
                                    if (h < 2)
                                    document.write(" heure ")
                                    else document.write(" heures ")
                                    document.write(mn)
                                    if (mn < 2)
                                    document.write(" minute.")
                                    else document.write(" minutes.")
                                //-->
                        </script>
                        <br />
                        <nav id="navigation" role="navigation">
                            <ul id="menu-horizontal" role="menubar">
                                <li class="first leaf"><a href="lien1" title="">lien1</a></li>
                                <li class="leaf"><a href="lien2" title="">lien3</a></li>
                                <li class="leaf"><a href="lien3" title="">lien3</a></li>
                                <li class="last leaf"><a href="lien4" title="">lien4</a></li>
                            </ul>
                        </nav>
                        <!-- Logo-->
                        <figure><a href="index.html"><img id="logo" src="../images/image.jpeg" alt="Logo" height="103" width="102"/></a>
                                <figcaption>Description</figcaption>
                        </figure>
                        <!-- QR Code -->
                        <figure><img src="../images/Entreprise/qr_code.png" height="90" width="90"></figure>
                        <!-- Zone de Navigation -->
                        <nav id="navigation-menu" role="navigation">
                            <ul>
                                <li class="deroulant"><a href="index.html" title="Page d'acceuil du site">Accueil</a></li>
                                <p>Choisissez votre langue de navigation / Choose your language navigation</p>
                                <ul>
                                                <FR> <US> <Chineese>
                                </ul>
                                <ul id="menu-horizontal" role="menubar">
                                    <li class="first"><a href="#">A propos </a>
                                        <ul class="sousmenu">
                                            <li class="first"><a href="A_propos.html"  title="Présentation"></a>
                                            <li><a href="Apropos1.html">Apropos1</a></li>
                                            <li><a href="Apropos2.html">Apropos2</a></li>
                                        </ul>
                                    <li><a href="../Services">Services</a>
                                        <ul class="sousmenu">
                                            <li class="focus"><a href="../Services.html" target="_blank"  </a></li>
                                            <li class="element_1"><a href="Element1.html" target="_blank" </a></li>                                    
                                            <li class="element_2"><a href="Element2.html" target="_blank" </a></li>
                                            <li class="element_3"><a href="Element3.html" target="_blank" </a></li>
                                            <li class="element_4"><a href="Element4.html" target="_blank" </a></li>
                                            <li class="element_5"><a href="Element5.html" target="_blank" </a></li>
                                            <li class="element_6"><a href="Element6.html" target="_blank" </a></li>
                                       </ul>
                                    <li><a href="#">Agenda</a></li>
                                    <li class=""><a href="#">Actualités - Évènements</a></li>
                                        <ul class="sousmenu">
                                            <li class="first-child"><a href=""></a></li>
                                        </ul>            
                                    <li class=""><a href="#">autres menu :</a>
                                        <ul class="sousmenu">
                                            <li class="element_1"><a href="#"><span>1</span></a></li>
                                            <li class="element_2"><a href="#"><span>2</span></a></li>
                                            <li class="element_3"><a href="#"><span>3</span></a></li>
                                        </ul>        
                                    </li>
                                    <li class=""><a href="#">Notre implentation et contact</a>
                                        <ul class="sousmenu">
                                            <li class="element_1"><a href="Contact.html" target="_blank">Adresses et plans d'accès</a></li>
                                            <li class="element_2"><<a href="contact.html" title="Comment nous contacter">Contact</a></li>
                                        </ul>
                                    </li>
                               </ul>
                        </nav>
                </header>
                <!-- Zone annexe -->
                <aside id="sidebar-nav">
			<section>
                                <article>
                                        <header>.......</header>
				
                                            .......
                                
                                <footer>.......</footer>
                                </article>
			</section>
		</aside>
		<!-- Contenu principal -->
		<section id="main">
			<article>
				<header>....</header>
                                ..................
                                <footer>......</footer>
			</article>
			<article>
				<header>......</header
                                .....................
                                <footer>....</footer>
                        </article>
		</section>
		<footer>
                        <nav id="navigation-menu" role="navigation">
                            <ul id="menu-horizontal" role="menubar">
                                <li class="first"><a href="#">Les réseaux sociaux</a>
                                    <ul class="sousmenu">
                                        <li class="first leaf"><a href="..." class="fb">Facebook</a></li>
                                        <li class="leaf"><a href=";.." class="via">Viadeo</a></li>
                                        <li class="last"><a href="...." class="in">LinkedIn</a></li>
                                    </ul>
                                </li>
                                ...
                        </nav>
                        <br />
                        <h3>Ce site internet a été réalisé en respectant les nouvelles recommandations de W3C :
                            <a href="http://www.w3.org" target="_blank"><img src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" alt="W3C" height="50" width="50"></a>
                            <a href="http://validator.w3.org/check/referer" target="_blank"><img src="http://www.w3.org/html/logo/img/mark-word-icon.png" alt="valid html5" height="50" width="50"></a>
                        </h3>
                        <p>Copyright ©  <a href="" target="_blank">Tous droits réservés</p>
                </footer>
        </body>
</html>


D'avance merci.
A voir également:

2 réponses

Réponse 1 / 2
dzdzed
 
Ici

http://www.w3schools.com/tags/

Pour chaque balise vous avez la compatibilité avec les navigateurs.
C'est un problème récurent qui date de bien avant HTML5, chaque navigateur va interpréter différemment.
Les solutions: coller aux normes, tester

Le problème IE fait que le web browser de microsoft qui est pourtant fournit avec la majorité des ordinateurs n'est plus le plus utilisé.

edit: tester bien sûr pour faire une version qui soit hybride donc tester+ corriger ou alors la meilleure des solutions mais que je n'emploie pas faire une version du code différente pour chaque navigateur.
0
Réponse 2 / 2
Arno59 Messages postés 4600 Date d'inscription   Statut Contributeur Dernière intervention   487
 
Merci de cette précision,

Je vais tester car j'avais testé à partir du validator de W3C mais constat les navigateurs web ne donne pas les mêmes résultats.


0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses