Discussion :

[ickyknox]

bonjour

sur :
http://icreatorbeta.free.fr/

j'ai ouvert dans mon dossier source, mon accueil.html
La page est correcte et mes div sont bien placées.

Après avoir transmis mon dossier sur filezilla, sur internet le résultat n'est pas du tout le meme :
- mon bloc BIENVENUE n'a plus d'arrière plan violet
- mon bloc PRESTATIONS n'est plus aligné par rapport au bloc Bienvenue (il est un peu plus bas)
- le bloc CADEAU est plus bas

je ne comprends pas du tout ce qui se passe. Auriez vous une idée s'il vous plait ?

je vous remercie

[bob633]

Sur un autre poste pour tes bordures, j'ai cru voir que tu mettais le chemin entier pour tes images etc dans ton css.

Tu dois avoir des soucis de liens ... Regarde la source de ta page, va jusqu'au css et clique sur tes liens images voir si ils sont valides.

Pour le reste, je sais pas trop. Je pense pas que le HTML puisse changer comme ça du local à en ligne.

[ickyknox]

le chemin devrait etre bon, puisque lorsque j'ouvre mon html hors ligne, ca fonctionne.

Ce n'est accédant à mon site web que tout déraille.

J'ai pourtant tout réactualisé sur filezilla

[bob633]

Le chemin n'a rien à voir en local et sur ton hébergeur.

A ma connaissance, j'ai toujours mis des chemins relatifs, et ça fonctionne toujours.

Tu devrais vraiment regarder dans ce sens pour les images.

Sinon et bien tu devrais mettre les bouts de code qui posent des problèmes (pas le code entier pour plus de lisibilité).

[Muchos]

+1 avec bob633.

De plus :

1. Est-ce que vous testez le site en ligne et hors ligne avec le même navigateur ?
2. Est-ce que vous avez rafraichi votre cache pour faire le test en ligne (au cas où l'ancienne css parasiterait le rendu) ?

[ickyknox]

merci à vous deux, je commence à avancer :

- d'une je vide régulièrement le cache.
- j'ai en effet changé le lien de mes images en pointant sur le dossier et NON sur le http. Donc de ce coté ca fonctionne

- Le site est en effet différent sur Firefox et sur Google Chrome !
Donc comme je visualisais mon site sur firefox, mon site est OK de ce coté là.

par contre les <article> et <section> ne sont pas bien placées sur google chrome.

MUCHOS, c'est vous qui m'aviez proposé d'utiliser ces balises pour construire mon site.
Auriez vous une astuce pour que mon site soit visible à l'identique sur tous les navigateurs en meme temps ?

je vous remercie !!

[Muchos]

Auriez vous une astuce pour que mon site soit visible à l'identique sur tous les navigateurs en meme temps ?

Que vous utilisiez des balises <article> et <section> ou bien juste des <div> ne changera rien. Elles ont le même comportement.
En outre, vous n'aurez jamais le même rendu quelque soit le navigateur, d'abord parce qu'ils interprètent le code de manière différentes. Si on ajoute les diverses configs utilisateur, les résolutions d'écran, etc., je vous laisse imaginer les obstacles !

[ickyknox]

mais du coup il n'y a aucun moyen pout tout homogénéiser ?

ils sont lourds !
surtout internet explorer !

[Torgar]

mais du coup il n'y a aucun moyen pout tout homogénéiser ?

ils sont lourds !
surtout internet explorer !

Si, mais il faut parfois utiliser des feuilles de styles différentes pour chaque navigateurs.

La plupart du temps : une pour Firefox/Chrome/Opera et une autre pour Internet Explorer.

Bien sûr cela peut différer suivant l'architecture du site.

Pour ma part, les blocs "prestations" et "bienvenue" sont correctement alignés que ce soit sur Firefox ou Chrome. Pour IE en revanche, c'est une autre histoire à l'heure où j'écris ces lignes. Tu dois être en train de modifier quelque chose car le CSS n'a pas l'air d'être pris en compte.

Quant au bloc "cadeau" il n'est pas de la même largeur que "bienvenue" + "prestations" et déborde en bas du cadre principal.

Poste nous ton code comme on te l'a déjà proposé si tu veux plus d'aide.

[ickyknox]

ahh ca devient plus clair ! super, merci torgar

pour ce qui est du bloc cadeau, c'est normal, je ne l'ai pas encore terminé car j'ai du recommencer.

Pour ce qui est de crééer plusieurs css par navigateur,
on m'a donné une solution : un patch javascript ( ie.patch.js )pour faire comprendre aux navigateurs IE "récalcitrants" le HTML5


http://html5.immo-scope.com/index.ph...mierePageHtml5

je n'arrive pas à le faire fonctionner (évidemment, ca serait trop facile), mais je vais me pencher là dessus

[bob633]

Une feuille css par navigateur, je trouve ça lourd

Car là tu testes sur IE, Chrome et FF. Mais quand est-il des autres ? Safari, Opera, et tout autre navigateurs utilisés sous linux, mac, ... tu comptes faire une feuille te style pour chacun ? Même si l'utilisation des autres est minoritaire sur le marché, il ne faut pas l'oublier.

Généralement sur des gros sites, on vise un certain publics quand on veut inover côté web, sinon tu t'en sortiras jamais.

L'optimisation multi-navigateur, je pense que c'est super sur des gros sites où il y a des équipes entières qui peuvent bosser dessus. Quand tu es seul, soit tu réduis l'ambition et utilise des balises, fonctions, [...] reconnues par tous, soit tu cible

[Torgar]

Une feuille css par navigateur, je trouve ça lourd

Il n'est pas question de faire une feuille pas navigateur, d'autant plus que c'est par rapport au moteur que cela se joue. Chrome et Safari utilise webkit, tout comme Konqueror. Firefox a Gecko. 'fin bref.

Ce que je voulais dire c'est qu'il peut être utile, dans de rare cas, d'avoir plusieurs feuilles de style. Pas que c'était nécessaire ici.

Je n'ai pas la possibilité de tester ton site pour le moment mais un peu plus d'informations sur le problème d'affichage peut aider.
Parce que :

par contre les <article> et <section> ne sont pas bien placées sur google chrome.

n'est pas clair du tout.

[ickyknox]

""""Chrome et Safari utilise webkit, tout comme Konqueror. Firefox a Gecko. 'fin bref."""

c'est pas plutot firefox qui utilise webkit ?
car sur mon site, l'animation du logo facebook est du webkit : seulement ca marche sur firefox mais pas sur chrome

[Torgar]

Non, Gecko pour Firefox, Webkit pour Chrome, Safari et autres.

Tu n'expliques toujours pas le problème de placement de tes éléments article et section.

[Bovino]

car sur mon site, l'animation du logo facebook est du webkit : seulement ca marche sur firefox mais pas sur chrome

D'après Firebug

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

-moz-transition: all 0.4s ease-in-out 0s;

Tu ne sais plus ce que tu codes ?

[ickyknox]

ohh désolé, en effet, j'ai un peu de mal.

du coup si -moz transition c'est pour firefox, et -webkit pour les autres,


du coup comment mettre les 2 en meme temps ?

[Torgar]

Heu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;

Enfin, si c'est bien la question.

Et attention, -webkit n'est pas forcément pour tout les autres. N'oublies pas Opera et IE...

[Muchos]

Pour rappel, les préfixes vendeurs sont :

• -o- pour Opera
• -moz- pour Gecko (Mozilla)
• -ms- pour Microsoft (Internet Explorer)
• -webkit- pour Webkit (Chrome, Safari, Android...)
• -khtml- pour KHTML (Konqueror) [NOTA: Konqueror semble proposer Webkit depuis sa version 4.1]

On place la propriété standard (donc sans préfixe vendeur) après les propriétés préfixées.

@ickyknox : ton patch sert à faire comprendre html5 à IE8 et inférieurs, pas à faire une feuille de style pour IE8 et inférieurs. Néanmoins, ça se présentera de la même façon :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!--[if lte IE 8]><link type="text/css" rel="stylesheet" href="ma-css-ie8-minimum.css" media="all" /><![endif]-->