Besoin d'aide pour lightbox.

Besoin d'aide pour lightbox. - HTML/CSS - Programmation

Marsh Posté le 14-02-2008 à 09:02:08    

Bonjour à tous,
c'est mon premier message sur ce forum qui m'a l'air bien sympathique, et qui j'espère le restera après ma question, qui devrait dérouter certains pros  ;)  
En effet, la quiche que je suis est incapable d'utiliser l'effet Lightbox (et même slimbox) pour un faire un portfolio agréable.
Je pense que certains d'entre vous pourraient m'aider.
 
Voilà la page

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. <title>**** | e-portfolio | Galerie Video</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta name="description" content="description de mon site web" />
  7. <meta name="keywords" content="mots, clefs, site" />
  8. <meta name="author" content="auteur" />
  9. <meta name="category" content="internet" />
  10. <meta name="robots" content="index, follow" />
  11. <meta http-equiv="Content-Language" content="fr-FR" />
  12. <link rel="stylesheet" media="screen" type="text/css" title=" style" href="style.css" />
  13. </head>
  14. <body>
  15. <div id="header">
  16. </div>
  17. <div id="menu_gauche">
  18. <h3>Rechercher</h3>
  19. <p><input type="text" title="Recherchez un mot sur le site" alt="Recherchez un mot sur le site" name="Recherchez un mot sur le site" size="20" value="" onfocus="this.value=''" /></p>
  20. <h3>Navigation</h3>
  21. <p><a href="#">1| Accueil</a>
  22. <a href="#">2| Mieux me connaitre</a>
  23. <a href="#">3| Parcours scolaire</a>
  24. <a href="#">4| Experiences</a>
  25. <a href="#">5| Réalisations</a>
  26. <a href="#">7| Galerie Video</a>
  27. <a href="#">8| Presse</a>
  28. <a href="#">9| Liens</a>
  29. </p>
  30. </div>
  31. <div id="corp">
  32. <h2>PHOTOS</h2>
  33. <p><img src="images1/ban.jpg" alt="Image" /></p>
  34. </div>
  35. <div id="footer">
  36. <p>© 2006-2008 - Justin*  (<a href="http://freakdestroyer.free.fr">Freak</a>  <a href="http://www.kitgraphique.net/">kitgraphique</a> )</p>
  37. </div>
  38. </body>
  39. </html>


 
voilà le CSS

Code :
  1. body
  2. {
  3. margin:auto;
  4. margin-top:0px;
  5. background:#000000 url(images1/fond.jpg) repeat-x;
  6. font-size:12px;
  7. font-family:Trebuchet MS;
  8. text-align:justify;
  9. color:#B8B8BF;
  10. }
  11. #header
  12. {
  13. background-image:url(images1/header.jpg);
  14. background-repeat:fixe;
  15. margin-top:0px;
  16. margin-left:0px;
  17. width:681px;
  18. height:313px;
  19. }
  20. #corp
  21. {
  22. margin-top:10px;
  23. margin-right:190px;
  24. margin-left:195px;
  25. width:500px;
  26. }
  27. #footer
  28. {
  29. font-size:11px;
  30. font-family:Arial;
  31. text-align:center;
  32. color:#C0C0C0;
  33. background:#9BDAE4 url(images1/footer.jpg) repeat-x;
  34. height:100px;
  35. }
  36. #footer p
  37. {
  38. padding:40px;
  39. color:#000000;
  40. }
  41. #footer a
  42. {
  43. color:#000000;
  44. border-bottom:1px dotted #C0C0C0;
  45. text-decoration:none;
  46. }
  47. #footer a:hover
  48. {
  49. border-bottom:0px dotted #C0C0C0;
  50. color:#000000;
  51. }
  52. #footer a:visited
  53. {
  54. text-decoration:none;
  55. }
  56. #menu_gauche
  57. {
  58. background-color:#A8DC17;
  59. width:140px;
  60. float:left;
  61. border:6px solid #4B4B4B;
  62. margin-left:11px;
  63. text-align:center;
  64. padding:5px;
  65. margin-top:10px;
  66. }
  67. #menu_gauche a
  68. {
  69. color:#657C14;
  70. text-decoration:none;
  71. background-color:#A8DC17;
  72. padding:0 0 0 0px;
  73. float:left;
  74. width:140px;
  75. text-align:justify;
  76. border-bottom:1px solid #91BF0F;
  77. }
  78. #menu_gauche a:hover
  79. {
  80. color:#657C14;
  81. background:#CEED63 80px 0px no-repeat;
  82. text-align:center;
  83. width:140px;
  84. }
  85. h3
  86. {
  87. font-size:14px;
  88. font-family:Trebuchet MS;
  89. color:#657C14;
  90. margin-top:0px;
  91. }
  92. h2
  93. {
  94. font-size:18px;
  95. font-family:Trebuchet MS;
  96. color:#AADB19;
  97. border-bottom:0px solid #AADB19;
  98. }
  99. a
  100. {
  101. color:#B9DB5D;
  102. text-decoration:none;
  103. }
  104. a:hover
  105. {
  106. color:#B8B8BF;
  107. }
  108. .imageflottante
  109. {
  110. float:left;
  111. margin-right:5px;
  112. padding:10px;
  113. }
  114. input
  115. {
  116. width:120px;
  117. background-color:#CEED63;
  118. border:1px solid #657C14;
  119. }


 
J'aimerais donc, créer une galerie, en dessous de "photos" vers la ligne 43.
Voilà le lien pour deux photos par exemple :
http://www.zikinf.com/_gfx/annonce [...] -hr-50.jpg
http://www.zikinf.com/_gfx/annonce [...] e-luxe.jpg
 
Je remercie par avance les âmes charitables ;)

Reply

Marsh Posté le 14-02-2008 à 09:02:08   

Reply

Marsh Posté le 14-02-2008 à 19:30:49    

Après 3 heures de plus passé dessus je n'y arrive toujours pas :(

Reply

Sujets relatifs:

Leave a Replay

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