Problème de design avec IE

Problème de design avec IE - HTML/CSS - Programmation

Marsh Posté le 02-12-2006 à 16:33:03    

Salut à tous,
 
Voila je suis en plein développement de mon tout premier site internet dont je suis plutôt fier pour un premier essai(j'ai commencé à coder fin aout) mais malheureusement bien qu'il soit presque fini j'ai encore quelques problèmes de design, particulièrement avec IE (je teste sur la version 7, avec la 6 ça doit être encore pire^^).
 
Le design fonctionne parfaitement avec opéra et firefox (mis a part un petit détail que j'expliquerais plus tard) mais sous IE, le corps de mon site n'est pas du tout de la bonne taille et bien placé. Je fais donc appel à vous.
 
J'aimerais également savoir pourquoi sous firefox et opéra, le corps n'est pas au niveau des menus alors que sous IE c'est bon ?
Sinon sur la page de news, la page est complètement distendue... décidément, toujours aussi bizarre ie...
 
Lien page de news: http://virtualchip.goldzoneweb.inf [...] nts=1&id=8
(le menu accès rapide en js bug, si vous savez d'où ça vient, parce que sur les autres pages il fonctionne nickel)
L'adresse du site : http://virtualchip.goldzoneweb.info
 
Si vous avez besoin du code css je le mettrais (il est très long et je ne sais pas d'où vient le problème) mais vous pouvez l'avoir directement sur mon site avec webdevelloper par exemple.
 
Par la même occasion si vous pouviez me dire ce que vous pensez du site, toutes les critiques sont bienvenues.

Reply

Marsh Posté le 02-12-2006 à 16:33:03   

Reply

Marsh Posté le 03-12-2006 à 03:45:25    

Teste plutot avec IE 5  pour vérifier la mise en forme générale, considère pas que tout le monde utilise IE 7 qui est à peine en version commeciale en france :)
 
Utilises FF pour voir ce que tu veux et validator.w3.org pour fignoler ;) Après c'est une grande histoire de css de bases et d'interprétation avec IE même si apparement ça s'amoindrit avec la version 7. Il te reste plus qu'à éplucher http://www.alsacreations.com/

Reply

Marsh Posté le 03-12-2006 à 12:22:37    

IE7 est en mise à jour prioritaire depuis bientôt deux semaines. Quant à tester sur le 5, l'intérêt est plus que limité maintenant, le nombre d'utilisateur doit vraiment être minime (quoi que, j'ai vu du IE4 récemment).
 
IE6 gère bien les modèles de boîtes, sauf en mode quirck.
 
moimael, commence par placer ton Doctype en début de document.

Reply

Marsh Posté le 03-12-2006 à 12:37:59    

Et ceux qui font pas les mises à jour :whistle:
Je dis pas de faire pour que ça s'affiche avec IE5, juste regarder que ça marche bien aussi avec les vieilles versions, ce qui peut permettre de corriger des petites bêtises passant inaperçues avec les dernières versions :)

Reply

Marsh Posté le 03-12-2006 à 14:04:12    

Ben justement j'ai travaille sous ff pour avoir ce que je veux (le rendu est le même sous opéra) et mon site est valide xhtml 1.1. Je veut bien tester avec des ancienne versions de ie mais il me semble qu'elles ne peuvent pas cohabiter c'est ça ?
 
Mon doctype est déja placé en début de document.
 
Merci de votre aide.

Reply

Marsh Posté le 03-12-2006 à 21:38:24    

Ce n'est pas le cas sur ton premier lien...
 
Pour XHTML 1.1 ?

Reply

Marsh Posté le 04-12-2006 à 16:21:32    

Ah oui tu as raison, pourtant dans mon code le doctype est placé en premier, ca doit etre le systeme de template et d'include qui me fait ca (je vais me pencher sur la question)mais sur les autres pages il est placé en premier.
 
Sinon pour xhtml 1.1 tu va dans a propos de virtualchip et ya le petit logo en bas de la page.(le css est plus valide mnt, je sais pas pk).

Reply

Marsh Posté le 04-12-2006 à 16:36:00    

moimael a écrit :

Ah oui tu as raison, pourtant dans mon code le doctype est placé en premier, ca doit etre le systeme de template et d'include qui me fait ca (je vais me pencher sur la question)mais sur les autres pages il est placé en premier.
 
Sinon pour xhtml 1.1 tu va dans a propos de virtualchip et ya le petit logo en bas de la page.(le css est plus valide mnt, je sais pas pk).


 
Petite question idiote : pourquoi as-tu besoin du xhtml ?

Reply

Marsh Posté le 04-12-2006 à 17:05:07    

Je n'en ais pas spécialement besoin, c'est juste pour respecter les normes. Enfin la n'est pas la question, je voulais juste savoir comment résoudre mes pb de cadres sous ie et mon javascript.

Reply

Marsh Posté le 04-12-2006 à 17:19:34    

La version 1.1 du XHTML n'a pas vraiment d'utilité actuellement. La 1.0 te suffira amplement.

Reply

Marsh Posté le 04-12-2006 à 17:19:34   

Reply

Marsh Posté le 04-12-2006 à 17:19:44    

moimael a écrit :

Je n'en ais pas spécialement besoin, c'est juste pour respecter les normes. Enfin la n'est pas la question, je voulais juste savoir comment résoudre mes pb de cadres sous ie et mon javascript.


 
Sémantiquement ton code html pêche un peu :  
 

Code :
  1. <div id="menu_en_tete">
  2.    <div id="ssbanniere">
  3.    <a href="index.php"id="zone1"><i>description du lien pour les syntheses vocales</i></a>
  4.    <a href="archives.php"id="zone2"><i>description du lien pour les syntheses vocales</i></a>
  5.    <a href="Forum/index.php"id="zone3"><i>description du lien pour les syntheses vocales</i></a>
  6.    <a href="article.php" id="zone4"><i>description du lien pour les syntheses vocales</i></a>
  7.    <a href="jeux_video.php" id="zone5" ><i>description du lien pour les syntheses vocales</i></a>
  8.    <a href="pafiledb/index.php" id="zone6" ><i>description du lien pour les syntheses vocales</i></a>
  9.        </div></div>


pourrait très bien devenir

Code :
  1. <div id="menu_en_tete">
  2.           <ul>
  3.                <li><a href="index.php"><i>description du lien pour les syntheses vocales</i></a></li>
  4.                <li><a href="archives.php"><i>description du lien pour les syntheses vocales</i></a></li>
  5.                <li><a href="Forum/index.php"><i>description du lien pour les syntheses vocales</i></a></li>
  6.                <li><a href="article.php"><i>description du lien pour les syntheses vocales</i></a></li>
  7.                <li><a href="jeux_video.php"><i>description du lien pour les syntheses vocales</i></a></li>
  8.           </ul>
  9. </div>


ce qui t'éviterait d'avoir à positionner tes liens en absolu.
 
Dans la même veine, je ne vois pas pourquoi tu fais comme suit :

Code :
  1. <div id="menu">
  2.                         <div class="titre">
  3.                         <h4>Recherche</h4></div>
  4.            <div class="element_menu">
  5.                    <div class="recherche">
  6. <form method="get" action="http://www.google.fr/custom">


alors que

Code :
  1. div id="menu">
  2.          <h4>Recherche</h4>
  3.          <form method="get" action="http://www.google.fr/custom">


suffirait amplement.
 
Je te suggèrerais de revoir un peu la sémantique de tes pages pour y voir plus clair.

Reply

Marsh Posté le 04-12-2006 à 17:44:00    

Oui tu as raison pour la sémantique de mes pages, je prévoyais de la revoir  quand j'aurai le temps. Sinon le titre recherche j'ai mis un div pour pouvoir mettre une image en arrière plan avec css.
 
Par contre j'ai testé le premier exemple que tu donne, il ne fonctionne pas, les liens sont positionnés les uns en dessous des autres alors qu'ils devraient etre positionnés les uns a coté des autres et seulement sur une zone de l'image (images map).

Message cité 1 fois
Message édité par moimael le 04-12-2006 à 17:51:38
Reply

Marsh Posté le 04-12-2006 à 18:01:18    

moimael a écrit :

Oui tu as raison pour la sémantique de mes pages, je prévoyais de la revoir  quand j'aurai le temps. Sinon le titre recherche j'ai mis un div pour pouvoir mettre une image en arrière plan avec css.
 
Par contre j'ai testé le premier exemple que tu donne, il ne fonctionne pas, les liens sont positionnés les uns en dessous des autres alors qu'ils devraient etre positionnés les uns a coté des autres et seulement sur une zone de l'image (images map).


 
Eh bien c'est parce qu'il faut donner un style à ta liste pour qu'elle prenne l'apparence que tu souhaites [:cend]
Par exemple, pour que les liens ne se positionnent pas les uns sous les autres :

Code :
  1. li{ display:inline; }

Reply

Marsh Posté le 04-12-2006 à 18:12:42    

je vais paraitre pour un noob mais tu fais comment pour les mettre en images map ?

Reply

Marsh Posté le 05-12-2006 à 10:12:02    

moimael a écrit :

je vais paraitre pour un noob mais tu fais comment pour les mettre en images map ?


 
 :heink:  
Je dois bien t'avouer que je ne vois pas bien ce que tu veux faire. Pour avoir la même présentation que ce que tu as pour ton menu horizontal, il suffit de donner une image de fond à tes li (auquel cas ils doivent être en display:block - et non plus en inline -, en leur ajoutant un float:left pour qu'ils restent en ligne).

Code :
  1. <div id="menu_en_tete">
  2.          <ul>
  3.                <li><a href="index.php">News</a></li>
  4.                <li><a href="archives.php">Archives</a></li>
  5.                <li><a href="Forum/index.php">Forum</a></li>
  6.                <li><a href="article.php">Articles</a></li>
  7.                <li><a href="jeux_video.php">Les Jeux</a></li>
  8.          </ul>
  9. </div>


Code :
  1. menu_en_tete{
  2.      display:block;
  3.      height:26px;
  4.      width:1000px;
  5.      margin-bottom: 10px;
  6.      background: url(images/ssbanniere.gif) repeat-x;
  7. }
  8. menu_en_tete ul{
  9.      list-style:none;
  10.      padding:0;
  11.      margin:0;
  12. }
  13. menu_en_tete li{
  14.      display:block;
  15.      height:26px;
  16.      background: url(images/ssbanniere_separator.gif) no-repeat right;
  17.      padding:0 5px 0 5px;
  18. }


(où ssbanniere.gif serait une image de 1x26 pixels faite à partir de ssbanniere.png et ssbanniere_separator.gif une image de 2x26 pixels elle aussi tirée de ton ssbanniere.png)

Reply

Marsh Posté le 06-12-2006 à 13:01:54    

ca fait pas mal de modif et une enorme perte de temps, au final ca ne change quasiment rien. Je vais revoir la semantique mais pas modifier profondement le code sinon je risque de ne plus m'y retrouver.

Reply

Marsh Posté le 06-12-2006 à 17:53:50    

moimael a écrit :

ca fait pas mal de modif et une enorme perte de temps, au final ca ne change quasiment rien. Je vais revoir la semantique mais pas modifier profondement le code sinon je risque de ne plus m'y retrouver.


 
Tu vas perdre du temps pour remettre ton code à plat, mais quand tu voudras changer quelque chose dans la mise en page ou autre, ça te prendra 5 min au lieu de 2h [:airforceone]

Reply

Marsh Posté le 07-12-2006 à 20:51:53    

Bah merci beaucoup de ton aide, je vais y réfléchir.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed