HTML et navigateurs internet

Fermé
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006 - 3 oct. 2006 à 20:44
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006 - 9 déc. 2006 à 11:11
Bonjour, j'aimerais savoir comment ça se fait qu'avec un même code HTML, la page ne s'affiche pas pareil suivant le navigateur ?
Jusqu'à présent j'utilisais Internet Explorer et là je viens de voir ma page avec Firefox c'est pas du tout pareil. J'avais fait en sorte que les liens hypertexte ne soient pas soulignés, mais avec ce dernier ils le sont.
Y-a-t-il quelque chose à faire ?
Merci d'avance.
PS : ma page : http://flodidees.free.fr
A voir également:

12 réponses

Mets le style dans la balise href: <A HREF="../informatique/informatique.html" style="text-decoration: none">
Ca devrait gazer :-)
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
4 oct. 2006 à 01:43
Bonjour,

Au préalable, excuse si ces remarques et propositions sont de trop :
choisis un autre charset.
Un charset=iso-8859-1(ou 15) serait plus universel.
“Pour créer une page internet… on peut utiliser un simple traitement de texte”
“Pour créer une page internet… on peut utiliser un simple éditeur de texte”, pas un traitement de texte, et Wordpad n'est pas un simple éditeur.
Il existe des éditeurs plus évolués qui colorent la syntaxe, par exemple. Tel Notepad2 www.framasoft.net/article2917.html ou TextWrangler www.barebones.com/products/textwrangler/index.shtml (tous deux gratuits) ce qui aide.
“FrontPage Express est gratuit”. Nvu www.framasoft.net/article2243.html pourrait le remplacer. Il est aussi gratuit.
Les balises, attributs sont de préférence en minuscules. À “<A HREF="URL…"> </A>” on peut substituer “<a href="url…"> </a>”, à “#FFFFFF” on peut substituer “#fff”.
Évite les valeurs fixes en cm ou pt. À “margin-left: 3cm”, préfère “margin-left: 7em” ou “nnpx” ou “nn%”… plus adaptables.
Le “STYLE="page-break-before: always"” produit un saut de page avant la première page et donc une page vide à l'impression.

Revenons à ton problème.
Tu places tes liens <a> dans des <p> et tu inscris le texte des <a> dans des <span>. C'est dans ces <span>, inutiles, que la decoration du texte est enlevée.
Il faudrait qu'elle soit appliquée dans la <a>, pas en dehors :
De
“<a href="…"></a><span style="text-decoration: none">xxx</span>”
fait
“<a href="…" style="text-decoration: none">xxx</a>”

Mais il est possible de faire “plus simple”, en tout cas, plus pratique.
Ton code est un peu contradictoire. Il utilise une <STYLE> (<style>) mais uniquement pour définir les marges de la page.
Par contre il est truffé de précisions locales et redondantes qui pourraient y être déplacées.
“<P ALIGN=CENTER STYLE="margin-bottom: 0.3cm"><A HREF="../jeux/jeux.html"><SPAN STYLE="text-decoration: none"><FONT SIZE=2><FONT FACE="Comic Sans MS, cursive"><FONT COLOR="#000080">Jeux</FONT></FONT></FONT></SPAN></A></P>” pourrait être
“<p style="margin-bottom:0.3cm; text-align:center"><a href="../jeux/jeux.html" style="text-decoration: none"><font size=2 face="comic sans ms, cursive" color="#000080">jeux</font></a></p>”.

On trouve aussi “<FONT FACE=> <FONT SIZE=> <FONT COLOR=>”, 3 balises <font> dont 2 sont inutiles.
Ailleurs, “<FONT STYLE="color: #ffffff"> <FONT COLOR="#ffffff">” produit exactement la même chose, du texte en blanc.

Il est recommandé de séparer l'apparence du contenu.
Alors, définis ton menu dans une liste et modifie directement l'apparence des <a> avec des styles.
Les lignes du dessus sont plus lisibles comme ça
“<li><a href="../jeux/jeux.html">Jeux</a></li>”
non ?
Bien sûr il faut avoir défini un style correspondant “#menu li a { text-decoration: none; }”.
Et ça permet de petits (ou pas) effets assez facilement : “#menu li a:hover { color : #fff; }”.


Tu pourrais donc avoir une feuille de styles externe qui regroupe ces réglages et que tu pourrais appeler pour chaque page. Ce qui allègerait encore le poids, même s'il est léger, de tes pages.

Regarde ici :
gihef.bey.free.fr/CCM/navigateurs/sommaire.html
j'ai repris une de tes pages en y appliquant ces quelques modif.
Affiche le code-la source pour voir comment ça s'est simplifié.
J'espère que tu trouveras ça constructif (-:

+
Vois www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html et www.alsacreations.com/ ou openweb.eu.org/css/
Tu pourrais aussi vérifier l'apparence de tes pages dans Opera www.opera.com/ ou autre.
J'aimerais bien voir la vague du haut au moins jusqu'au trait que j'ai positionné sous l'en-tête (visible dans Firefox seulement ?)
0
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006
4 oct. 2006 à 10:50
J'utilise un éditeur HTML d'Office One, c'est lui qui me fait le code.
Si je descend la vague elle va etre déformée...
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
4 oct. 2006 à 22:05
À voir ta page, j'ai pensé que tu avais découpé l'image toi-même.
Et que tu pouvais donc la recadrer aux dimensions de ton choix.

Au cas où, je t'ai mis un exemple de cette manip. ici :
http://gihef.bey.free.fr/CCM/navigateurs/mer.html

+ Ton image d'en-tête fait 829px de large à l'origine. Tu l'affiches à 736px. Elle est donc déformée, tassée en largeur.
0
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006 > Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
5 oct. 2006 à 21:14
En fait j'ai utilisé 2 photos car je ne pouvais pas prendre une seule photo pour voir la plage et les vagues. J'ai donc coupé les 2 photos de manière à ce qu'elles coïncident le mieux possible et en évitant les surfeurs...
0
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006
4 oct. 2006 à 20:42
Comment as-tu fais pour "remonter" le dernier lien hypertexte nommé "Liens" sur l'image ? Je n'y arrive pas... pour moi il reste au dessous.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006
4 oct. 2006 à 20:47
J'ai rien dit, j'ai trouvé.
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
4 oct. 2006 à 23:37
Pour pallier à ce problème, si ta liste risque de s'allonger par exemple, tu peux ruser un peu.

Dans cet exemple, http://gihef.bey.free.fr/CCM/navigateurs/sommaire2.html j'ai dupliqué une partie du bas de l'image de fond du menu gauche.
Pour compenser encore le risque de texte tombant dans le fond blanc de la page, j'ai aussi mis une couleur de fond se rapprochant de celle du bas de la photo.
0
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006
5 oct. 2006 à 19:55
Dans ma toute première page, normalement on est censé entendre le bruit de l'océan, mais il n'y a aucun son avec Firefox. C'est quelle ligne qui bugg ? Comment faire pour y remédier ?
Et pourquoi lorsque j'enregistre ma page dans les favoris, aulieu de lire le nom de la page que j'ai mis entre les balises <title>, il s'inscrit : http--flodidees.free.f- ?
0
faudra revoir un peu la page d'exemple car:
-sous IE tout est en bold
-sous Firefox tout est en regular
-sous Opera (qui cherche toujours à contenter tout le monde) la page centrale est en bold et le menu en regular

A titre d'info hein.
0
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006
5 oct. 2006 à 20:53
Ca veut dire quoi "bold" et "regular" ?
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
5 oct. 2006 à 21:32
“bold” = gras, “regular” = normal.
Ne t'inquiète pas, c'est la manière de king de contribuer.
Les échanges entre l'anglais et le français, ça va, ça vient…

"OFFICE One 6.0 (Win32)" est un produit Microsoft ?
La balise <bgsound> est un composant spécifique à IE. Si tu veux que tout le monde en profite, il faut t'y prendre autrement.
Ici lecteur universel un intervenant propose une solution très facile.
Je l'ai essayée ici : gihef.bey.free.fr/CCM/navigateurs/accueil.html
Il faut que tes visiteurs n'aient pas désactivé Javascript pour que ça fonctionne.
Ah, zut, il ne supporte pas les .mid. Il va falloir trouver autre chose. As-tu un moyen de le convertir ?

Pour l'apparence dans les favoris, tu peux remarquer que les “/” sont remplacés par des “-”. Ces caractères sont réservés.
Et puis, tu peux certainement trouver quelque chose de plus poétique que l'adresse de la page (qu'on retrouve dans la barre du même nom) (-;
0
flo33 Messages postés 17 Date d'inscription lundi 12 avril 2004 Statut Membre Dernière intervention 9 décembre 2006
9 déc. 2006 à 11:11
0
Vi désolé, c'est à cause de photoshop qui pourtant en français continue de causer en anglais, bref l'habitude :-)
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
5 oct. 2006 à 22:38
La solution pourrait être l'utilisation de <embed> qui permet d'implanter des objets dans une page.
Une explication ici http://perso.orange.fr/bernard.quevillier/toposnew/embed.htm

Es-tu sûre que tes fichiers son sont valides ?
Ils ne fonctionnent pas. Alors que le fichier de la page d'exemple se fait entendre.

C'est la première fois que je le fais, mais ils ont été ajoutés dans http://gihef.bey.free.fr/CCM/navigateurs/accueil.html
Le lecteur est visible, mais il facile de le cacher en lui spécifiant un “ style="visibility:hidden;"”. Comme je l'ai fait avec le fichier exemple.
Normalement tu en verras 2. Le 3e, caché, c'est le son que tu entendras.
J'ai testé tout ça dans différents navigateurs sur mon Mac. Ils font tous la même chose. Ce que j'ai décrit.
Je ne sais pas si IE accepte de les faire fonctionner correctement.
Pour pallier à un éventuel défaut, j'ai déplacé ce 3e lecteur en dehors de la page. C'est une bidouille limite, mais qui peut rendre service. Au style, j'ai ajouté “margin:-1000px 0 0 -1000px;”
Imagine le lecteur décalé de -1000px, en haut et à gauche, en dehors de ton écran…
0