[RESOLU][Problèmes d'affichage] Espaces et décalages d'images

Daru13

Posté le 29 Juil 2009 à 20:34

Messages : 2869
GCPoints : 95966

Depuis quelques semaines je me suis lancé sur une nouvelle version de mon blog, qui me servira également de galerie online pour présenter mes créations ( graphiques ).
J'ai donc réalisé un design, fait pour être extensible, et je me suis lancé dans le coding avec Dreamweaver CS4 :wink:

.

L'extensibilité du design marche parfaitement, là n'est pas mon problème.
J'ai pas mal d'images qui se décalent, laissent des blancs par-ci par-là, etc... et cela varie en plus selon les nagateurs, et mêmes selon les systèmes d'exploitation...

Ci-dessus, le rendu sur mon ordinateur, avec Firefox 3.5.1 ( Sous Vista ).

J'ai eu l'occasion de tester le site sur d'autres navigateurs également :

Navigateur	OS	Résultat
Firefox 3.5.1	Windows Vista	Voir image, décalages d'images et blancs
Internet Explorer 7	Windows Vista	Idem (je crois)
Internet Explorer 8	Windows Vista	Idem
Safari ?	MacOS 10.4	Affichage du code source
Firefox 3.1 ou 3.2	MacOS 10.4	Idem que sur l'image SAUF qu'il n'y a pas de décalage pour les deux angles tout en bas !
Opéra ?	MacOS 10.4	LE site n'avait aucun problème !

Je ne sais pas si ça vient d'un problème d'un surplus de tableau remplis d'images, mais c'est assez gênant... et je ne comprend pas le fait que tous les navigateurs ne gèrent pas ça pareil, et correctement par ailleurs, surtout que je n'ai pas utilisé de propriété peu voir pas connue à ce que je sache...

Aussi, dans DW, le blanc vertical du header et le décalage des angles en bas n'apparait pas, les autres bugs, si.

Bref, j'aimerais bien boucher les blancs et que les images ne bougent plus ^^.
Avant de vous fournir le code du site ( généré par DW et quelquefois retouché par... moi :twisted:

), je vous fait un rapide schéma de la structure :

Le header est en trois partie, le milieu est extensible, les deux autres fixes.
A l'intérieur de la parti de gauche se trouvent les onglets. La fonction de recherche est seulement une partie de l'image de droite pour le moment.
La barre fine et sombre sous les onglets est constitué selon le même modèle que le head, images fixe à gauche et à droite, et extensible au centre.
Le corps est dans un tableau de deux colonnes, à gauche, un tableau 4*3 bourré de problèmes, à droite un simple menu avec un fond répétitif ^^.
Et enfin un footer extensible.

Merci d'avance :smile:

.

Code : HTML

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body
{
	margin: 0px;
	padding: 0px;
}
 
.head_g {
	background-image: url(header.png);
	background-repeat:no-repeat;
	margin: 0px;
	padding-top: 0px;
	float: left;
	height: 128px;
	width: 703px;
	display: block;
}
.head_d {
	float: right;
	height: 128px;
	width: 178px;
	margin: 0px;
	padding: 0px;
	display: block;
}
.head_m {
	background-image: url(header1.png);
	background-repeat: repeat-x;
	height: 128px;
	width: auto;
	margin: 0px;
	border: 0px;
	padding: 0px;
}
.barre_head_g {
	background-image: url(barre_header.png);
	background-repeat: repeat-x;
	height: 14px;
	width: 703px;
	margin: 0px;
	padding: 0px;
}
.head_barre_d {
	height: 14px;
	width: 178px;
	margin: 0px;
	padding: 0px;
}
.barre_header_m {
	background-image: url(barre_header.png);
	background-repeat: repeat-x;
	height: 14px;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.corps_d {
	background-image: url(corps_d.png);
	background-repeat: repeat-y;
	width: 184px;
}
.titre_article {
	color: #5F5F5F;
	background-image: url(corps_g_h.png);
	background-repeat: repeat-x;
	height: 29px;
	width: 100%;
}
.g_article {
	background-image: url(corps_g_g.png);
	background-repeat: repeat-y;
	width: 19px;
}
.d_article {
	background-image: url(corps_g_d.png);
	background-repeat: repeat-y;
	width: 19px;
}
.b_article {
	background-image: url(corps_g_b.png);
	background-repeat: repeat-x;
	height: 19px;
}
.h_article {
	background-image: url(corps_g_h2.png);
	background-repeat: repeat-x;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
.corps_txt {
	background-color: EBEBEB;
	background-image: url(corps_g_txt.png);
	background-repeat: repeat;
}
.footer {
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 28px;
}
.onglet {
	background-image: url(onglet2.png);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	height: 22px;
	width: 84px;
}
.onglet:hover {
	background-image: url(onglet1.png);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	height: 22px;
	width: 84px;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%"  height="128" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="head_g" valign="bottom"><table width="350" cellspacing="0" cellpadding="0" style="margin-top: 107px;" >
            <tr>
              <td><div class="onglet"><img src="accueil.png" alt="" width="84" height="21" /></div></td>
              <td><div class="onglet"><img src="profil.png" alt="" width="84" height="21" /></div></td>
              <td><div class="onglet"><img src="galerie.png" alt="" width="84" height="21" /></div></td>
              <td><div class="onglet"><img src="contact.png" alt="" width="84" height="21" /></div></td>
            </tr>
          </table></td>
          <td class="head_m"></td>
          <td class="head_d"><img src="header2.png" width="178" height="128" /></td>
        </tr>
        <tr>
          <td class="barre_head_g"></td>
          <td class="barre_header_m"></td>
          <td class="head_barre_d"><img src="barre_header2.png" width="178" height="14" class="head_barre_d" /></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0" margin="0" padding="0">
        <tr>
          <td style="background-color: #949494; padding-left: 10px; padding-right: 20px;"><br />
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="29"><img src="corps_g_hg1.png" width="19" height="29" /></td>
                <td class="titre_article">Texte</td>
                <td><img src="corps_g_hd1.png" width="19" height="29" /></td>
              </tr>
              <tr height="16">
                <td><img src="corps_g_hg2.png" width="19" height="16" /></td>
                <td class="h_article">Texte</td>
                <td><img src="corps_g_hd2.png" width="19" height="16" /></td>
              </tr>
              <tr>
                <td class="g_article">&nbsp;</td>
                <td class="corps_txt"><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></td>
                <td class="d_article">&nbsp;</td>
              </tr>
              <tr height="19">
                <td width="19" height="19"><img src="corps_g_bg.png" width="19" height="19" /></td>
                <td class="b_article">&nbsp;</td>
                <td width="19" height="19"><img src="corps_g_bd.png" width="19" height="19" /></td>
              </tr>
            </table>
            <br /></td>
          <td width="185" class="corps_d">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td class="footer">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

stilobique

Posté le 29 Juil 2009 à 21:45

Messages : 2368
GCPoints : 834447

Utilisé un tableau pour la mise en page... rien de pire à mon goût !

Sinon par rapport au différence avec les navigateurs c'est tout simplement dut au fait que les moteurs de rendu de ces derniers ne comprennent pas de la même façon le langage et ça donne donc les décalages !

Voila, pour ma pars je ne t'aiderais pas avec le code je fait jamais avec des tableaux et par conséquent je pourrait rien faire de plus.
Bonne chance en tout cas :wink:

Car il en faut :lol:

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.

Daru13

Posté le 29 Juil 2009 à 22:43

Messages : 2869
GCPoints : 95966

Deuxième personne qui me dit que les tableaux c'est le mal :tongue:

.
Je veux bien coder le site sans, maintenant je sais pas si ça sera pas pire... je recoderai ça un de ces jours...

Devil'sCry

Posté le 30 Juil 2009 à 11:22

Messages : 136
GCPoints : 47714

En effet, les tableaux ne sont pas gérés correctement avec tout les navigateurs, ce qui est révoltant.
Je rêve d'un monde où il n'y a qu'une seule gestion d'affichage de site web pour que tout le monde voie parreil. C'est stupide d'en avoir autant.

Enfin, pour ton problème de bordures blanche, à mon avis il y a des chances pour que ce soit tes images en bg qui soient légèrement trop petites et donc, vu que tu as mis qu'elle ne devaient pas se répeter, c'est le bg perent qui s'affiche, c'est à dire blanc.

Enfin je pense que les images fournies avec permettrait de voire plus claire au problème si ce n'est pas celui là.

We are falling, The light is calling, Black night, Dark sky, The Devil's Cry.

Melysoph

Posté le 30 Juil 2009 à 15:52

Messages : 67
GCPoints : 21899

bouh ! Les tableaux c'est le mal ! (juste histoire d'enfoncer le clou)
Sinon, il est difficile de t'aider sans avoir les images ou le lien vers celui-ci.
Rien que pour constater le décalage, mais aussi pour essayer 2/3 trois p'tits trucs.

* Phrase très profonde et recherchée *

stilobique

Posté le 30 Juil 2009 à 16:11

Messages : 2368
GCPoints : 834447

Devil'sCry a écrit :

En effet, les tableaux ne sont pas gérés correctement avec tout les navigateurs, ce qui est révoltant.
Je rêve d'un monde où il n'y a qu'une seule gestion d'affichage de site web pour que tout le monde voie parreil. C'est stupide d'en avoir autant.

[...]

Cela s'appelle le respect des normes, si les codeurs et navigateurs les respecté à 100% il n'y aurais aucun problème :rolleyes:

Mais bon, quand on voit les résultat à l'ACID c'est décourageant :shocked:

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.

Daru13

Posté le 01 Août 2009 à 00:29

Messages : 2869
GCPoints : 95966

Merci pour les commentaires, finalement j'ai recodé tout le site, et les deux seul tableaux utilisés ne posent aucun problème au design :smile:

.

Par contre, j'ai un petit gros problème, c'est pas le meilleur endroit pour e parler mais autant éviter un topic juste pour ça : Mon blog tourne à l'aide de Wordpress, aussi je viens de commencer à "mixer" mon design au php de Wordpress ; cependant, depuis ça, tout mon CSS a disparu... :strange:

Tous les liens ( tous relatifs ) sont bons, et toutes les images sont dans le dossier où se trouve le(s) fichier(s) php...
Avant je n'avait aucun problème de ce genre, et là, je change le thème sur l'administration de Wordpress, et que vois-je, que du noir sur blanc... :pathetic:

Je précise que j'utilise WAMP sur Vista, et que le CSS est dans un fichier style.css joint :wink:

.

Je vais aller faire un tour sur Google pour essayer de trouver une solution, m'enfin c'est bizarre quand même...

EDIT : Je peux enfin changer de rang ! :grin:

Sauf que le lien pour pointe sur une jolie 404... :crazy:

EDIT 2 : Je suis allé sur l'accueil de mon blog, j'ai regardé le code source dans firefox, cliqué sur le "style.css", qui était un lien...

Code : HTML

 
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /Daru's blog/style.css was not found on this server.</p>
</body></html>

Bizarre... Le fichier existe bel et bien à cet emplacement, avec le même nom et la bonne extension...

Dernière édition le 01 Août 2009 à 01:13

stilobique

Posté le 01 Août 2009 à 10:51

Messages : 2368
GCPoints : 834447

Evite un nom de dossier type Daru's Blog ! L'apostrophe fait surement tout foiré !

(___/)
(='.'= )Voici Lapin. Copiez et collez Lapin dans votre signature
(")_(") pour l'aider à concrétiser sa domination du monde.

Mod

Posté le 01 Août 2009 à 12:55

Messages : 4954
GCPoints : 2100823

C'est bien possible que le problème vienne des caractères spéciaux de l'adresse que tu spécifies.

Sinon, ce serait bien pratique d'avoir l'adresse du blog en question que l'on puisse tester les arborescences de fichier.

Let's make some tweets

Daru13

Posté le 01 Août 2009 à 14:30

Messages : 2869
GCPoints : 95966

Possible, car un ami a essayé hier sur son ordinateur, uniquement avec index.php et style.css, et ça a marché :).

Par contre, quand j'avais essayé de mettre le CSS dans le <head> de index.php, cette fois-ci, out marchait sauf qu'aucune image ne s'affichait ;_;.
Et pourtant, je n'ai pas de nom d'image bizarre, et tous les espaces sont des underscores :neutral:

.

Bref, je vais essayer sans caractère spécial.

( La prévisualisation n'a pas l'air d'encore fonctionner... ^^ ).

EDIT : Apparemment ça marche nikel !
Merci beaucoup pour l'astuce :smile:

.

RE-EDIT : Arf ça marche plus. J'ai modifié l'emplacement du fichier dit "WWW" de WAMP, où l'on stocke les projets, pointant à la place le dossier où je stocke tous les projets de sites web auxquels je participe, cependant, j'ai bien gardé la même hiérarchie et les mêmes noms que lorsque mon dossier avec Wordpress était dans l'ex-WWW... :confused:

Comme d'habitude, tout marche ( PHP et XHTML ) sauf le CSS... :jaded:

Et je ne vois aps de caractère spécial nouveau, les tirets et underscores fonctionnaient auparavant...

Dernière édition le 01 Août 2009 à 19:12

Daru13

Posté le 03 Août 2009 à 04:46

Messages : 2869
GCPoints : 95966

Double-post pour informer que j'ai réussi à afficher les images et à lier la feuille de style en utilisant des adresses absolues. Le blog est maintenant fonctionnel et online, donc c'est nikel :grin:

.
Y'a plus qu'à bidouiller le php puis à remplir un peu en pages et articles ^^.

Si tu souhaite fermer le sujet Mod, ça ne me pose pas de problème :wink:

GameCorp - Index des forums

Game Making

Programmation

Création de sites

[RESOLU][Problèmes d'affichage] Espaces et décalages d'images

Répondre

Espace Membre

Partenaires

[RESOLU][Problèmes d'affichage] Espaces et décalages d'images