compatibilité avec IE

[Isabau]

Bonjour à tous, je viens faire un appel au secours ....Je viens de mettre ma boutique en ligne, faite avec Kompozer, sur les conseils de mon hébergeur.
Je navigue avec Firefox et j'ai toujours vérifié mes constructions de page qu'avec lui, malheureusement, il ne m'est même pas venu à l'idée de vérifier avec IE....Et bien, quelle mauvaise surprise ....C'est affreux...Certaines images ne sont plus à leur place, les polices d'écritures varient, certaines "pièces" de mes graphismes ne sont pas bien en place, enfin, c'est la cata totale et une mauvaise navigation pour les visiteurs bien entendu, lorsqu'on sait qu'il y a plus de monde qui surfe sur le net avec IE, ces gens n'auront guère envie de rester sur ma boutique....
Bref, est-ce quelqu'un peut m'expliquer comment je peux rendre mon site compatible avec IE.
Je vous annonce de suite que je travaille très peu en CSS, je n'y connais absolument rien (il y en a quand même sur le site, car c'est le programmeur qui s'en est occupé)....Je préfère poser mes dessins et mes textes, puis un peu de html....

A tout hasard, si cela peut vous servir voici le lien de la boutique : http://www.la-boutique-isamarys.com histoire de voir comment cela se passe sous IE et Firefox.

Un grand merci à la personne qui pourra me conseiller. Excellente fin de journée à tous. Isabau

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

[Mongo Bob]

A tout hasard, si cela peut vous servir voici le lien de la boutique : http://www.la-boutique-isamarys.com

c'est même indispensable.
ceci dit, je ne constate rien, mais alors rien , en ce qui concerne des différences notables d'affichage entre IE et FF. L'affichage IE est identique, y compris en 800x600.

quelle mauvaise surprise Pleure ou Très triste ....C'est affreux...

ah bon?

Je peux te faire quelques copies d'écran, si tu veux, de quelles pages parles-tu? Peux-tu être plus précise?


PS D'autre part, le design est excellent, la sémantique euh... y'en a pas, il faudrait quand même une balise <h1> pour le titre principal, quand même...

[Fabrice.Tres.Net]

Pareil, cela a l'air bon sur IE 7 aussi...

Peut-être que le problème vient d'un fichier css mal chargé, cela arrive.

Les fontes utilisées sont classiques, donc présentes sur beaucoup d'ordi, cela ne doit pas poser beaucoup de problèmes.

Le site est très agréable.

Techniquement il y a bien l'usage inapproprié des tableaux dans un rôle de mise en forme, mais bon on va passer c'est une notion pour puriste, cela ne jouera que sur lévolution du site comme varier sa présentation.

[Isabau]

Bonjour Fabrice.Tres.Net et Bonjour à Mongo Bob,

Tout d'abord, je vous présente toutes mes excuses, je viens lire les conseils qu'aujourd'hui (le 22)....J'avais l'air si "démunie" sur le dernier message.... ....Un peu de famille pendant les vacances, et voila le résultat.

Première chose : un grand merci à tous les deux pour avoir eu la gentillesse de répondre. Vous me rassurez aussi beaucoup, mais ce que je ne comprends pas du reste, c'est lorsque je visite ma boutique sur l'ordinateur portable (IE y est installé), et c'est sur lui que j'ai vu certaines bizarreries : la police qui était plus grande sur certains mots, alors que c'est du verdana avec la même taille partout...Puis des images qui ne sont pas placées au même endroit, enfin, des petites choses qui m'énervaient..... . Si pour vous, la navigation est agréable, c'est tout de même incompréhensible. Enfin, j'essaierai de trouver ce qui cloche.

Deuxième chose, merci pour vos compliments au sujet des graphismes, j'ai voulu faire une petite boutique accueillante et surtout reposante.
En ce qui concerne la balise "h1" pour le titre, je vais en placer une. Juste une question un peu innocente : est-ce que cette balise a une grande importance puisque j'ai mis des méta title ?

Mongo Bob : que veux-tu dire par sémantique, je sais ce que cela veut dire, mais quel rapport avec les textes du site ?

Fabrice, tu me parles de "tableaux inappropriés" : comment faire tenir ses images en place s'il n'y a pas un tableau pour les "maintenir" ? elles se promènent partout sinon....Enfin, bon, je précise encore une fois que je ne suis vraiment pas très douée en ce qui concerne les codes, cela dit, j'apprends très vite lorsqu'il le faut (en plus je trouve ça super intéressant, mais il faut beaucoup de temps pour apprendre tout ces langages...Un jour viendra).

Sur ce encore merci pour votre gentillesse et passez une excellente soirée. Isabau

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

[Fabrice.Tres.Net]

Le positionnement d'un élément (photo, texte,...) devrait être fait par les feuilles de styles, les fameuses CSS.

Chaque élément peut être placé au choix:
- à la suite du précédent
- en relatif par rapport à un autre élément
- en absolue dans la page
- en position fixe c'est à dire que l'élement sera fixé par rapport à l'écran.

Jette un oeil rapide là pour te faire une idée en regardant les dessins:
http://css.alsacreations.com/Bases-et-i ... ses-en-CSS

Je t'invite à jeter un oeil au site du zero qui est très adapté même pour les débutant(e)s.
http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html
http://www.siteduzero.com/tuto-3-6-0-ap ... tml#part_8

Bonne lecture.

[Isabau]

Merci Fabrice pour cette réponse si rapide, il va bien falloir que je m'y mette à ces "CSS", en plus je comprends tout à fait à quoi elles servent, mais pas évident de mettre tout ceci en place, je vais essayer de faire quelque chose, de plus avec le "site du zéro" je devrais théoriquement m'en sortir, il est vrai que ce site est super bien fait, mais je n'en ai pas fait la lecture complète encore, il y a tellement de choses, il faudrait faire que ça.... ,

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

[Fabrice.Tres.Net]

Une astuce pour se faire la main avec les CSS, c'est d'installer l'extension webdevelopper, cela te permet de faire des tests ou simulation en "direct" sur ton site ou même sur le site d'un autre.
Je vais essayer de retrouver un post que j'ai fait "autrefois" sur ce point.

[Mongo Bob]

En ce qui concerne la balise "h1" pour le titre, je vais en placer une. Juste une question un peu innocente : est-ce que cette balise a une grande importance

Les balises <h1>, <h2>, <h3> jusqu'à <h6> sont extrêmement importantes, en fait, on n'a pas forcément besoin d'aller jusqu'à <h6>.
C'est pour structurer les titres et sous-titres de la page.
Deux sortes de machine en ont besoin, au moins : les robots des moteurs de recherche, et les lecteurs d'écran et autres interfaces pour non-voyants. Plus il y a de la sémantique, plus ces deux-là ont à se mettre sous la dent.
La sémantique signifie que le code html doit respecter une logique littéraire interne, exactement comme un roman ou un essai correctement écrit : si c'est pour vendre des hamburgers en ligne, la structure littéraire restera simple (quoiqu'il faudra bien détailler les mérites du "Super Spécial Chief" aux oignons, par rapport au "Super Special Chief sans oignon mais avec sauce caramélisée à saveur oignons", par exemple), mais elle existera réellement. La sémantique web signifie que chaque ligne de code doit avoir une signification, ainsi, <h1> signifie "titre de 1ère importance de la page", et apparaît dans la page html. Le robot comprend que ce qui est sous <h1> doit être mis en valeur par rapport à tout le reste de la page....

puisque j'ai mis des méta title ?

Pas "des", une seule!
Il n'y a absolument pas double emploi, mais c'est curieux, j'ai jamais utilisé <meta title>, seulement <title>, j'ai pas trouvé à quoi sert <meta title>...
Sémantique html (sémantique web est autre chose, pas mal de ressources sur ces mots sur le web) http://openweb.eu.org/articles/respecter_semantique/
celui-ci, surtout (courage, il est vite lu!):
http://www.surlignage.com/09-03-2007/html-semantique/
On y voit que seules 2 balises html sont vides de sens, (en fait leur seul sens, c'est qu'elles n'en ont pas, ce qui est trés utile!) : <div> et <span>.
Bon courage pour ton site, une chose à la fois, dans un 2ème temps, tu laisseras tomber les tableaux!

[Ymai]

Bref, la sémantique, ça sert à vendre des hamburgers en ligne.
Ou bien je n'ai rien compris?

Chimay bleue pour tout le monde?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.12) Gecko/20080207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12

[Mongo Bob]

Ou bien je n'ai rien compris?

je vois que j'ai été clair.

[Isabau]

Bonjour à vous trois,

Je suis super contente, vous êtes vraiment des pro. Vos conseils sont vraiment très clairs (pour une fois j'ai tout compris.... ).
Un grand grand merci, si tous les forums fonctionnaient avec des personnes aussi charmantes que vous, ce serait le top.

Je vais donc m'occuper de ces "h1-2-....".
Pour la sémantique, c'est compris ; au départ, je pensais que cela concernait mon contenu propre, je ne voyais donc pas comment faire autrement pour présenter mes articles, alors que mes textes sont "théoriquement" sans faute, avec d'excellentes bases en grammaire, vocabulaire etc....Maintenant, grâce aux explications, je m'aperçois que cela concerne l'envers du décors : les codes...c'est en fait une énorme partie du travail, si l'on veut que son site soit retrouvé par les moteurs de recherche et autres robots....A ne pas négliger surtout...

Pour "les" méta title, effectivement, il n'y en a qu'une pardon....! J'écrivais les méta, car j'en ai inséré plusieurs comme : title - description - keywords - url - langage....etc...

En fait que dois-je faire alors avec la balise "h1" ?, je la mets à la place de "<meta name="TITLE" content="le titre de ma page">, ce sera la seule question pour aujourd'hui

Un grand merci à vous deux pour tous ces liens, je me note tout ça sur mon "ptit cahier" (très pratique pour se souvenir de tout), et je vais pouvoir me mettre au travail afin d'optimiser mon site au mieux. Et comme tu l'écris si bien Fabrice, on attendra un peu pour les tableaux, chaque chose en son temps, sinon, je vais me perdre un peu dans tout ça.

Encore une fois merci pour tout, je vais pouvoir avancer un peu plus. Excellente fin de journée. isabau






Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

[Isabau]

coucou, c'est encore moi, après le mail précédent, j'ai commencé par installer la barre "Web developper". Et bien dites-donc ! c'est une "sacrée barre d'outils" !.
Il y a moyen de faire des tonnes de choses avec, enfin, je le suppose....car je ne sais pas m'en servirrrrrr Je comprends les boutons aucun soucis à ce sujet.
Mais la question est : comment l'utiliser pour développer son propre site ? (je ne suis peut-être pas très claire là....???).

A votre avis, où puis-je trouver des infos précises sur cette barre afin que je puisse faire mes manip. Sinon, je vais tourner autour du problème je ne sais combien de temps...Il est évident que je vais "cliquer" partout, car je suis un peu curieuse de nature, mais cela ne m'avancera pas à grand chose, il faut que je sache l'utiliser pour améliorer mon site.

S'il vous reste qqes liens dans votre coffre à trésors, je suis preneuse pour en faire la lecture et de ce fait l'apprentissage.
Il va falloir que j'achète un bon coussin pour l'installer sur la chaise du pc... ).
Merci par avance, je vais m'occuper de la sémantique maintenant pendant que c'est encore calme à la maison....
Isabau

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

[chinon37]

Bonjour à vous trois,

Et les autres alors?
Bonjour à toutes et tous,

En fait que dois-je faire alors avec la balise "h1" ?, je la mets à la place de "<meta name="TITLE" content="le titre de ma page">, ce sera la seule question pour aujourd'hui

les balises <h1>, ... ne sont pas des balises méta mais bel et bien des balises html au même titre que <body> <div> <td> et autres...
<p> est la balise qui désigne un paragraphe
ainsi dans:

Code : Tout sélectionner

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>

<p> et </p> délimitent le paragraphe
dans le même ordre d'idée:

Code : Tout sélectionner

<h1>ceci est le titre</h1>

<h1> et </h1> marque un titre de niveau 1. Ainsi, il est possible de définir des titres de niveau 1 (le plus important) à 6 (le moins important).
Pour te rendre compte du résultat, tu peux copier le code ci-après dans l'onglet source de KompoZer:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-15"
 http-equiv="content-type"><title></title><meta
 content="Moi en personne" name="author"></head><body><h1>ceci
est le titre</h1><p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum. </p></body></html>

[Mongo Bob]

et bien, j'ai l'impression qu'il n'y a pas de tutoriel en français sur Webdev, on découvre les fonctionnalités au hasard, c'est Fabrice.Tres.Net qui m'a fait découvrir la possibilité d'éditer les css.
Faudrait quelqu'un qui ait le courage de rédiger un tutoriel...
Moi, j'en profite parfois pour faire une notation rapide de l'accessibilité d'un site, avec Images/Désactiver les images/Toutes les images, le menu principal disparaît : 0/20 d'office!
Avec Redimensionner/800x600 : le scroll horizontal apparaît? -5 points!
Avec Entourer/Entourer les titres (h1-h6) : pas de titre entouré? -10 points!
Scrogneugneu.

[chinon37]

et bien, j'ai l'impression qu'il n'y a pas de tutoriel en français sur Webdev, on découvre les fonctionnalités au hasard,

ceci, peut-être?