Affichage sur les différents navigateurs
pascale17487
Messages postés
48
Statut
Membre
-
pascale17487 Messages postés 48 Statut Membre -
pascale17487 Messages postés 48 Statut Membre -
Bonjour,
Je débute sur la création d'un site internet, je viens de créer un site en code HTML et CSS.
Sur mon poste j'ai tester avec firefox et IE 9 et tout fonctionne bien mais en revanche sur IE8 et voir versions antérieurs, certaines choses se positionne mal exemple ma barre de menu.
Pouvez vous me dire comment faire pour résoudre ce problème.
Merci par avance
Je débute sur la création d'un site internet, je viens de créer un site en code HTML et CSS.
Sur mon poste j'ai tester avec firefox et IE 9 et tout fonctionne bien mais en revanche sur IE8 et voir versions antérieurs, certaines choses se positionne mal exemple ma barre de menu.
Pouvez vous me dire comment faire pour résoudre ce problème.
Merci par avance
A voir également:
- Affichage sur les différents navigateurs
- Affichage double ecran - Guide
- Effacer les données de navigation sur android - Guide
- Windows 11 affichage classique - Guide
- Problème affichage fenêtre windows 10 - Guide
- Problème affichage page internet google chrome - Forum Téléphones & tablettes Android
17 réponses
Salut,
Si tu veux passer sur tous les navigateurs tu ne peu pas toujours utiliser les technologies les plus récentes.
Et effectivement c'est un des gros problemes du boulot de webmaster à savoir devoir tester son appli sur plusieurs navigateurs et tout corriger jusqu'à ce que ça passe, et oui c'est une grosse galère.
Sinon tu peu aussi détecter les versions de navigateurs, et proposer une "version riche" pour les navigateurs récentes, et une "version light" pour les navigateurs anciens.
Tu as des articles utiles sur ce sujet ici : les dossiers Webmaster de CCM.
Si tu veux passer sur tous les navigateurs tu ne peu pas toujours utiliser les technologies les plus récentes.
Et effectivement c'est un des gros problemes du boulot de webmaster à savoir devoir tester son appli sur plusieurs navigateurs et tout corriger jusqu'à ce que ça passe, et oui c'est une grosse galère.
Sinon tu peu aussi détecter les versions de navigateurs, et proposer une "version riche" pour les navigateurs récentes, et une "version light" pour les navigateurs anciens.
Tu as des articles utiles sur ce sujet ici : les dossiers Webmaster de CCM.
Oui je me suis pas poser la question au commencement de mon site
je ne vois pas comment je vais faire hormis installé sur mon poste une version antérieure et de tout refaire à IE qu'en penses tu ?
je ne vois pas comment je vais faire hormis installé sur mon poste une version antérieure et de tout refaire à IE qu'en penses tu ?
n'installe pas une version de ie antérieure sur ton PC, la console de dévelloppement de IE9 le fera pour toi (touche F12 et sélection dans le menu supérieure la version que tu veux utiliser)
Pour ce qui est d'une feuille spécifique CSS à IE, il te suffit de la créer et d'inclure dans le head de tes pages un simple bout de code :
<!--[if lt IE 9]>
appel de la feuille css spécifique
<![endif]-->
Pour ce qui est d'une feuille spécifique CSS à IE, il te suffit de la créer et d'inclure dans le head de tes pages un simple bout de code :
<!--[if lt IE 9]>
appel de la feuille css spécifique
<![endif]-->
Merci pour ton info, je l'avais fait mais j'avais l'infos de <!--[if lt IE 9]> sur ma page d'accueil mais je n'avais pas fait d'espace entre IE 9.
En revanche faut il être en ligne pour faire le test car par défaut j'ai la présentation sans mes modifications.
Voici ce que j'ai inscrit en head, peux tu me dire si c'est bon merci d'avance
head>
<meta charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Locations de bateaux sur Empuriabrava </title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="style_ie.css"/>
<![endif]-->
</head>
Eventuellement si tu peux jeter un coup d'oeil : www.dockwest.eu
Merci
En revanche faut il être en ligne pour faire le test car par défaut j'ai la présentation sans mes modifications.
Voici ce que j'ai inscrit en head, peux tu me dire si c'est bon merci d'avance
head>
<meta charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Locations de bateaux sur Empuriabrava </title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
<!--[if lte IE 9]>
<link rel="stylesheet" href="style_ie.css"/>
<![endif]-->
</head>
Eventuellement si tu peux jeter un coup d'oeil : www.dockwest.eu
Merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
<!--[if lte IE 9]> là déjà y'a une erreur , c'est <!--[if lt IE 9]>
je jette un coup d'oeil sur ta page dans la soirée, la j'ai 2 - 3 trucs à finir et je post pour te tenir au courant (rapidement)
je jette un coup d'oeil sur ta page dans la soirée, la j'ai 2 - 3 trucs à finir et je post pour te tenir au courant (rapidement)
Merci à toi,
en faite c'est ma barre de menu (sur IE 8 et je suppose version antérieure) qui est à la verticale au lieu d'horizontale donc ça me décale la suite du site.
Pas de souci sur firefox et IE9.
Merci de m'aider c'est très sympa.
en faite c'est ma barre de menu (sur IE 8 et je suppose version antérieure) qui est à la verticale au lieu d'horizontale donc ça me décale la suite du site.
Pas de souci sur firefox et IE9.
Merci de m'aider c'est très sympa.
je ne sais pas ce qui se passe, mais je ne peut ni poster dans la question, ni t'envoyer un MP ....
a suivre
a suivre
voici les codes pour remplacer les parties défectueuses actuelles.
le menu sera compatible de IE7 à IE10 (et les autres navigateur bien sur). j'ai fais quelques retouches (toutes petites), mais tu en fait ce que tu veux
Pour ta page HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Locations de bateaux sur Empuriabrava </title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<Body>
<div id="bloc_page">
<header>
<section id="langue">
<div id="langue">
<a href="ES_home.htm" title="Home_es"><img src="drapeaux/es.jpg" width="30" height="20" alt="Spain" /></a>
<a href="EN_home.htm" title="Home_en"><img src="drapeaux/en.jpg" width="30" height="20"alt="English" /></a>
<a href="FR_home.htm" title="Accueil"><img src="drapeaux/fr.jpg" width="30" height="20"alt="French" /></a>
<strong>DOCKWEST</strong> Sector Alberes - 17487 Empuriabrava - Espagne Phone : 00 34 972 450 180/00 34 691 866 355 <langue>
</div>
</section>
</header>
<div id="menu"></div>
<ul id="navigation" class="nav-main">
<li><a href="FR_home.htm" title="Accueil">Accueil</a></li>
<li><a href="FR_Bateaux.htm" title="Réservations de bateaux Bateaux">Bateaux</a></li>
<li><a href="FR_Reservations.htm" title="Réservations">Réservations</a></li>
<li><a href="FR_Tarifs.htm" title="Tarifs">Tarifs</a></li>
<li><a href="FR_Contact.htm" title="Contact">Contact</a></li>
<li><a href="FR_Itineraires.htm" title="Itinéraires">Itineraires</a></li>
<li><a href="FR_Nos_partenaires.htm" title="Nos partenaires">Nos partenaires</a></li>
</ul>
<div id="corpsH"><p>
<img border="2" src="bateaux/ponton2.jpg" width="318" height="200" alt="Ponton de Dockwest"><p><br>
<img border="2" src="bateaux/sspermis.jpg" width="318" height="200" alt="Bateaux sans permis"><p><br>
<!-- ... La suite tu l'as -->
Et pour la feuille style.css :
@charset "UTF-8";
/* CSS Document */
* {margin:0; padding:0; font-size:100%; list-style:none;}
Body{
background:url(design/fond2.jpg) no-repeat #2b9ef7;
background-position:50% 0%;
margin:0;
padding:0;
font-family:Calibri, Verdana, Sans-serif;
font-size:100%
color:#ffffff;
}
#bloc_page{
width:1000px;
margin:auto;
}
/*header */
#langue {
width:100%;
margin:auto;
padding: 5px 0px 10px 5px;
text-align: center;
}
#menu {
width:975%;
height:455px;
}
#navigation { /*conteneur du menu*/
margin-left:10px;
clear:both;
width:98%;
height:30px;
background: #0a0397;
line-height:28px;
border-radius : 5px;
text-align:center;
color:#ffff00;
/*text-shadow:1px 1px 1px #ffff00;*/
text-decoration:none;
font-size:20px;
}
ul.nav-main li { /*règles générales des items de liste */
list-style: none;
margin: 0;
width:138px;
}
ul.nav-main { /*règles des items principaux*/
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul { /*apparition des sous-listes au survol de l'item principal ul*/
visibility: visible;
}
ul.nav-main li:hover { /*design des items de liste au survol*/
position: relative;
z-index: 599;
cursor: pointer;
background: #0a0397;
}
ul.nav-main li { /*positionnement, dimensions, couleurs et textes des items de liste*/
float:left;
display:block;
height: 30px;
color: #999;
font: 14px;
}
ul.nav-main li a { /*positionnement, dimensions, couleurs et textes des items de liste intégrant une redirection url*/
display: block;
height: 30px;
color: #999;
text-decoration:none;
}
ul.nav-main li a:hover { /* couleurs des items de liste au survol*/
color:#D6D6D6;
}
a{
color:#ffffff;
}
#corpsH{
float:left;
width:338px;
margin: 10px;
}
/* et là aussi tu as la suite ... */
Et voilà, si tu as des questions, n'hésite pas
le menu sera compatible de IE7 à IE10 (et les autres navigateur bien sur). j'ai fais quelques retouches (toutes petites), mais tu en fait ce que tu veux
Pour ta page HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Locations de bateaux sur Empuriabrava </title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<Body>
<div id="bloc_page">
<header>
<section id="langue">
<div id="langue">
<a href="ES_home.htm" title="Home_es"><img src="drapeaux/es.jpg" width="30" height="20" alt="Spain" /></a>
<a href="EN_home.htm" title="Home_en"><img src="drapeaux/en.jpg" width="30" height="20"alt="English" /></a>
<a href="FR_home.htm" title="Accueil"><img src="drapeaux/fr.jpg" width="30" height="20"alt="French" /></a>
<strong>DOCKWEST</strong> Sector Alberes - 17487 Empuriabrava - Espagne Phone : 00 34 972 450 180/00 34 691 866 355 <langue>
</div>
</section>
</header>
<div id="menu"></div>
<ul id="navigation" class="nav-main">
<li><a href="FR_home.htm" title="Accueil">Accueil</a></li>
<li><a href="FR_Bateaux.htm" title="Réservations de bateaux Bateaux">Bateaux</a></li>
<li><a href="FR_Reservations.htm" title="Réservations">Réservations</a></li>
<li><a href="FR_Tarifs.htm" title="Tarifs">Tarifs</a></li>
<li><a href="FR_Contact.htm" title="Contact">Contact</a></li>
<li><a href="FR_Itineraires.htm" title="Itinéraires">Itineraires</a></li>
<li><a href="FR_Nos_partenaires.htm" title="Nos partenaires">Nos partenaires</a></li>
</ul>
<div id="corpsH"><p>
<img border="2" src="bateaux/ponton2.jpg" width="318" height="200" alt="Ponton de Dockwest"><p><br>
<img border="2" src="bateaux/sspermis.jpg" width="318" height="200" alt="Bateaux sans permis"><p><br>
<!-- ... La suite tu l'as -->
Et pour la feuille style.css :
@charset "UTF-8";
/* CSS Document */
* {margin:0; padding:0; font-size:100%; list-style:none;}
Body{
background:url(design/fond2.jpg) no-repeat #2b9ef7;
background-position:50% 0%;
margin:0;
padding:0;
font-family:Calibri, Verdana, Sans-serif;
font-size:100%
color:#ffffff;
}
#bloc_page{
width:1000px;
margin:auto;
}
/*header */
#langue {
width:100%;
margin:auto;
padding: 5px 0px 10px 5px;
text-align: center;
}
#menu {
width:975%;
height:455px;
}
#navigation { /*conteneur du menu*/
margin-left:10px;
clear:both;
width:98%;
height:30px;
background: #0a0397;
line-height:28px;
border-radius : 5px;
text-align:center;
color:#ffff00;
/*text-shadow:1px 1px 1px #ffff00;*/
text-decoration:none;
font-size:20px;
}
ul.nav-main li { /*règles générales des items de liste */
list-style: none;
margin: 0;
width:138px;
}
ul.nav-main { /*règles des items principaux*/
position: relative;
z-index: 597;
}
ul.nav-main li:hover > ul { /*apparition des sous-listes au survol de l'item principal ul*/
visibility: visible;
}
ul.nav-main li:hover { /*design des items de liste au survol*/
position: relative;
z-index: 599;
cursor: pointer;
background: #0a0397;
}
ul.nav-main li { /*positionnement, dimensions, couleurs et textes des items de liste*/
float:left;
display:block;
height: 30px;
color: #999;
font: 14px;
}
ul.nav-main li a { /*positionnement, dimensions, couleurs et textes des items de liste intégrant une redirection url*/
display: block;
height: 30px;
color: #999;
text-decoration:none;
}
ul.nav-main li a:hover { /* couleurs des items de liste au survol*/
color:#D6D6D6;
}
a{
color:#ffffff;
}
#corpsH{
float:left;
width:338px;
margin: 10px;
}
/* et là aussi tu as la suite ... */
Et voilà, si tu as des questions, n'hésite pas
Super à priori tes codes fonctionne sur Firefox et IE 8 et 9.
Sais tu comment faire pour que mes photos de la page bateau défile mais sur le même emplacement et non pas de droite à gauche comme c'est actuellement car je ne suis pas arrivé à le faire.
Dois je créée un tableau ????
Merci encore pour ton aide
Sais tu comment faire pour que mes photos de la page bateau défile mais sur le même emplacement et non pas de droite à gauche comme c'est actuellement car je ne suis pas arrivé à le faire.
Dois je créée un tableau ????
Merci encore pour ton aide
je n'ai pas le visuel de ces photos, l'adresse de ton site à été supprimé du post et je ne l'ai pas mémorisé ...
du coup je ne vois pas trop ce que tu me demande
du coup je ne vois pas trop ce que tu me demande
Adresse : http://www.dockwest.eu/FR_Bateaux.htm
Je ne souhaites pas que les images défilent de droite à gauche mais dans au même emplacement.
voici ce que j'ai mis pour l'instant
<div id="corpsB"><p><strong>DOCKWEST</strong> a él placer de usted presenta nuestra flota de barcos. <br>
Haga clic en la foto para acceder a los tableros de la tarifas.</p><br><br>
<marquee width="95%" scrollamount="9" onmouseover="this.stop()" onmouseout="this.start()">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral186" src="bateaux/page_bateaux/chaparral186.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral206" src="bateaux/page_bateaux/chaparral206b.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral15" src="bateaux/page_bateaux/chaparral215.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral236" src="bateaux/page_bateaux/chaparral236.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral226" src="bateaux/page_bateaux/chaparral226.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral240" src="bateaux/page_bateaux/chaparral240.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Capelli400" src="bateaux/page_bateaux/capelli400B.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Capelli626" src="bateaux/page_bateaux/capelli626b.jpg" border="0" height="450" width="600">
</marquee>
</div>
Merci de ton aide
Je ne souhaites pas que les images défilent de droite à gauche mais dans au même emplacement.
voici ce que j'ai mis pour l'instant
<div id="corpsB"><p><strong>DOCKWEST</strong> a él placer de usted presenta nuestra flota de barcos. <br>
Haga clic en la foto para acceder a los tableros de la tarifas.</p><br><br>
<marquee width="95%" scrollamount="9" onmouseover="this.stop()" onmouseout="this.start()">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral186" src="bateaux/page_bateaux/chaparral186.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral206" src="bateaux/page_bateaux/chaparral206b.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral15" src="bateaux/page_bateaux/chaparral215.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral236" src="bateaux/page_bateaux/chaparral236.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral226" src="bateaux/page_bateaux/chaparral226.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Chaparral240" src="bateaux/page_bateaux/chaparral240.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Capelli400" src="bateaux/page_bateaux/capelli400B.jpg" border="0" height="450" width="600">
<a href="FR_Tarifs.htm" title="Tarifs"><img title="Capelli626" src="bateaux/page_bateaux/capelli626b.jpg" border="0" height="450" width="600">
</marquee>
</div>
Merci de ton aide
j'ai pas trop le temps tout de suite mais je vais essayer de voir ça.
Ce défilement d'image n'est pas facile à visionner pour un utilisateur !
Pour ta thématique, je verrais plutot quelques choses comme ça :
http://www.dbmwebdesign.fr/Sliders-en-CSS3.html
c'est plus approprié qu'une galerie d'image en boucle pour faire un choix mais c'est toi qui vois (héhé, c'est ton site).
Tu peux pomper le code, c'est pour ça que je les mets en ligne (pour rendre service, je suis si bon ... lol).
Dis moi ce que tu en pense, à la limite si tu n'y arrive pas je peux te repréparer les codes pour ta page.
Ce défilement d'image n'est pas facile à visionner pour un utilisateur !
Pour ta thématique, je verrais plutot quelques choses comme ça :
http://www.dbmwebdesign.fr/Sliders-en-CSS3.html
c'est plus approprié qu'une galerie d'image en boucle pour faire un choix mais c'est toi qui vois (héhé, c'est ton site).
Tu peux pomper le code, c'est pour ça que je les mets en ligne (pour rendre service, je suis si bon ... lol).
Dis moi ce que tu en pense, à la limite si tu n'y arrive pas je peux te repréparer les codes pour ta page.
