FORUM Tom's Hardware » Programmation » HTML / Javascript » introduction de javascript = désordre ?
 

introduction de javascript = désordre ?

Overclocking & Tuning : fifi2191 et 88 utilisateurs inconnus
Ajouter une réponse



 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : introduction de javascript = désordre ?
 
chantevent
Plus d'informations
n°37498
27-01-2008 à 03:13:45

bidouilleuse occasionnelle du dimanche, j'y comprends rien ni n'y connais rien. j'avais un blog parfait avec mon petit css bidouillé mais juste, et là... j'ai introduit du javascript pour faire des bannières aléatoires sympatoches, mais ça merde : la bannière se trouve décalée par rapport à mon image de background, et ma pub, au lieu d'être SOUS ma bannière, se retrouve à chevaucher les bords du corps de mon blog... c'est moche !
 
pour le voir en direct live : blog.
 
voilà le début de mon css avant ma modif :  
 

Code :
  1. <head>
  3. <title>Shanadoo-by Shingel (th-paradies.de)</title>
  5. <style type="text/css">
  7. body, div
  8.     {
  9.     scrollbar-3dlight-color: #ffffff;
  10.     scrollbar-face-color: #df202e;
  11.     scrollbar-darkshadow-color: #ffffff;
  12.     scrollbar-track-color: #ffffff;
  13.     scrollbar-highlight-color: #ffffff;
  14.     scrollbar-shadow-color: #ffffff;
  15.     scrollbar-arrow-color: #df202e;
  16.     font-family: trebuchet MS;
  17.     font-size: 8pt;
  18.     color: #000000;
  19.     }
  21. a:link     {
  22.     color:#df202e;
  23.     text-decoration:none;
  24.     }
  26. a:visited
  27.     {
  28.     color:#df202e;
  29.     text-decoration:none;
  30.     }
  32. a:active     {
  33.     color:#df202e;
  34.     text-decoration:none;
  35.     }
  37. a:hover     {
  38.     color:#000000;
  39.     border-bottom: 1px dotted #df202e;
  40.     }
  43. .inhaltetable
  44.     {
  45.     color: #000000;
  46.     width:100%;
  47.     }
  49. input     {
  50.     color: #000000;
  51.     background-color: #ddffb4;
  52.     font-family: Arial;
  53.     font-size: 9pt;
  54.     border: 1px double #000000;
  55.     width: 100px;
  56.     height: 20px;
  57.     }
  59. textarea {
  60.     width: 200;
  61.     height: 130;
  62.     color: #000000;
  63.     background-Color: #f1f6a6;
  64.     font-Family:Arial;
  65.     font-Size: 8pt;
  66.     border: 1px double #ffffff;
  67.     }
  69. .navi, a.navi:active, a.navi:visited, a.navi:link
  70.     {
  71.     font-family: Century Gothic;
  72.     font-size: 7pt;
  73.     text-transform: uppercase;
  74.     color: #df202e;
  75.     background-color: #ffffff;
  76.     display: block;
  77.     line-height: 8pt;
  78.     padding: 3px 3px 3px 3px;
  79.     margin: 3px;
  80.     }
  82. .navi:hover
  83.     {
  84.     font-family: Century Gothic;
  85.     font-size: 7pt;
  86.     text-transform: uppercase;
  87.     color: #df202e;
  88.     background-color: #ffffff;
  89.     display: block;
  90.     line-height: 8pt;
  91.     padding: 3px 3px 3px 3px;
  92.     margin: 3px;
  93.     }
  95. i     {
  96.     color: #df202e;
  97.     boder-bottom: 1px dashed #000000;
  98.     }
  100. s     {
  101.     color: #df202e;
  102.     }
  104. u    {
  105.     color: #df202e;
  106.     border-bottom: 1px dotted #df202e;
  107.     }
  109. b     {
  110.     color: #df202e;
  111.     }
  113. .titel     {
  114.     color: #df202e;
  115.     display: block;
  116.     text-align: left;
  117.     font-family: Tahoma;
  118.     font-size: 9pt;
  119.     background: #F7ADAC;
  120.     padding: 3px;
  121.     line-height: 6pt;
  122.     border: 1px dotted #EB3B38;
  123.     margin: 0px;
  124.     }
  126. .navigation
  127.     {
  128.     width: 200px;
  129.     color:#000000;
  130.     margin-bottom: 10px;
  131.     background-color: #ffffff;
  132.     }
  134. .navigation2
  135.     {
  136.     position: absolute;
  137.     left:789px;
  138.     top: 446px;
  139.     width: 275px;
  140.     }
  142. </style>
  143. </head>
  145. <img src="http://apu.mabul.org/up/apu/2008/01/03/img-st7rswt2c0m.jpg" style="position: absolute; top: 0px; left:0px;">
  146. <body background="http://i198.photobucket.com/albums/aa200/ShiLayouts/Stars%20Q-T/Shanadooline.jpg" style="position: center; top: 0px;">
  148. <div class="navigation2">


 
et après la modif, ça donne ça :
 

Code :
  1. <HEAD>
  3. <!-- DEBUT DU SCRIPT -->
  4. <SCRIPT LANGUAGE="JavaScript">
  5. /*
  6. SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
  7. http://www.editeurjavascript.com
  8. */
  10. var nbimage= 70;
  11. var width;
  12. var height;
  13. var url;
  14. var alte;
  15. function banniere()
  16. {
  17. numimage= Math.round(Math.random()*(nbimage-1)+1);
  18. if (numimage <= 10)
  19. {
  20. gotosite = "";
  21. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221247u8tt5.jpg";
  22. alte = "un";
  23. }
  24. if (numimage > 10 && numimage <= 20)
  25. {
  26. gotosite = "";
  27. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221353zegwj.jpg";
  28. alte = "";
  29. }
  30. if (numimage > 20 && numimage <= 30)
  31. {
  32. gotosite = "";
  33. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221449tmoff.jpg";
  34. alte = "";
  35. }
  36. if (numimage > 30 && numimage <= 40)
  37. {
  38. gotosite = "";
  39. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221541z7ovn.jpg";
  40. alte = "";
  41. }
  42. if (numimage > 40 && numimage <= 50)
  43. {
  44. gotosite = "";
  45. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221620g7uro.jpg";
  46. alte = "";
  47. }
  48. if (numimage > 50 && numimage <= 60)
  49. {
  50. gotosite = "";
  51. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221651qtqjy.jpg";
  52. alte = "";
  53. }
  54. if (numimage > 60)
  55. {
  56. gotosite = "";
  57. url = "http://apu.mabul.org/up/apu/2008/01/26/img-221742sqrpa.jpg";
  58. alte = "";
  59. }
  60. if(gotosite != "" )
  61.     {
  62.     document.write ('<A HREF="' + gotosite + '">');
  63.     }
  64. document.write('<IMG SRC="' + url + '" ALT="' + alte + '" BORDER=0>')
  65. if(gotosite != "" )
  66.     {
  67.     document.write('</A>')
  68.     }
  69. }
  70. </SCRIPT>
  71. <!-- FIN DU SCRIPT -->
  73. <title>Chantevent by inès drège.</title>
  75. <style type="text/css">
  77. body, div
  78.     {
  79.     scrollbar-3dlight-color: #ffffff;
  80.     scrollbar-face-color: #df202e;
  81.     scrollbar-darkshadow-color: #ffffff;
  82.     scrollbar-track-color: #ffffff;
  83.     scrollbar-highlight-color: #ffffff;
  84.     scrollbar-shadow-color: #ffffff;
  85.     scrollbar-arrow-color: #df202e;
  86.     font-family: trebuchet MS;
  87.     font-size: 8pt;
  88.     color: #000000;
  89.     }
  91. a:link     {
  92.     color:#df202e;
  93.     text-decoration:none;
  94.     }
  96. a:visited
  97.     {
  98.     color:#df202e;
  99.     text-decoration:none;
  100.     }
  102. a:active     {
  103.     color:#df202e;
  104.     text-decoration:none;
  105.     }
  107. a:hover     {
  108.     color:#000000;
  109.     border-bottom: 1px dotted #df202e;
  110.     }
  113. .inhaltetable
  114.     {
  115.     color: #000000;
  116.     width:100%;
  117.     }
  119. input     {
  120.     color: #000000;
  121.     background-color: #ddffb4;
  122.     font-family: Arial;
  123.     font-size: 9pt;
  124.     border: 1px double #000000;
  125.     width: 100px;
  126.     height: 20px;
  127.     }
  129. textarea {
  130.     width: 200;
  131.     height: 130;
  132.     color: #000000;
  133.     background-Color: #f1f6a6;
  134.     font-Family:Arial;
  135.     font-Size: 8pt;
  136.     border: 1px double #ffffff;
  137.     }
  139. .navi, a.navi:active, a.navi:visited, a.navi:link
  140.     {
  141.     font-family: Century Gothic;
  142.     font-size: 7pt;
  143.     text-transform: uppercase;
  144.     color: #df202e;
  145.     background-color: #ffffff;
  146.     display: block;
  147.     line-height: 8pt;
  148.     padding: 3px 3px 3px 3px;
  149.     margin: 3px;
  150.     }
  152. .navi:hover
  153.     {
  154.     font-family: Century Gothic;
  155.     font-size: 7pt;
  156.     text-transform: uppercase;
  157.     color: #df202e;
  158.     background-color: #ffffff;
  159.     display: block;
  160.     line-height: 8pt;
  161.     padding: 3px 3px 3px 3px;
  162.     margin: 3px;
  163.     }
  165. i     {
  166.     color: #df202e;
  167.     boder-bottom: 1px dashed #000000;
  168.     }
  170. s     {
  171.     color: #df202e;
  172.     }
  174. u    {
  175.     color: #df202e;
  176.     border-bottom: 1px dotted #df202e;
  177.     }
  179. b     {
  180.     color: #df202e;
  181.     }
  183. .titel     {
  184.     color: #df202e;
  185.     display: block;
  186.     text-align: left;
  187.     font-family: Tahoma;
  188.     font-size: 9pt;
  189.     background: #F7ADAC;
  190.     padding: 3px;
  191.     line-height: 6pt;
  192.     border: 1px dotted #EB3B38;
  193.     margin: 0px;
  194.     }
  196. .navigation
  197.     {
  198.     width: 200px;
  199.     color:#000000;
  200.     margin-bottom: 10px;
  201.     background-color: #ffffff;
  202.     }
  204. .navigation2
  205.     {
  206.     position: absolute;
  207.     left:789px;
  208.     top: 446px;
  209.     width: 275px;
  210.     }
  212. </style>
  213. </HEAD>
  215. <BODY><!-- DEBUT DU SCRIPT -->
  216. <!--
  217. SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
  218. http://www.editeurjavascript.com
  219. -->
  220. <SCRIPT language="JavaScript">
  221. banniere();
  222. </SCRIPT>
  223. <!-- FIN DU SCRIPT --></BODY>
  224. <body background="http://i198.photobucket.com/albums/aa200/ShiLayouts/Stars%20Q-T/Shanadooline.jpg" style="position: center; top: 0px;">
  226. <div class="navigation2">


 
si quelqu'un a une idée de comment résoudre cette couille, je lui serais très reconnaissante de m'aider à résoudre mon souci. là c'est moooooche ! par contre, oubliez pas : je suis vraiment pas bonne, aucun talent pour comprendre l'art de la programmation... alors euh... précision, sinon je capte pas :/
 
merci d'avance :)

Batchy
pourquoi faire cent fois la même chose ?
Plus d'informations
n°37499
27-01-2008 à 09:38:31

t'a pensé à valider ton html et ton css ?

chantevent
Plus d'informations
n°37501
27-01-2008 à 11:59:56

absolument pas ; il m'a détecté un grand nombre d'erreurs que je vais essayer de résoudre petit à petit. je crois avoir réglé le problème de la publicité en changeant le code de mon image de fond, de :
 

Code :
  1. <body background="http://i198.photobucket.com/albums/aa200/ShiLayouts/Stars%20Q-T/Shanadooline.jpg" style="position: center; top: 0px;">


 
c'est devenu :
 

Code :
  1. <body background="http://i198.photobucket.com/albums/aa200/ShiLayouts/Stars%20Q-T/Shanadooline.jpg" style="position: absolute; top: 0px;">


 
pour ce qui est du décallage qu'on observait entre la bannière et l'image de fond, j'ai bidouillé en ajoutant sept pixels à la gauche de mon image de fond. ce n'est pas absolument parfait, mais je suis assez satisfaite du résultat.
 
je te remercie beaucoup pour ton aide, batchy ! :)


Aller à :
Ajouter une réponse
  FORUM Tom's Hardware » Programmation » HTML / Javascript » introduction de javascript = désordre ?
 

Plan du forum
Forum MesDiscussions.Net, Version 2007.1.2
© 2000-2007 No1Dev
Page générée en 0.272 secondes
Annonces Google
Publicité
Sujets relatifs
voir tout
Actualités relatives
Les dernières actualités
voir tout
Les derniers tests
voir tout
Dans les albums