Votre question

Probleme de fond sous IE

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
24 Novembre 2010 20:11:46

:) Bonjour à tous
Félicitation pour ce site,qui ma permis de me familiariser avec le html/css et découvrire une passion, ce qui ma permit de realiser modestement mon propre site,grace au livre tres bien fait de mathieu Nebra, ainssi que maitrise des css de andy Budd, je rencontre tout de mème un probléme d'apparence sous IE,pour safari,firefox,opera tous va bien,mon site est constituer d'un background image unique via le css lorsque je clique sur mes liens pour accéder à mes autres pages le fond semble bouger à chaque chargement d'une nouvelle page et une ligne blanche apparait sur la largeur de l'écran comme un flash, merci d'avance pour vos réponces qui me rendrait service

Autres pages sur : probleme fond

24 Novembre 2010 21:23:51

Peut on avoir l'adresse du site pour que l'on puisse voir le problème ?
m
0
l
24 Novembre 2010 22:00:36

Seb33300 a dit :
Peut on avoir l'adresse du site pour que l'on puisse voir le problème ?


mon site est actuellement en local , que me conseiller vous pour le mettre en ligne temporairement, de manière à voir le problème, merci
m
0
l
Contenus similaires
a c 232 L Programmation
24 Novembre 2010 23:35:32

Salut,

S'il est pas trop long, tu peux mettre le code CSS et HTML directement ici entre des balises [code] et [/code]
Sinon, si tu as un serveur FTP, tu peux le mettre dessus.
Et dernière possibilité, c'est de le zipper et l'uploader sur un site spécialisé (exemple 2shared, megaupload,...)
m
0
l
25 Novembre 2010 07:42:15

OmaR a dit :
Salut,

S'il est pas trop long, tu peux mettre le code CSS et HTML directement ici entre des balises [code] et [/code]
Sinon, si tu as un serveur FTP, tu peux le mettre dessus.
Et dernière possibilité, c'est de le zipper et l'uploader sur un site spécialisé (exemple 2shared, megaupload,...)




salut,

merci pour ta participation, voici mon code,

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
  6. <title>bruno bourdillat peinture illustration!</title>
  7.  
  8. <link rel="stylesheet" media="screen" type="text/css"title="design" href="style.css" />
  9.  
  10. <script type="text/javascript" src="js/prototype.js"></script>
  11. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>
  12. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
  13.  
  14.  
  15. </head>
  16.  
  17. <body>
  18. <div id="conteneur">
  19. <div id="header">
  20. <h1>bruno bourdillat graphisme illustration</h1></div>
  21. <div class="colprincipal">
  22. <div class="contprincipal">
  23. <div class="contenu">
  24. <p id="intro"><h2>photos</h2></p>
  25. </div>
  26. <div class="contenu">
  27. <p><a href="photos/camargue2.jpg" rel="lightbox[]"><img src="photos/minicamargue2.gif" width="40" height="40" alt=""/></a>
  28. <a href="photos/camargue2.jpg" rel="lightbox[]"><img src="photos/minicamargue2.gif" width="40" height="40" alt=""/></a>
  29. </p>
  30.  
  31. </div>
  32. </div>
  33. <div class="contsecondaire">
  34. <div id="titre"><strong>
  35. <h3>categorie</h3>
  36. </strong></div>
  37. <div id="vignettes">
  38. <h4>peintures</h4>
  39. <h4>photos</h4>
  40. <h4>photomanipulation</h4>
  41. <h4>peintures numeriques</h4>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="colgauche">
  46. <p id="profile"> <img src="images/matt_sp2a_sepia_3.gif" alt="my profil" width="64" height="85" /> <strong>mon profil </strong></p>
  47. <ul class="nav">
  48. <li><a href="index.html"><strong>accueil</strong></a></li>
  49. <li><a href="portfolio.html"><strong>portfolio</strong></a></li>
  50. <li><a href="mailto:*****@hotmail.fr"><strong>contact</strong></a></li>
  51. </ul>
  52. </div>
  53. <div id="footer"></div>
  54. </div>
  55. </body>
  56. </html>



  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /*{ border: 1px solid red; }*/
  5.  
  6. *{margin:0px; padding:0px;}
  7.  
  8. body {
  9.  
  10. text-align: center;
  11. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  12. background-color:#600001;
  13. background-image: url(images/arrplan.jpgbis.jpg) ;
  14. background-position:center top;
  15. background-repeat:no-repeat;
  16. }
  17.  
  18. #conteneur {
  19. width:900px;
  20. height:5000px;
  21. margin: 0 auto;
  22. text-align: left;
  23. overflow: hidden;
  24. }
  25.  
  26. #header {
  27. height: 200px;
  28. width: 900px;
  29. /*background-color:#CCC;*/
  30. }
  31. #header h1 { position:relative; top:140px; color:#FC9;}
  32.  
  33. .colprincipal {
  34. width:680px;
  35. height:2700px;
  36. float: right;
  37. display: inline;
  38. }
  39.  
  40. .colprincipal .contprincipal {
  41. float:left;
  42. width:500px;
  43. height:1900px;
  44. /*background-color:#666;*/
  45. position:relative;
  46. left:0px;
  47. }
  48. .contenu {
  49. /*background-color:#F96;*/
  50. position:relative;
  51. top:138px;
  52. border:solid #930 2px;
  53. padding:10px;
  54. margin-bottom:20px;
  55.  
  56.  
  57. }
  58. .contenu a {
  59. color:#FC9;
  60. }
  61.  
  62.  
  63.  
  64.  
  65. .colprincipal .contsecondaire {
  66. text-align:center;
  67. position:relative;
  68. left:0px;
  69. float:right;
  70. width:160px;
  71. height:900px;
  72. /*background-color:#C60*/}
  73.  
  74. #titre { top:139px; position:relative; margin-left:5px;}
  75. #vignettes {top:150px; height:200px; position:relative; margin-left:5px;
  76. /*background-color:#F96;*/}
  77.  
  78.  
  79. .colgauche {
  80. width:190px;
  81. height:300px;
  82. float: left;
  83. display: inline;
  84. /*background-color:#F30;*/
  85. }
  86.  
  87. .nav {
  88.  
  89.  
  90. margin-top:25px;
  91. padding: 0;
  92. list-style-type: none;
  93. width: 180px;
  94. margin-left:auto;
  95. margin-right:auto;
  96. position:relative;
  97. }
  98.  
  99. .nav a {
  100. width: 180px;
  101. text-align: center;
  102. display: block;
  103. color: #FFF;
  104. text-decoration: none;
  105. border-bottom:solid 2px #930;
  106.  
  107. }
  108.  
  109.  
  110. ul.nav a:hover {
  111. background-color:#F60;
  112. }
  113. ul.nav li {
  114. display: inline; /* :KLUDGE: Supprime l'espace incongru dans IE/Win */
  115. }
  116.  
  117.  
  118. #footer {
  119.  
  120. text-align: center;
  121. clear:both;
  122. height:55px;
  123. top:2000px;
  124. position:relative;
  125. background-color:#C60;
  126. }
m
0
l
a c 232 L Programmation
25 Novembre 2010 09:35:30

Hmm... difficile de se faire une idée là, je ne vois pas trop ce que tu veux dire... je ne vois pas de problème ? Mais c'est peut être expliqué parce que j'ai IE9 bêta qui gère peut-être mieux ça.
m
0
l
25 Novembre 2010 19:21:27

OmaR a dit :
Hmm... difficile de se faire une idée là, je ne vois pas trop ce que tu veux dire... je ne vois pas de problème ? Mais c'est peut être expliqué parce que j'ai IE9 bêta qui gère peut-être mieux ça.



salut omar

Merci pour tes reponces,peut étre est ce dut au fait que je suis en local , apres l'avoir mis dans une clé et
essayè sur le portable de ma copine j'arrive au mème constat, il me reste plus qu'à tester en live , aurrais tu une
sugestion à me faire (je suis autodidacte dans le domaine ) .
Une autre question:mon script lightbox corespond à un poids de 186Ko sans compression , ma page total arrive donc à
un poids de 201Ko peut on réduire ce poids? suis je obligé de mettre un script par page ,chaque page corespondant à
des images diffèrente de par leur technique d élaboration .merci
m
0
l
a c 232 L Programmation
25 Novembre 2010 20:07:04

Salut,

Pour le lightbox, est-ce que c'est toi qui l'a fait, ou est-ce que tu as récupéré un script lightbox tout fait ?
Si tu as récupéré un script tout fait, généralement tu vas utiliser le même script. Ce script tu le mets dans un fichier javascript à part que tu ajoutes à ta page via <script type="text/javascript" src="script.js" />
Et si c'est bien fait, il ne devrait y avoir que les images qui changent, mais ça c'est dans le code HTML que ça change.
m
0
l
25 Novembre 2010 21:24:56

salut,

le lightbox est un script tout fait, l'emplacement conseillé ètait entre les balises <head></head>

  1. <script type="text/javascript" src="jsbis/js/jquery.js"></script>
  2. <script type="text/javascript" src="jsbis/js/jquery.lightbox-0.5.js"></script>
  3. <link rel="stylesheet" href="jsbis/css/jquery.lightbox-0.5.css" type="text/css" media="all" />
  4. <script type="text/javascript">
  5. $(function() {
  6. $('a[@rel*=lightbox]').lightBox();
  7. });
  8. </script>
m
0
l
25 Novembre 2010 21:30:44

re salut ,

je me suis trompé de script lors de mon dernier post , voici le script utilisé

<code>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
</code>
m
0
l
a c 232 L Programmation
25 Novembre 2010 22:06:04

Oui, bah c'est bon, tous ces fichiers sont partagés entre chaque fichiers, et ils ne sont donc téléchargés qu'une seule fois.
m
0
l
25 Novembre 2010 23:14:07

OmaR a dit :
Oui, bah c'est bon, tous ces fichiers sont partagés entre chaque fichiers, et ils ne sont donc téléchargés qu'une seule fois.



Jai peur de ne pas avoir tres bien suivi la manip, je prend ce code que je mes dans un fichier js , et j'ajoute sur ma page html ce code <script type="text/javascript" src="script.js" /> qui rend ma lightbox active , j'acccède à l'image mais sans effet lightbox



  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>
  3. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
m
0
l
a c 232 L Programmation
25 Novembre 2010 23:44:25

C'était un exemple que je te donnais.
Actuellement, ta lightbox fonctionne, non ?
m
0
l
26 Novembre 2010 07:32:11

OmaR a dit :
C'était un exemple que je te donnais.
Actuellement, ta lightbox fonctionne, non ?


Bonjour Omar
Oui ma lightbox fonctionne,quand je mets ce code ci dans les balises <head></head>

  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>
  3. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>


mais le poids de la page est considerablement augmenté. Si je mais le code ci dessu dans un fichier à part comme un css , lier à la page corespondante avec ce code ci <script type="text/javascript" src="script.js" /> l'effet lightbox n'est plus
merci de ta patience!!!!!
m
0
l
a c 232 L Programmation
26 Novembre 2010 09:10:23

Je ne comprend pas tout ce que tu me dis là.
Dans les balises <head>, tu rajoutes 3 lignes, donc ça n'augmente pas le poids de la page HTML énormément, ça doit faire quoi, 2ko peut-être.

Après, tous les scripts (prototype.js, scriptaculous.js, lightbox.js et lightbox.css) alourdissent un peu le poids total, mais il faut savoir qu'ils ne sont téléchargés qu'une seule fois, lors de la 1ère page, sur toutes les autres pages où tu les utilises, ils ne seront pas retéléchargés.
Donc, pas de soucis :) 
m
0
l
27 Novembre 2010 08:50:40

OmaR a dit :
Je ne comprend pas tout ce que tu me dis là.
Dans les balises <head>, tu rajoutes 3 lignes, donc ça n'augmente pas le poids de la page HTML énormément, ça doit faire quoi, 2ko peut-être.

Après, tous les scripts (prototype.js, scriptaculous.js, lightbox.js et lightbox.css) alourdissent un peu le poids total, mais il faut savoir qu'ils ne sont téléchargés qu'une seule fois, lors de la 1ère page, sur toutes les autres pages où tu les utilises, ils ne seront pas retéléchargés.
Donc, pas de soucis :) 


Bonjour OMar

désolè si je ne suis pas tres clair,sur ma page photo dans les balises <head> je rajoute mes 3 lignes qui permettre le fonctionnement de ma lightbox dont les fichiers sont placès dans un dossier js à la racine du site à ce niveau tout marche( le script fait tout de mème 187Ko au final ma page atteint 201Ko).
De ma page photo j'accède à ma page peinture numèrique je suis donc obligé de rajouter mes 3lignes dans mesbalises <head> pour obtenir le méme fonctionnement que sur ma page photo et ainssi de suite à chaque page ou il y a des images voila ou j'en suis, cela te semble t'il logique ? merci
m
0
l
a c 232 L Programmation
27 Novembre 2010 12:41:28

Salut,

Oui c'est tout à fait ça qu'il faut faire. Mais en fait, c'est pas vraiment ta page en elle-même qui fait 201 Ko.
Ta page HTML elle fait 14Ko, et tes scripts 187.
Ce que je te disais, c'est que les scripts sont mis en cache par le navigateur. Donc si la personne va sur ta page photo, il va télécharger les 201Ko, puis quand il va changer de page et aller à la page peinture, il ne retéléchargera pas le script qu'il aura déjà, il prendra juste le contenu de ta page HTML, soit une dizaine de Ko, donc pas de soucis là dessus.
Tous les sites fonctionnent comme ça ;) 
m
0
l
28 Novembre 2010 08:24:38

OmaR a dit :
Salut,

Oui c'est tout à fait ça qu'il faut faire. Mais en fait, c'est pas vraiment ta page en elle-même qui fait 201 Ko.
Ta page HTML elle fait 14Ko, et tes scripts 187.
Ce que je te disais, c'est que les scripts sont mis en cache par le navigateur. Donc si la personne va sur ta page photo, il va télécharger les 201Ko, puis quand il va changer de page et aller à la page peinture, il ne retéléchargera pas le script qu'il aura déjà, il prendra juste le contenu de ta page HTML, soit une dizaine de Ko, donc pas de soucis là dessus.
Tous les sites fonctionnent comme ça ;) 



Bonjour Omar

Merci pour tes conseils et ta rèactivitès, cela ma rendu bien service , aurais tu quelque livre à me conseiller, dans le domaine du dévelopement de site web, de manière à approfondire mes modeste s connaissances.
m
0
l
a c 232 L Programmation
28 Novembre 2010 14:15:34

Salut,

Désolé je n'ai jamais lu de livre sur du HTML/JavaScript, donc difficile de t'en proposer.
Sinon, tu peux aussi trouver des sites web qui expliquent ça très bien.
Un que les gens aiment bien généralement c'est le site du zero. Par contre il faut aimer le style qui est assez particulier.
m
0
l
29 Novembre 2010 10:50:17

OmaR a dit :
Salut,

Désolé je n'ai jamais lu de livre sur du HTML/JavaScript, donc difficile de t'en proposer.
Sinon, tu peux aussi trouver des sites web qui expliquent ça très bien.
Un que les gens aiment bien généralement c'est le site du zero. Par contre il faut aimer le style qui est assez particulier.


Salut Omar

Mon 1er post tablè sur un problème de fond sous IE,et tu m'avais demandè si mon site ètait en ligne pour voir le prob,et je pence que ma description du dit problème ètait assé vague,hier en cherchant sur google, j'ai trouvè sur le forum alsacréation,quelqu'un qui rencontre le méme prob,si je comprend bien c'est un prob de refresh

voici un copier collé de son texte:
Mon problème se pose dès lors que je passe d'une page à l'autre où lorsque que je reviens sur le même page à l'aide d'un lien. Dans les 2 cas, assez régulièrement (pas systématiquement, mes presque), IE fait un refresh de ces 2 images. J'ai essayé de fouillé le web, mais je n'ai trouvé (compris) nul part de réponse à ce simple problème : comment faire en sorte, sans changer le paramétrage d'IE (dépendant des postes de mes futurs clients), ni le paramétrage apache (dépendant de mon futur hébergeur), qu'IE utilise les background-image en cache lorsque l'on reste sur des pages dont les styles proviennent des mêmes CSS ?

Je cherche également une solution à ce problème, même si cela peut paraître être un "détail", sur un site avec beaucoup de background-image c'est pas terrible ...

J'ai donc fait des tests, l'image est bien dans le cache, mais IE tarde à la mettre en place et laisse apparaitre du blanc en attendant ... Même si c'est toujours plus rapide que si elle n'est pas en cache.

Sous FF, c'est parfait, même en rechargeant, pas une trace blanche, ca bouge pas.
Je sais pas trop si c'est possible de changer cela, mais ce serait très utile.



m
0
l
a c 232 L Programmation
29 Novembre 2010 11:46:39

Hmm... pas sûr de savoir répondre à cette question, et je ne sais pas du tout à quoi ressemble ton image.
Mais ce que tu pourrais essayer de faire, c'est de mettre un fond d'une autre couleur en plus de ton image, le fond devrait être chargé directement, et l'image apparaitre après.
Donc, à condition que ton image ne soit pas de 36 000 couleurs, ça peut être une solution. Tu prends la couleur dominante de ton image.
Ca ressemblerait à:
  1. background: #couleur url('ton-image.jpg');


Sachant que #couleur est le code hexadécimal de la couleur, tu dois pouvoir récupérer cette valeur avec un logiciel d'édition d'images.
C'est une chaine de caractère composée de 6 lettres/chiffres, pour les chiffres tu peux avoir de 0 à 9 et pour les lettres de A à F, avec un # devant:
Exemple: #FF0000

Tu as ce lien qui te montre les codes (il n'y a pas le # affiché par contre) : http://color.shawnolson.net/ (le "hex values)
m
0
l
9 Décembre 2010 09:21:40

Salut Omar

merci pour ta réponces prècédente, mais cela n'a rien changé, je vérrais en ligne,
mon fichier css et d'autre on pris une apparance que je ne m'explique pas est ce préjudiciable pour le css et sont utilisation ou est ce seulement un souci visuel, et puis je règler ce problème ci joint image merci.
(je n'arrive pas à joindre l'image pfffffff) en voici une description:feuille blanche , cornée en haut à droite, au milieu comme un écran avec six petit carré bleu rouge et rose, merci .
.
m
0
l
a c 232 L Programmation
9 Décembre 2010 10:09:27

Salut,

Pour joindre une image, il faut que tu l'uploades sur un hébergeur d'images (imageshack, casimages...) et que tu mettes le lien vers l'image.
Et puis si tu peux mettre le code CSS que tu as mis
m
0
l
10 Décembre 2010 07:49:46

Salut OMar

Apres relecture de mon poste,je m'aperçeois du manque de clartée dans mes explications, le prob recontrè, portè plus exactement sur l'icone de ma feuille de style css, que puis je faire, pour remédier à cela et cela est il pénalisant pour le fonctionement du site une fois mis en ligne (en local le css fonctionne), je te joint l'image hébergèe sur imageshack


merci

m
0
l
a c 232 L Programmation
10 Décembre 2010 11:01:29

Salut,

Ah d'accord, j'avais pas compris comme ça. C'est certainement que le fichier ne s'ouvre pas avec un logiciel connu, mais ça ne gène en rien.
L'icône est attribuée par Windows parce qu'il ne doit pas y avoir de logiciel prévu pour l'éditer, mais ça ne posera aucun soucis.
m
0
l
15 Décembre 2010 09:11:39

Bonjour Omar

J'ai certaine pages avec miniatures qui approchent les 100ko ,suis je dans des limites acceptables pour un confort de visite et de rapiditè de chargement.
Apres avoir vu avec firefox des poids largement au dessu sur d'autre site, est il utlisè d'autre langage en plus du html pour faciliter l chargement.
m
0
l
a c 232 L Programmation
15 Décembre 2010 09:43:36

Salut,

Tu veux dire que le poids total de la page fait 100 Ko, ou que chaque miniature fait 100 Ko ?
Et 100Ko, ce n'est pas forcément énorme lorsque l'on a beaucoup d'images, quand un utilisateur voit beaucoup d'images, il s'attend à ce que ça soit assez long à charger, et 100Ko se télécharge plutôt rapidement maintenant.
m
0
l
15 Décembre 2010 10:38:31

Je parlais du poids total de la page, encore merci pour ta rèponse!! :bounce: 
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS