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" />
  13. <link rel="stylesheet" media="screen" type="text/css" title=" style" href="style.css" />
  14. </head>
  15. <body>
  17. <div id="header">
  19. </div>
  21. <div id="menu_gauche">
  23. <h3>Rechercher</h3>
  25. <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>
  27. <h3>Navigation</h3>
  28. <p><a href="#">1| Accueil</a>
  29. <a href="#">2| Mieux me connaitre</a>
  30. <a href="#">3| Parcours scolaire</a>
  31. <a href="#">4| Experiences</a>
  32. <a href="#">5| Réalisations</a>
  33. <a href="#">7| Galerie Video</a>
  34. <a href="#">8| Presse</a>
  35. <a href="#">9| Liens</a>
  36. </p>
  38. </div>
  40. <div id="corp">
  42. <h2>PHOTOS</h2>
  46. <p><img src="images1/ban.jpg" alt="Image" /></p>
  49. </div>
  51. <div id="footer">
  52. <p>© 2006-2008 - Justin*  (<a href="http://freakdestroyer.free.fr">Freak</a>  <a href="http://www.kitgraphique.net/">kitgraphique</a> )</p>
  54. </div>
  56. </body>
  57. </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. }
  12. #header
  13. {
  14. background-image:url(images1/header.jpg);
  15. background-repeat:fixe;
  16. margin-top:0px;
  17. margin-left:0px;
  18. width:681px;
  19. height:313px;
  20. }
  22. #corp
  23. {
  24. margin-top:10px;
  25. margin-right:190px;
  26. margin-left:195px;
  27. width:500px;
  28. }
  30. #footer
  31. {
  32. font-size:11px;
  33. font-family:Arial;
  34. text-align:center;
  35. color:#C0C0C0;
  36. background:#9BDAE4 url(images1/footer.jpg) repeat-x;
  37. height:100px;
  38. }
  40. #footer p
  41. {
  42. padding:40px;
  43. color:#000000;
  44. }
  46. #footer a
  47. {
  48. color:#000000;
  49. border-bottom:1px dotted #C0C0C0;
  50. text-decoration:none;
  51. }
  53. #footer a:hover
  54. {
  55. border-bottom:0px dotted #C0C0C0;
  56. color:#000000;
  57. }
  59. #footer a:visited
  60. {
  61. text-decoration:none;
  62. }
  64. #menu_gauche
  65. {
  66. background-color:#A8DC17;
  67. width:140px;
  68. float:left;
  69. border:6px solid #4B4B4B;
  70. margin-left:11px;
  71. text-align:center;
  72. padding:5px;
  73. margin-top:10px;
  74. }
  76. #menu_gauche a
  77. {
  78. color:#657C14;
  79. text-decoration:none;
  80. background-color:#A8DC17;
  81. padding:0 0 0 0px;
  82. float:left;
  83. width:140px;
  84. text-align:justify;
  85. border-bottom:1px solid #91BF0F;
  86. }
  88. #menu_gauche a:hover
  89. {
  90. color:#657C14;
  91. background:#CEED63 80px 0px no-repeat;
  92. text-align:center;
  93. width:140px;
  94. }
  96. h3
  97. {
  98. font-size:14px;
  99. font-family:Trebuchet MS;
  100. color:#657C14;
  101. margin-top:0px;
  102. }
  104. h2
  105. {
  106. font-size:18px;
  107. font-family:Trebuchet MS;
  108. color:#AADB19;
  109. border-bottom:0px solid #AADB19;
  110. }
  112. a
  113. {
  114. color:#B9DB5D;
  115. text-decoration:none;
  116. }
  118. a:hover
  119. {
  120. color:#B8B8BF;
  121. }
  123. .imageflottante
  124. {
  125. float:left;
  126. margin-right:5px;
  127. padding:10px;
  128. }
  130. input
  131. {
  132. width:120px;
  133. background-color:#CEED63;
  134. border:1px solid #657C14;
  135. }


 
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