Problème d'affichage de tranches photoshop sous Firefox

[pata60]

Hello,

je suis un néophyte qui essaie de mettre à jour son site et qui bute sur un problème récurent (visible uniquement sous Firefox, sous IE ça marche nickel). Je précise que je travaille sous CS4. Je précise également que je ne comprends rien ou presque au html, je travaille en effet uniquement en mode "création" dans Dreamweaver. Mais si c'est nécessaire et si on me guide bien, je peux peut-être y arriver...

Ma méthode :
1. je fabrique graphiquement mes pages sous photoshop
2. je les découpe en tranches, puis je fais "menu Fichier / Enregistrer pour le web et les périphériques" (HTML et images)
3. je passe dans Dreamweaver pour intégrer les images survolées (mes menus sont faits comme ça) et les vidéos.

Mon problème :
comme vous pouvez le constater ici : http://videolife.free.fr/ l'assemblage des tranches part en live sous firefox dès que j'intègre quoi que ce soit (vidéo, image survolée, etc.) alors que le résultat devrait être ceci : http://videolife.free.fr/modele.html

Que puis-je faire pour éviter celà svp ?
Merci pour votre attention.

Pata60

PS : qu'est-ce que le fichier "spacer.gif" svp ?

[chinon37]

Bonjour,

Déjà, j'ai quitté une première fois le site à cause du son. Rien de plus pénible que subir une musique sans l'avoir décidé!
De plus, les tableaux sont faits pour mettre en ligne des données tabulaires, pas pour faire de la mise en page. Je ne pensais pas que dreamweaver faisait cela??!!
Il faut faire ta mise en page à l'aide de conteneurs génériques (<div>) et autres et le design en css
Il faut éviter d'utiliser uniquement des images: le menu peut très bien être fait à partir d'une liste que tu habilleras en css .
Pour faire un site correct, tu ne pourras pas faire l'économie des bases en html et css...

Les images de la vidéo sont superbes...

[pata60]

Hello,

et merci pour ta réponse sympathique......mais qui ne me vient pas vraiment en aide, à vrai dire.

Vois les sites que j'ai réalisés sans avoir strictement aucune connaissance en html, div, balises ou je ne sais trop quel jargon css digne pour moi du chinois ancestral du fin fond de la Mandchourie moyenâgeuse :

http://hippolyte.givelet.free.fr/
http://www.video-life.fr/
http://aspcd.free.fr/

Question: l'outil tranches dans photoshop a été créé pour faire quoi au juste ?
Parce qu'il y a quand même un truc qui m'échappe.

Tu veux peut-être me dire qu'en fait ça ne marche pas vraiment (la preuve) et que le seul moyen de blinder une page web solide et bien en place c'est d'avoir bac + x en études de webmaster ?
Je t'avouerais que ça ne m'arrange pas du tout car ce n'est pas mon cursus.
C'est d'ailleurs la raison pour laquelle je suis venu ici demander de l'aide.

Au fait, et sans mauvais esprit aucun, si tu es calé comme tu sembles vouloir le laisser transparaitre dans tes propos, peux-tu alors me dire d'où vient mon problème ? à quoi c'est du au juste ? et comment je peux faire pour le contourner ou le résoudre ?
Parce que ça, ça m'aiderait vraiment ! Et c'est ce genre de réponse que je suis venu chercher ici (avec tout l'humilité de mon ignorance)

Merci d'avance

Pata60

PS : Au fait, on peut habiller une fille en css aussi ? (non je rigole...)

[DonVtt]

Salut Pata 60,

J'ai tenté de comprendre ton problème d'affichage mais ne suis pas arrivé à élucider l'affaire. Les spacers d'1px de large semblent être la source de l'énigme. En les supprimant je résous ton problème mais alors c'est le reste qui foire.
J'ai passé une heure dessus. Là j'arrête. Faudrait tout refaire depuis zéro.
IE est très capricieux. Je me suis arraché les cheveux avec lui. Là où ça marche dans 4 navigateurs IE fait la nique et vice versa. Donc le bon affichage dans IE est probablement un manque de rigueur de celui-ci plutôt qu'une bonne interprétation du code.

Comme le dit Chinon, tu devrais te pencher sur les bases du html et des css. Je suis moi-même débutant (1 seul site à mon actif). J'ai appris seul avec l'aide d'excellents sites/forums et deux trois livres. Mon premier sites est pourtant conforme W3C et s'affiche correctement dans 5 navigateurs. Ce qui est loin d'être le cas de pas mal de sites dits "professionnels".
Le html et les css ne sont pas compliqués à apprendre. Tu sembles avoir bon gout pour le design, ton site est bien foutu. Ce serait dommage de tout gâcher avec un codage hasardeux.

Bon courage.
DonVtt

[chinon37]

Avec quelle version de dreamweaver travailles-tu? car j'ai peine à croire que Dw fait un code aussi mauvais sans doctype déjà!!! ou alors il s'agit d'une version antediluvienne
Tu devrais avoir au minimum quelque chose comme ceci en début de code:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Comment intègres-tu tes images dans ta page web? Qui crée le code html: Photoshop ou Dw? ici nous sommes plus habitués aux logiciels libres et un peu moins aux logiciels propriétaires, aussi quelques précisions supplémentaires seraient nécessaires.

Comme l'a dit DonVtt, Il semble que le découpage a créé des images de 1px X 1px spacer.gif qui apparaissent dans firefox et non dans IE. On retrouve ces images très régulièrement dans le code. Il faudrait savoir comment c'est arrivé là. Mais pour cela, il faudrait plus d'infos sur ta manière de créer ta page.

[pata60]

Merci à vous d'étudier mon problème avec autant de rigueur, j'apprécie vraiment.
Et merci également pour vos encouragements.

A ce propos, si je veux suivre vos conseils et me plonger efficacement dans le html et le css, que me conseillez-vous ?
Y-a-t'il des livres qui font référence dans ce domaine, des tutos sur le web, quelle est la meilleure méthode selon vous pour m'en sortir sans y passer 10 ans et toutes mes soirées ?

Quelques petites précisions pour chinon37 :

- Je travaille bien avec la suite Adobe CS4. Ma méthode :

1. je fabrique graphiquement mes pages sous photoshop

2. je les découpe en tranches (avec l'outil "tranches" donc), puis je fais "menu Fichier / Enregistrer pour le web et les périphériques" (HTML et images)
(photoshop me crée alors un fichier html + le dossier "images" correspondant dans lequel il place toutes les tranches en gif qui constituent ma page + un fichier nommé "spacer.gif"). J'ignore ce qu'est ce fichier "spacer.gif" ni à quoi il sert...

3. ensuite, je passe dans Dreamweaver ou j'ouvre mon fichier html créé par photoshop afin d'intégrer les éléments "actifs" de la page (images survolées, vidéos, liens, etc.)
Dans Dreamweaver, en ouvrant mon fichier html, la page créée et découpée en tranches sous photoshop est automatiquement reconstituée avec chaque tranche (correspondant à un fichier gif) à sa place d'origine.

Au passage, je précise que c'est nickel dans IE 8.0.6 et Safari 4.0.5, il n'y a donc bien que dans FF 3.6.3 que ça pose un problème...

Merci à vous


NB : voici pour info le début du code de ma page "index" :

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #000;
background-image: url(mur.jpg);
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index.psd) -->
<table width="1024" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
<tr>
<td rowspan="4">
<img src="images/index_01.gif" width="290" height="243" alt=""></td>
<td colspan="3">
<img src="images/index_02.gif" width="734" height="142" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="142" alt=""></td>

etc.

[~HP]

Au passage, je précise que c'est nickel dans IE 8.0.6 et Safari 4.0.5, il n'y a donc bien que dans FF 3.6.3 que ça pose un problème...

C'est pas le service après-vente de CS et DW ici… non ?
Au fait, les tableaux, c'est pas fait pour la mise en page : une saine lecture, parmi tant d'autres.

[DonVtt]

Salut Pata60,

Comme je te le disais plus haut apprendre les bases du HTML et des CSS n'est pas aussi inaccessible qu'il n'y parait. Une fois que les fondations sont bien placées, la suite de l'apprentissage devient assez simple.
Autre avantage non négligeable, c'est toi qui sera le meneur dans la construction de tes sites plutôt que de la subir comme actuellement. Cela ne veut pas dire que tu ne t'arracheras pas les cheveux par moments.

Pour répondre à ta demande voici quelques sites qui m'ont bien aidés. Il en existe des tonnes d'autres.

http://www.siteduzero.com/tutoriel-1-67-site-web.html
Comme son nom l'indique, ... le web pour les débutants. Simple et efficace.

http://www.w3schools.com/
Boite à outil très complète pour apprendre pas à pas. En anglais.

http://www.css-faciles.com/premiers-pas-css.php
Les CSS de A à Z tout en douceur.

http://www.alsacreations.com/
Références incontournables dans le monde du web propre, accessible et respectueux des standards.

http://www.pompage.net/
Découvrir le potentiel des CSS et du HTML, l'avantage d'appliquer les standards web, ou les bénéfices des pages sémantiques.

http://css.maxdesign.com.au/
Les CSS en version sympa. En anglais.

http://alexandre.alapetite.fr/doc-alex/alx_special.html
Les caractères spéciaux et leurs entités HTML correspondantes.


Salut à toi et bon courage.

DonVtt

[DonVtt]

RE,

Et plus drôle encore, ... en tête de liste dans ce forum:

http://www.geckozone.org/forum/viewtopi ... =8&t=74384

Juste sous notre nez. Y'avait qu'à pioché. Comme quoi on a pas toujours les yeux en face des trous.

Salut à toi et bonne route.

DonVtt

[AKROUT Belhassen]

Il faut juste copier et coller l'image (spacer.gif) dans votre dossier d'image (exemple : images).
J'ai rencontré ce problème avant et je l'ai résolu avec cette méthode

[chriss..]

D'abord bonjour,

ensuite, tu arrives 2 ans en retard..... sujet de mai 2010.

[AKROUT Belhassen]

J'ai pas fait attention à la date, j'ai voulu juste vous aider.