Geckozone

Bonjour à tous,

Sous le titre barbare que vous avez pu découvrir en lisant le sujet se cache différents problèmes que je rencontre via la création de mon site web. Je suis débutant en codage, et le site en question est à l'origine un kitgraphique que j'ai choisi. J'ai quand même appris de ci de là les bases du html, et j'ai réussi à rendre ce site proche de ce que je voulais. Malheureusement je travaille depuis le début avec pour modèle IE, et en passant sur firefox (chose que je n'ai faite que récement), et c'est à ce moment que je me suis apperçu de divers problèmes que je ne rencontraient pas sous IE.

Voici l'adresse de mon site internet : http://asianspirit.free.fr/

1. la police différe selon IE ou firefox, et je préfère de loin celle qu'on trouve sous IE. J'ai une feuille de style css pourtant, je ne comprend pas le pourquoi de ce changement.

Voici mon code pour style.css

BODY {
scrollbar-face-color: #6D6D6D;
scrollbar-shadow-color: #404040;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #404040;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #404040;
scrollbar-arrow-color: #000000;
}
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.soustitre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
}
.texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.textepetit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}
a.liensMENU:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #427BC8;
text-decoration: none;
font-weight: bold;
}
a.liensMENU:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #427BC8;
text-decoration: none;
font-weight: bold;
}
a.liensMENU:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
text-transform: none;
}
a.liensMENU:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a.liensCOPY:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
a.liensCOPY:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
a.liensCOPY:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: underline;
font-weight: bold;
text-transform: none;
}
a.liensCOPY:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: underline;
font-weight: bold;
}
a.liensSIMPLE:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #427BC8;
text-decoration: none;
}
a.liensSIMPLE:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #427BC8;
text-decoration: none;
}
a.liensSIMPLE:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #427BC8;
text-decoration: underline;
text-transform: none;
}
a.liensSIMPLE:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #427BC8;
text-decoration: underline;
}
.lienSOUSTITRE:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.lienSOUSTITRE:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.lienSOUSTITRE:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: underline;
text-transform: none;
}
.lienSOUSTITRE:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
.texteclair {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}


2. Ayant choisi d'avoir une scrollbar colorée sous IE, et celle ci n'étant pas supportée par FF, j'ai remarqué que mon site se déportait sous firefox sur la gauche, selon qu'il y ait la scrollbar ou pas. Je m'explique : quand la scrollbar apparaît, mon site se déporte sur la gauche (un petit peu certes, mais déjà trop). Avec IE je n'ai pas ce problème, la scrollbar étant toujours présente.


3. Ceci n'a rien à voir avec IE ou FF, mais je cherche le moyen de faire marche la fonction "rechercher" qui se trouve dans mon menu à droite. j'avais fait quelques tests il y a de celà plusieurs mois, et malheureusement ils s'étaient très mal conclus.

Je suis à l'écoute de toutes les propositions qui seront faites, vous remercie d'avance pour vos réponses et le temps que vous m'accorderez. Désolé si je vous fais perdre du temps et si les réponses à mes questions vous semblent évidentes mais comme je l'ai dit précédement, je ne touche pas une bille en codage xD. Merci à vous et à bientôt!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mrl a écrit :1. la police différe selon IE ou firefox, et je préfère de loin celle qu'on trouve sous IE. J'ai une feuille de style css pourtant, je ne comprend pas le pourquoi de ce changement.

Eh bien, je n'ai pas IE pour comparer, mais je ne vois pas de problème manifeste dans ton code, tu as bien défini une police générique ce qui fait que ça semble s'afficher correctement chez moi (aucune des polices spécifiées n'est installée)...
Tu peux essayer de faire valider ton code HTML : http://jigsaw.w3.org/css-validator/vali ... free.fr%2F
Mais à part les scollbars il ne semble pas y avoir de vrai gros problème (tout au plus quelques warnings qu'il serait bien de corriger, mais rien de très très grave).

Mrl a écrit :2. Ayant choisi d'avoir une scrollbar colorée sous IE, et celle ci n'étant pas supportée par FF, j'ai remarqué que mon site se déportait sous firefox sur la gauche, selon qu'il y ait la scrollbar ou pas. Je m'explique : quand la scrollbar apparaît, mon site se déporte sur la gauche (un petit peu certes, mais déjà trop). Avec IE je n'ai pas ce problème, la scrollbar étant toujours présente.

Effectivement je crois qu'IE affiche toujours une scrollbar (ce que je me permet de trouver un peu stupide).
Regarde du côté de la propriété overflow : http://www.yoyodesign.org/doc/w3c/css2/ ... l#overflow
Je ne sais plus ce qu'il fallait faire pour toujours avoir une scrollbar dans Firefox (ou alors c'était pour la supprimer dans IE ? ... plus tout à fait sur).

Plus généralement, c'est du web, donc tu peux oublier la mise en page au pixel près : de toutes façons ça ne s'affichera pas pareil partout !

Mrl a écrit :3. Ceci n'a rien à voir avec IE ou FF, mais je cherche le moyen de faire marche la fonction "rechercher" qui se trouve dans mon menu à droite. j'avais fait quelques tests il y a de celà plusieurs mois, et malheureusement ils s'étaient très mal conclus.

Les boutons doivent être dans un formulaire (balise <form> avec une action. Ensuite, côté serveur, à toi de mettre en place le script qui gèrera ça.
Je te conseille de renommer les boutons pour leur donner des noms plus explicites que "Input53". Évite également les onFocus="this.value=''", qui vident le formulaire quand on y revient, c'est très désagréable de devoir tout retapper


Sinon, ta mise en page est tout en tableaux...
Les CSS permettent bien plus que de définir la police
Lire par exemple ici : http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html
http://cybercodeur.net/weblog/presentat ... index.html

Voilà, j'espère que je ne suis pas trop à côté de la plaque et que je ne te parles pas trop chinois (si c'est le cas, n'hésite pas à hurler très fort )

Bonne chance

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.3) Gecko/20061201 Firegecko Firefox/2.0.0.3 (Ubuntu-feisty)

Eh bien ici, sous windows, je viens de tester avec IE... je ne vois pas de différence, si ce n'est que ça me semble encore plus petit que sous Linux (peut-être une question d'écran de qualité moyenne)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Tout d'abord, merci de ta réponse Calimo!

J'ai noté les différentes erreurs de ma fiche css, mais en effet, les erreurs sont minimes (à part la dite scrollbar xD). Malheureusement, le fait que l'écriture change me gène un peu car ça change l'aspect du site, à savoir que si je fais plus de 6 lignes dans mes introductions, l'image qui se situe sur le côté de la dite intro va changer de place (oui je sais c'est complexe, mais j'ai vraiment des problème au niveau du codage, et je n'ai pas d'autre moyen que celui ci pour que mon site soit niquel chrome) OR, la police est un peu plus grande que sous IE et des fois l'intro qui fait 6 lignes sous IE en fait 7 sous FF. Je dois être un très mauvais codeur pour avoir de tels dilemnes :'(.

Sinon j'ai lu le site sur les overflows que tu m'a gentiment donné, et comme tu peux t'en douter suite à mon explication précédente, je n'ai rien compris, pourtant ce n'est pas faute d'essayer. Mais même après trois lectures je n'ai rien trouvé qui semblerait m'aider dans mon but de garder mon site web à la même place. Pourtant j'étais intéressé par le fait qu'on aurait pu faire appraître tout le temps le scrollbar sous FF, ça m'aurait pas mal aidé.

Concernant les tableaux, j'ai appris les bases du codage il y a de ça quelques années, et à l'époque c'est comme ça que je fonctionnais. J'ai donc recourt à ce moyen uniquement par nécessité, pas par choix lol.

Enfin bon désolé de t'embéter avec mes romans, je suis touché que tu m'apporte ton aide, bien que je sois encore perdu, je suis sûr que petit à petit je vais y arriver! Je continuerai à lire les sites que tu m'as fournit, peut être que je finirai par assimiler leur contenu. Merci!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mrl a écrit :J'ai noté les différentes erreurs de ma fiche css, mais en effet, les erreurs sont minimes (à part la dite scrollbar xD). Malheureusement, le fait que l'écriture change me gène un peu car ça change l'aspect du site, à savoir que si je fais plus de 6 lignes dans mes introductions, l'image qui se situe sur le côté de la dite intro va changer de place (oui je sais c'est complexe, mais j'ai vraiment des problème au niveau du codage, et je n'ai pas d'autre moyen que celui ci pour que mon site soit niquel chrome) OR, la police est un peu plus grande que sous IE et des fois l'intro qui fait 6 lignes sous IE en fait 7 sous FF. Je dois être un très mauvais codeur pour avoir de tels dilemnes :'(.

Je dois avouer que je ne vois pas du tout ce dont tu parles
Une petite capture d'écran pour tirer ça au clair ? Ou bien c'est sur une page précise ?
Comme je l'ai dit, il faut de toutes façons se souvenir que l'utilisateur n'a pas nécessairement la police X, et donc que si tu as quelque chose qui "casse" ton design, il faut le repenser pour qu'il puisse s'adapter (mais comme je n'ai toujours pas compris de quoi il s'agit...)

Mrl a écrit :Sinon j'ai lu le site sur les overflows que tu m'a gentiment donné, et comme tu peux t'en douter suite à mon explication précédente, je n'ai rien compris, pourtant ce n'est pas faute d'essayer. Mais même après trois lectures je n'ai rien trouvé qui semblerait m'aider dans mon but de garder mon site web à la même place. Pourtant j'étais intéressé par le fait qu'on aurait pu faire appraître tout le temps le scrollbar sous FF, ça m'aurait pas mal aidé.

En fait, je pense que cette technique était plutôt faite pour enlver la barre inutile dans IE...

Là encore, oublie le design au pixel près, ou alors fais un livre
Préfère quelque chose de souple !

Mrl a écrit :Concernant les tableaux, j'ai appris les bases du codage il y a de ça quelques années, et à l'époque c'est comme ça que je fonctionnais. J'ai donc recourt à ce moyen uniquement par nécessité, pas par choix lol.

Excellente occasion pour apprendre les css plus à fond (et en particulier le positionnement)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Rebonjour,

Voila pour que tu ai un petit apperçu de ce dont je parle (je chippote je le sais bien mais j'aimerai la perfection pour mon site, autant pour les visiteurs que pour mon plaisir personnel xD)

http://t.suchet.free.fr/IE%2001.JPG Voici mon index sous IE.
http://t.suchet.free.fr/FF%2001.JPG Le voici maintenant sous firefox.

Et maintenant l'une des pages pour laquelle le problème est génant :

http://t.suchet.free.fr/IE%2002.JPG La fameuse page sous IE.
http://t.suchet.free.fr/FF%2002.JPG Et maintenant sous FF.


Suis je trop perfectionniste?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mrl a écrit :Rebonjour,

Voila pour que tu ai un petit apperçu de ce dont je parle (je chippote je le sais bien mais j'aimerai la perfection pour mon site, autant pour les visiteurs que pour mon plaisir personnel xD)

http://t.suchet.free.fr/IE%2001.JPG Voici mon index sous IE.
http://t.suchet.free.fr/FF%2001.JPG Le voici maintenant sous firefox.

Ok, je vois, en fait c'est la même police, sauf qu'une est lissée, et l'autre pas.
Manifestement tu n'as pas le lissage activé sur ton système... est-ce que IE7 l'activerait automatiquement sans tenir compte de tes préférences système ? C'est probablement un comportement que tu peux désactiver (ou alors activer pour tout le système)
(En tous les cas c'est une préférence de l'utilisateur, que tu ne pourra pas modifier dans ta page web).

Mrl a écrit :Et maintenant l'une des pages pour laquelle le problème est génant :

http://t.suchet.free.fr/IE%2002.JPG La fameuse page sous IE.
http://t.suchet.free.fr/FF%2002.JPG Et maintenant sous FF.

Suis je trop perfectionniste?

Voici ce que j'ai chez moi :

Eh oui, c'est encore différent !

Je ne pense pas que tu sois trop perfectionniste, au contraire, c'est très bien d'avoir un site très bien fini !
Le truc, c'est que tu as devant toi du web, donc tu dois faire avec la variabilité : polices installées, tailles préférées (beaucoup de personnes agrandissent les polices trop petites comme la tienne), résolution, etc.
Donc, pour faire un site bien fini, tout réside dans la souplesse de celui-ci : être capable de se déformer correctement
Ici il te faudra trouver un autre moyen de positionner ton image, pour qu'elle se trouve toujours à la même distance du cadre Photo. Et là, je dois avouer qu'avec ta mise en page en tableaux, je ne pourrai pas t'aider

Un conseil : utilise la barre d'outils Web Developer pour tester tes sites dans plein de conditions différentes (CSS désactivé, Javascript désactivé, résolutions différentes, etc.)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

PS : Tu pourrais faire ça beaucoup plus simplement et automatiquement avec des CSS

calimo a écrit :Le truc, c'est que tu as devant toi du web, donc tu dois faire avec la variabilité : polices installées, tailles préférées (beaucoup de personnes agrandissent les polices trop petites comme la tienne), résolution, etc.
Donc, pour faire un site bien fini, tout réside dans la souplesse de celui-ci : être capable de se déformer correctement

Je reformule, parce que je ne pense pas que ce soit clair
Le problème, c'est pas que le texte tienne sur une ligne en plus, mais que l'image se trouve décalée. Tu l'as dit toi-même, et clairement noté sur une capture d'écran.
Alors pourquoi est-ce que tu te fixes sur la taille du texte si ce n'est pas ça le vrai problème ? Corrige le vrai problème, et laisse ce qui n'en est pas un (la taille du texte) de côté

Voilà j'espère que c'est plus clair

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Oui j'ai tout à fait compris ton message, et après ce que tu viens de me dire je pense en effet que c'est la seule solution! Je pense essayer de faire du changement (positif si possible), mais ça va me prendre un petit peu de temps. Merci pour tes conseils, et au plaisir! ^^

Bonne continuation.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mrl a écrit :http://t.suchet.free.fr/IE%2001.JPG Voici mon index sous IE.
http://t.suchet.free.fr/FF%2001.JPG Le voici maintenant sous firefox.

Hello,
Pour être précis, le lissage de police ClearType est activé dans IE mais pas dans ton système (c'est absurde, mais c'est ce que fait IE7 à l'installation).

Pour que les polices soient lissées de la même façon dans tous les programmes (y compris Firefox), et de manière adaptée à ton écran, tu peux utiliser le ClearType PowerToy, qui s'installe dans le Panneau de configuration.

Merci pour cette précision, mais je ne sais pas encore si je vais télécharger le programme ou pas, car j'aimerai pouvoir voir la différence qu'il existe entre ie et ff (sur mon pc en tout cas). D'ailleurs je me demande si ie lisse automatiquement les polices sous chaque pc ou si ça ne vaut que pour le mien.

Encore merci à vous deux, et je vous souhaite une bonne continuation.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Eh bien sur mon ordi (enfin, celui sur lequel je bosse) ce n'est pas lissé (et heureusement, du ClearType sur un écran cathodique... où irait-on ? ), mais j'ai trouvé où est l'option : Dans Avancées > multimédia

Peut-être qu'il est capable de distinguer les écrans plats des cathodiques ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Mrl a écrit :D'ailleurs je me demande si ie lisse automatiquement les polices sous chaque pc ou si ça ne vaut que pour le mien.

Je ne suis pas absolument certain parce que j'avais d'abord installé la beta et que de toute façon ClearType était déjà activé sur mon système, mais je pense qu'il pose la question au premier lancement. Donc on ne peut même pas dire "avec IE6 c'est désactivé mais avec IE7 c'est activé".

De plus, comme le dit Calimo, les utilisateurs d'écran cathodique l'ont probablement désactivé dans tous les cas.

Bon, mais normalement c'est juste un lissage donc ta mise en page n'en sera jamais affectée. Les lettres resteront à la même place et ne se mettront pas à déborder ou à aller à la ligne pour autant.