Se connecter avec
S'enregistrer | Connectez-vous

Probleme de fond sous IE

Dernière réponse : dans Programmation

:) 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

Lassé par la pub ? Créez un compte

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
Expert Programmation

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,...)

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" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
  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. }
Expert Programmation

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.

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
Expert Programmation

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.

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>

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>

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"/>

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!!!!!
Expert Programmation

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 :) 

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
Expert Programmation

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 ;) 

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.
Expert Programmation

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.

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.



Expert Programmation

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)

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 .
.
Expert Programmation

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

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

Expert Programmation

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.

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.
Expert Programmation

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.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde