comment integrer un code css a ma feuille css

3 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 13:31

bonjour a tous

comment integrer un code css a la suite de ma feuille css
j ai essayer de le mettre a la suite du mien mais cela ne fonctionne pas
merci des reponses


Dernière édition par flexi2202 le Mar 14 Mai 2013 - 7:45, édité 1 fois
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par Anzu Lun 13 Mai 2013 - 13:36

Bonjour,

Pourrait on avoir la totalité de votre css ? Quel est le code que vous avez rajouté? Quel est le lien du forum concerné ?

Pensez à donner les infos dans votre premier message quand vous ouvrez un sujet, nous ne sommes pas des devins Mr. Green

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 14:35

bonjour
merci pour la reponse
oui donc voila le soucis
voici le code source que j ai trouve et dont je souhaite intégrer un css

code source que j ai trouve aucune modification apportée
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GallerificPlus - your jQuery gallery and lightbox</title>
<!-- Matt Gifford (http://www.mattgifford.co.uk/) -->
<link rel="stylesheet" href="css/gallerificPlus.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/gallerificPlus.js"></script>
<script type="text/javascript">
   document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
</head>
<body>
<!-- Start Gallery Html Containers -->
<div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div id="slideshow" class="slideshow"></div>
    <div id="details" class="embox">
        <div id="download" class="download"><a id="download-link">Download Original</a></div>
        <div id="image-title" class="image-title"></div>
        <div id="image-desc" class="image-desc"></div>
    </div>
</div>
<div id="navigation" class="navigation">
    <ul class="thumbs noscript">
        <li><a href="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" original="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" title="There's a train a comin'" description="Description"><img src="http://farm1.static.flickr.com/100/253177978_7609879637_s.jpg" alt="There's a train a comin'" /></a></li>
      <li><a href="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" original="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" title="P P P Pick Up A Penguin" description="Description"><img src="http://farm1.static.flickr.com/112/253177973_0710df33a7_s.jpg" alt="P P P Pick Up A Penguin" /></a></li>
      <li><a href="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" original="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" title="Ban The Flag" description="Description"><img src="http://farm1.static.flickr.com/90/253177962_4a0056155e_s_d.jpg" alt="Ban The Flag" /></a></li>
      <li><a href="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" original="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" title="Our Man Charlie" description="Description"><img src="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_s_d.jpg" alt="Our Man Charlie" /></a></li>
        <li><a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" original="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg" title="Title #3" description="Description"><img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" original="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg" title="Title #4" description="Description"><img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" original="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg" title="Title #5" description="Description"><img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" original="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg" title="Title #6" description="Description"><img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" original="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg" title="Title #7" description="Description"><img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" original="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg" title="Title #8" description="Description"><img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" original="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg" title="Title #9" description="Description"><img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" original="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg" title="Title #10" description="Description"><img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" original="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg" title="Title #11" description="Description"><img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" original="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg" title="Title #12" description="Description"><img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" original="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg" title="Title #13" description="Description"><img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" original="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg" title="Title #14" description="Description"><img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" /></a></li>
    </ul>
</div>
<!-- End Gallery Html Containers -->
               
<script type="text/javascript">         
$(document).ready(function() {
   var gallery = $('#gallery').galleriffic('#navigation', {
      delay:                2000,
      numThumbs:            12,
      imageContainerSel:    '#slideshow',
      controlsContainerSel: '#controls',
      titleContainerSel:    '#image-title',
      descContainerSel:    '#image-desc',
      downloadLinkSel:      '#download-link',
      fixedNavigation:     true,
      galleryKeyboardNav:     true,
      autoPlay:           false
   });
   
   gallery.onFadeOut = function() {
      $('#details').fadeOut('fast');
   };
   
   gallery.onFadeIn = function() {
      $('#details').fadeIn('fast');
   };
});
</script>
</body>
</html>

j ai remplace ces lignes

Code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/gallerificPlus.js"></script>

par 3 codes que j ai générés dans le dossier js que j ai trouve dans le zip que j ai télécharger

les trois lignes ajoutées sont

Code:
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/22625.js "></script>
          <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/21591.js "></script>
          <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/19536.js "></script>
         

donc mon code génère en html devient
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GallerificPlus - your jQuery gallery and lightbox</title>
<!-- Matt Gifford (http://www.mattgifford.co.uk/) -->
<link rel="stylesheet" href="css/gallerificPlus.css" type="text/css" />
    <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/22625.js "></script>
          <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/21591.js "></script>
          <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/19536.js "></script>
   document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
</head>
<body>
<!-- Start Gallery Html Containers -->
<div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div id="slideshow" class="slideshow"></div>
    <div id="details" class="embox">
        <div id="download" class="download"><a id="download-link">Download Original</a></div>
        <div id="image-title" class="image-title"></div>
        <div id="image-desc" class="image-desc"></div>
    </div>
</div>
<div id="navigation" class="navigation">
    <ul class="thumbs noscript">
        <li><a href="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" original="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" title="There's a train a comin'" description="Description"><img src="http://farm1.static.flickr.com/100/253177978_7609879637_s.jpg" alt="There's a train a comin'" /></a></li>
      <li><a href="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" original="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" title="P P P Pick Up A Penguin" description="Description"><img src="http://farm1.static.flickr.com/112/253177973_0710df33a7_s.jpg" alt="P P P Pick Up A Penguin" /></a></li>
      <li><a href="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" original="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" title="Ban The Flag" description="Description"><img src="http://farm1.static.flickr.com/90/253177962_4a0056155e_s_d.jpg" alt="Ban The Flag" /></a></li>
      <li><a href="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" original="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" title="Our Man Charlie" description="Description"><img src="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_s_d.jpg" alt="Our Man Charlie" /></a></li>
        <li><a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" original="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg" title="Title #3" description="Description"><img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" original="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg" title="Title #4" description="Description"><img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" original="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg" title="Title #5" description="Description"><img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" original="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg" title="Title #6" description="Description"><img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" original="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg" title="Title #7" description="Description"><img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" original="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg" title="Title #8" description="Description"><img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" original="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg" title="Title #9" description="Description"><img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" original="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg" title="Title #10" description="Description"><img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" original="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg" title="Title #11" description="Description"><img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" original="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg" title="Title #12" description="Description"><img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" original="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg" title="Title #13" description="Description"><img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" original="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg" title="Title #14" description="Description"><img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" /></a></li>
    </ul>
</div>
<!-- End Gallery Html Containers -->
               
<script type="text/javascript">         
$(document).ready(function() {
   var gallery = $('#gallery').galleriffic('#navigation', {
      delay:                2000,
      numThumbs:            12,
      imageContainerSel:    '#slideshow',
      controlsContainerSel: '#controls',
      titleContainerSel:    '#image-title',
      descContainerSel:    '#image-desc',
      downloadLinkSel:      '#download-link',
      fixedNavigation:     true,
      galleryKeyboardNav:     true,
      autoPlay:           false
   });
   
   gallery.onFadeOut = function() {
      $('#details').fadeOut('fast');
   };
   
   gallery.onFadeIn = function() {
      $('#details').fadeIn('fast');
   };
});
</script>
</body>
</html>

jusque la tout fonctionne en local
bon c est la que cela se corse
je retire ceci du code source généré

Code:
<link rel="stylesheet" href="css/gallerificPlus.css" type="text/css" />

et je place entre les balises <style>et </style> ce code css

Code:
/* gallerfic styles */

html, body {
   margin:0;
   padding:0;
}
body{
   text-align: center;
   font-family: Helvetica, Arial;
   background-color: #ccc;
   font-size: 0.85em;
}
div#page {
   width: 900px;
   background-color: #fff;
   margin: 0 auto;
   text-align: left;
}
div#container {
   padding: 20px;
}
div#ads {
   clear: both;
   padding: 12px 0 12px 66px;
}
div#footer {
   text-align: center;
   clear: both;
   padding-top: 12px;
}
a{
   color: #666666;
   text-decoration: none;
}
a:focus, a:hover, a:active {
   color: #182E7A;
   text-decoration: underline;
}
p, li {
   line-height: 1.3em;
}
p a, li a {
   text-decoration: underline;
}
h1, h2 {
   margin: 0;
}
h1 {
   color: #333;
   padding: 0;
}
h2 {
   color: #111;
   padding-top: 10px;
}
div.content {
   /* The display of content is enabled by a javascript generated style on the page.
     This is so that the slideshow content won't display unless javascript is enabled. */
   display: none;
   float:right;
   width:550px;
}
div.controls {
   margin-top: 5px;
   height: 23px;
}
div.ss-controls {
   float: left;
}
div.ss-controls span {
   color: #666666;
   cursor: pointer;
}
div.nav-controls {
   float: right;
}
div.nav-controls a {
   padding: 5px;
}
div.slideshow {
   clear: both;
}
div.slideshow span.image-wrapper {
   float: left;
   padding-bottom: 12px;
}
div.slideshow a.advance-link {
   padding: 2px;
   display: block;
   border: 1px solid #ccc;
}
div.slideshow img {
   border: none;
   display: block;
}
div.download {
   float: right;
}
div.embox {
   clear: both;
   border: 1px solid #ccc;
   background-color: #eee;
   padding: 12px;
}
div.image-title {
   font-weight: bold;
   font-size: 1.4em;
}

div.image-desc {
   line-height: 1.3em;
   padding-top: 12px;
}
div.navigation {
   /* The navigation style is set by a javascript generated style on the page.
     This is so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
   clear: both;
   margin: 0;
   padding: 0;
}
ul.thumbs li {
   float: left;
   padding: 0;
   margin: 5px 10px 5px 0;
   list-style: none;
}
ul.thumbs li a {
   padding: 2px;
   display: block;
   border: 1px solid #ccc;
}
ul.thumbs li.selected a {
   background: #88f;
}
ul.thumbs a:focus {
   outline: none;
}
ul.thumbs img {
   border: none;
   display: block;
}
div.pagination {
   clear: both;
}
div.navigation div.top {
   margin-bottom: 12px;
   height: 11px;
}
div.navigation div.bottom {
   margin-top: 12px;
}
div.pagination a, div.pagination strong {
   display: block;
   float: left;
   margin-right: 2px;
   padding: 4px 7px 2px 7px;
   border: 1px solid #ccc;
}
div.pagination a:hover {
   background-color: #ffc;
   text-decoration: none;
}
div.pagination strong {
   background-color: #acf;
}
 
 
 /* jQuery specific overlay styles */
 
 #jquery-overlay {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   width: 100%;
   height: 500px;
}
#jquery-lightbox {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   text-align: center;
   line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
   position: relative;
   background-color: #fff;
   width: 250px;
   height: 250px;
   margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
   position: absolute;
   top: 40%;
   left: 0%;
   height: 25%;
   width: 100%;
   text-align: center;
   line-height: 0;
}
#lightbox-nav {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
   width: 49%;
   height: 100%;
   zoom: 1;
   display: block;
}
#lightbox-nav-btnPrev {
   left: 0;
   float: left;
}
#lightbox-nav-btnNext {
   right: 0;
   float: right;
}
#lightbox-container-image-data-box {
   font: 10px Verdana, Helvetica, sans-serif;
   background-color: #fff;
   margin: 0 auto;
   line-height: 1.4em;
   overflow: auto;
   width: 100%;
   padding: 0 10px 0;
}
#lightbox-container-image-data {
   padding: 0 10px;
   color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
   width: 70%;
   float: left;
   text-align: left;
}   
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
   display: block;
   clear: left;
   padding-bottom: 1.0em;   
}         
#lightbox-secNav-btnClose {
   width: 66px;
   float: right;
   padding-bottom: 0.7em;   
}

et voici donc le code html avec le code css dont le css ne remplit pas son rôle



Code:

<IFRAME SRC=   "http://la-peche-a-la-perle.forumgratuit.be/h4-pluginplus" width=1000 height=1000 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Lun 13 Mai 2013 - 16:13

Bonjour,
Voilà ta page :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GallerificPlus - your jQuery gallery and lightbox</title>
<!-- Matt Gifford (http://www.mattgifford.co.uk/) -->

<style>
        /* gallerfic styles */
       
        html, body {
          margin:0;
          padding:0;
        }
        body{
          text-align: center;
          font-family: Helvetica, Arial;
          background-color: #ccc;
          font-size: 0.85em;
        }
        div#page {
          width: 900px;
          background-color: #fff;
          margin: 0 auto;
          text-align: left;
        }
        div#container {
          padding: 20px;
        }
        div#ads {
          clear: both;
          padding: 12px 0 12px 66px;
        }
        div#footer {
          text-align: center;
          clear: both;
          padding-top: 12px;
        }
        a{
          color: #666666;
          text-decoration: none;
        }
        a:focus, a:hover, a:active {
          color: #182E7A;
          text-decoration: underline;
        }
        p, li {
          line-height: 1.3em;
        }
        p a, li a {
          text-decoration: underline;
        }
        h1, h2 {
          margin: 0;
        }
        h1 {
          color: #333;
          padding: 0;
        }
        h2 {
          color: #111;
          padding-top: 10px;
        }
        div.content {
          /* The display of content is enabled by a javascript generated style on the page.
            This is so that the slideshow content won't display unless javascript is enabled. */
          display: none;
          float:right;
          width:550px;
        }
        div.controls {
          margin-top: 5px;
          height: 23px;
        }
        div.ss-controls {
          float: left;
        }
        div.ss-controls span {
          color: #666666;
          cursor: pointer;
        }
        div.nav-controls {
          float: right;
        }
        div.nav-controls a {
          padding: 5px;
        }
        div.slideshow {
          clear: both;
        }
        div.slideshow span.image-wrapper {
          float: left;
          padding-bottom: 12px;
        }
        div.slideshow a.advance-link {
          padding: 2px;
          display: block;
          border: 1px solid #ccc;
        }
        div.slideshow img {
          border: none;
          display: block;
        }
        div.download {
          float: right;
        }
        div.embox {
          clear: both;
          border: 1px solid #ccc;
          background-color: #eee;
          padding: 12px;
        }
        div.image-title {
          font-weight: bold;
          font-size: 1.4em;
        }
       
        div.image-desc {
          line-height: 1.3em;
          padding-top: 12px;
        }
        div.navigation {
          /* The navigation style is set by a javascript generated style on the page.
            This is so that the javascript specific styles won't be applied unless javascript is enabled. */
        }
        ul.thumbs {
          clear: both;
          margin: 0;
          padding: 0;
        }
        ul.thumbs li {
          float: left;
          padding: 0;
          margin: 5px 10px 5px 0;
          list-style: none;
        }
        ul.thumbs li a {
          padding: 2px;
          display: block;
          border: 1px solid #ccc;
        }
        ul.thumbs li.selected a {
          background: #88f;
        }
        ul.thumbs a:focus {
          outline: none;
        }
        ul.thumbs img {
          border: none;
          display: block;
        }
        div.pagination {
          clear: both;
        }
        div.navigation div.top {
          margin-bottom: 12px;
          height: 11px;
        }
        div.navigation div.bottom {
          margin-top: 12px;
        }
        div.pagination a, div.pagination strong {
          display: block;
          float: left;
          margin-right: 2px;
          padding: 4px 7px 2px 7px;
          border: 1px solid #ccc;
        }
        div.pagination a:hover {
          background-color: #ffc;
          text-decoration: none;
        }
        div.pagination strong {
          background-color: #acf;
        }
       
       
        /* jQuery specific overlay styles */
       
        #jquery-overlay {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 90;
          width: 100%;
          height: 500px;
        }
        #jquery-lightbox {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 100;
          text-align: center;
          line-height: 0;
        }
        #jquery-lightbox a img { border: none; }
        #lightbox-container-image-box {
          position: relative;
          background-color: #fff;
          width: 250px;
          height: 250px;
          margin: 0 auto;
        }
        #lightbox-container-image { padding: 10px; }
        #lightbox-loading {
          position: absolute;
          top: 40%;
          left: 0%;
          height: 25%;
          width: 100%;
          text-align: center;
          line-height: 0;
        }
        #lightbox-nav {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          z-index: 10;
        }
        #lightbox-container-image-box > #lightbox-nav { left: 0; }
        #lightbox-nav a { outline: none;}
        #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
          width: 49%;
          height: 100%;
          zoom: 1;
          display: block;
        }
        #lightbox-nav-btnPrev {
          left: 0;
          float: left;
        }
        #lightbox-nav-btnNext {
          right: 0;
          float: right;
        }
        #lightbox-container-image-data-box {
          font: 10px Verdana, Helvetica, sans-serif;
          background-color: #fff;
          margin: 0 auto;
          line-height: 1.4em;
          overflow: auto;
          width: 100%;
          padding: 0 10px 0;
        }
        #lightbox-container-image-data {
          padding: 0 10px;
          color: #666;
        }
        #lightbox-container-image-data #lightbox-image-details {
          width: 70%;
          float: left;
          text-align: left;
        } 
        #lightbox-image-details-caption { font-weight: bold; }
        #lightbox-image-details-currentNumber {
          display: block;
          clear: left;
          padding-bottom: 1.0em; 
        }       
        #lightbox-secNav-btnClose {
          width: 66px;
          float: right;
          padding-bottom: 0.7em; 
        }
</style>
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/22625.js "></script>
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/19536.js "></script>
<script type="text/javascript">
   document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
</head>
<body>
<!-- Start Gallery Html Containers -->
<div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div id="slideshow" class="slideshow"></div>
    <div id="details" class="embox">
        <div id="download" class="download"><a id="download-link">Download Original</a></div>
        <div id="image-title" class="image-title"></div>
        <div id="image-desc" class="image-desc"></div>
    </div>
</div>
<div id="navigation" class="navigation">
    <ul class="thumbs noscript">
        <li><a href="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" original="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" title="There's a train a comin'" description="Description"><img src="http://farm1.static.flickr.com/100/253177978_7609879637_s.jpg" alt="There's a train a comin'" /></a></li>
      <li><a href="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" original="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" title="P P P Pick Up A Penguin" description="Description"><img src="http://farm1.static.flickr.com/112/253177973_0710df33a7_s.jpg" alt="P P P Pick Up A Penguin" /></a></li>
      <li><a href="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" original="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" title="Ban The Flag" description="Description"><img src="http://farm1.static.flickr.com/90/253177962_4a0056155e_s_d.jpg" alt="Ban The Flag" /></a></li>
      <li><a href="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" original="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" title="Our Man Charlie" description="Description"><img src="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_s_d.jpg" alt="Our Man Charlie" /></a></li>
        <li><a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" original="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg" title="Title #3" description="Description"><img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" original="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg" title="Title #4" description="Description"><img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" original="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg" title="Title #5" description="Description"><img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" original="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg" title="Title #6" description="Description"><img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" original="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg" title="Title #7" description="Description"><img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" original="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg" title="Title #8" description="Description"><img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" original="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg" title="Title #9" description="Description"><img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" original="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg" title="Title #10" description="Description"><img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" original="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg" title="Title #11" description="Description"><img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" original="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg" title="Title #12" description="Description"><img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" original="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg" title="Title #13" description="Description"><img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" original="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg" title="Title #14" description="Description"><img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" /></a></li>
    </ul>
</div>
<!-- End Gallery Html Containers -->
               
<script type="text/javascript">         
$(document).ready(function() {
   var gallery = $('#gallery').galleriffic('#navigation', {
      delay:                2000,
      numThumbs:            12,
      imageContainerSel:    '#slideshow',
      controlsContainerSel: '#controls',
      titleContainerSel:    '#image-title',
      descContainerSel:    '#image-desc',
      downloadLinkSel:      '#download-link',
      fixedNavigation:     true,
      galleryKeyboardNav:     true,
      autoPlay:           false
   });
   
   gallery.onFadeOut = function() {
      $('#details').fadeOut('fast');
   };
   
   gallery.onFadeIn = function() {
      $('#details').fadeIn('fast');
   };
});
</script>
</body>
</html>
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 16:18

merci pour la reponse aussi rapide

mais cela ne fonctionne pas comme sur l exemple
merci du soutien et du suivi
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Lun 13 Mai 2013 - 16:28

Désolé un oublie Smile

Code:
<html>
<head>

<title>GallerificPlus - your jQuery gallery and lightbox</title>
<!-- Matt Gifford (http://www.mattgifford.co.uk/) -->

<style>
        /* gallerfic styles */
       
        html, body {
          margin:0;
          padding:0;
        }
        body{
          text-align: center;
          font-family: Helvetica, Arial;
          background-color: #ccc;
          font-size: 0.85em;
        }
        div#page {
          width: 900px;
          background-color: #fff;
          margin: 0 auto;
          text-align: left;
        }
        div#container {
          padding: 20px;
        }
        div#ads {
          clear: both;
          padding: 12px 0 12px 66px;
        }
        div#footer {
          text-align: center;
          clear: both;
          padding-top: 12px;
        }
        a{
          color: #666666;
          text-decoration: none;
        }
        a:focus, a:hover, a:active {
          color: #182E7A;
          text-decoration: underline;
        }
        p, li {
          line-height: 1.3em;
        }
        p a, li a {
          text-decoration: underline;
        }
        h1, h2 {
          margin: 0;
        }
        h1 {
          color: #333;
          padding: 0;
        }
        h2 {
          color: #111;
          padding-top: 10px;
        }
        div.content {
          /* The display of content is enabled by a javascript generated style on the page.
            This is so that the slideshow content won't display unless javascript is enabled. */
          display: none;
          float:right;
          width:550px;
        }
        div.controls {
          margin-top: 5px;
          height: 23px;
        }
        div.ss-controls {
          float: left;
        }
        div.ss-controls span {
          color: #666666;
          cursor: pointer;
        }
        div.nav-controls {
          float: right;
        }
        div.nav-controls a {
          padding: 5px;
        }
        div.slideshow {
          clear: both;
        }
        div.slideshow span.image-wrapper {
          float: left;
          padding-bottom: 12px;
        }
        div.slideshow a.advance-link {
          padding: 2px;
          display: block;
          border: 1px solid #ccc;
        }
        div.slideshow img {
          border: none;
          display: block;
        }
        div.download {
          float: right;
        }
        div.embox {
          clear: both;
          border: 1px solid #ccc;
          background-color: #eee;
          padding: 12px;
        }
        div.image-title {
          font-weight: bold;
          font-size: 1.4em;
        }
       
        div.image-desc {
          line-height: 1.3em;
          padding-top: 12px;
        }
        div.navigation {
          /* The navigation style is set by a javascript generated style on the page.
            This is so that the javascript specific styles won't be applied unless javascript is enabled. */
        }
        ul.thumbs {
          clear: both;
          margin: 0;
          padding: 0;
        }
        ul.thumbs li {
          float: left;
          padding: 0;
          margin: 5px 10px 5px 0;
          list-style: none;
        }
        ul.thumbs li a {
          padding: 2px;
          display: block;
          border: 1px solid #ccc;
        }
        ul.thumbs li.selected a {
          background: #88f;
        }
        ul.thumbs a:focus {
          outline: none;
        }
        ul.thumbs img {
          border: none;
          display: block;
        }
        div.pagination {
          clear: both;
        }
        div.navigation div.top {
          margin-bottom: 12px;
          height: 11px;
        }
        div.navigation div.bottom {
          margin-top: 12px;
        }
        div.pagination a, div.pagination strong {
          display: block;
          float: left;
          margin-right: 2px;
          padding: 4px 7px 2px 7px;
          border: 1px solid #ccc;
        }
        div.pagination a:hover {
          background-color: #ffc;
          text-decoration: none;
        }
        div.pagination strong {
          background-color: #acf;
        }
       
       
        /* jQuery specific overlay styles */
       
        #jquery-overlay {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 90;
          width: 100%;
          height: 500px;
        }
        #jquery-lightbox {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 100;
          text-align: center;
          line-height: 0;
        }
        #jquery-lightbox a img { border: none; }
        #lightbox-container-image-box {
          position: relative;
          background-color: #fff;
          width: 250px;
          height: 250px;
          margin: 0 auto;
        }
        #lightbox-container-image { padding: 10px; }
        #lightbox-loading {
          position: absolute;
          top: 40%;
          left: 0%;
          height: 25%;
          width: 100%;
          text-align: center;
          line-height: 0;
        }
        #lightbox-nav {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          z-index: 10;
        }
        #lightbox-container-image-box > #lightbox-nav { left: 0; }
        #lightbox-nav a { outline: none;}
        #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
          width: 49%;
          height: 100%;
          zoom: 1;
          display: block;
        }
        #lightbox-nav-btnPrev {
          left: 0;
          float: left;
        }
        #lightbox-nav-btnNext {
          right: 0;
          float: right;
        }
        #lightbox-container-image-data-box {
          font: 10px Verdana, Helvetica, sans-serif;
          background-color: #fff;
          margin: 0 auto;
          line-height: 1.4em;
          overflow: auto;
          width: 100%;
          padding: 0 10px 0;
        }
        #lightbox-container-image-data {
          padding: 0 10px;
          color: #666;
        }
        #lightbox-container-image-data #lightbox-image-details {
          width: 70%;
          float: left;
          text-align: left;
        } 
        #lightbox-image-details-caption { font-weight: bold; }
        #lightbox-image-details-currentNumber {
          display: block;
          clear: left;
          padding-bottom: 1.0em; 
        }       
        #lightbox-secNav-btnClose {
          width: 66px;
          float: right;
          padding-bottom: 0.7em; 
        }
</style>
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/22625.js "></script>
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/21591.js "></script>
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/19536.js "></script>
<script type="text/javascript">
   document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>");
</script>
</head>
<body>
<!-- Start Gallery Html Containers -->
<div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div id="slideshow" class="slideshow"></div>
    <div id="details" class="embox">
        <div id="download" class="download"><a id="download-link">Download Original</a></div>
        <div id="image-title" class="image-title"></div>
        <div id="image-desc" class="image-desc"></div>
    </div>
</div>
<div id="navigation" class="navigation">
    <ul class="thumbs noscript">
        <li><a href="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" original="http://farm1.static.flickr.com/100/253177978_7609879637_o_d.jpg" title="There's a train a comin'" description="Description"><img src="http://farm1.static.flickr.com/100/253177978_7609879637_s.jpg" alt="There's a train a comin'" /></a></li>
      <li><a href="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" original="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" title="P P P Pick Up A Penguin" description="Description"><img src="http://farm1.static.flickr.com/112/253177973_0710df33a7_s.jpg" alt="P P P Pick Up A Penguin" /></a></li>
      <li><a href="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" original="http://farm1.static.flickr.com/90/253177962_4a0056155e_o_d.jpg" title="Ban The Flag" description="Description"><img src="http://farm1.static.flickr.com/90/253177962_4a0056155e_s_d.jpg" alt="Ban The Flag" /></a></li>
      <li><a href="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" original="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_d.jpg" title="Our Man Charlie" description="Description"><img src="http://farm1.static.flickr.com/103/253177996_4d56eb8a92_s_d.jpg" alt="Our Man Charlie" /></a></li>
        <li><a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" original="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg" title="Title #3" description="Description"><img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" original="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg" title="Title #4" description="Description"><img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" original="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg" title="Title #5" description="Description"><img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" original="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg" title="Title #6" description="Description"><img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" original="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg" title="Title #7" description="Description"><img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" /></a></li>
      <li><a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" original="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg" title="Title #8" description="Description"><img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" original="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg" title="Title #9" description="Description"><img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" original="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg" title="Title #10" description="Description"><img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" original="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg" title="Title #11" description="Description"><img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" original="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg" title="Title #12" description="Description"><img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" original="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg" title="Title #13" description="Description"><img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" /></a></li>
      <li><a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" original="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg" title="Title #14" description="Description"><img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" /></a></li>
    </ul>
</div>
<!-- End Gallery Html Containers -->
               
<script type="text/javascript">         
$(document).ready(function() {
   var gallery = $('#gallery').galleriffic('#navigation', {
      delay:                2000,
      numThumbs:            12,
      imageContainerSel:    '#slideshow',
      controlsContainerSel: '#controls',
      titleContainerSel:    '#image-title',
      descContainerSel:    '#image-desc',
      downloadLinkSel:      '#download-link',
      fixedNavigation:     true,
      galleryKeyboardNav:     true,
      autoPlay:           false
   });
   
   gallery.onFadeOut = function() {
      $('#details').fadeOut('fast');
   };
   
   gallery.onFadeIn = function() {
      $('#details').fadeIn('fast');
   };
});
</script>
</body>
</html>
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 16:34

t es vraiment un pro cela fonctionne a merveille , un mega immense merci
juste encore un truc me manque c est quand le lightbox s ouvre je n ai aps les flèches next et prev et la case close est remplace par un truc comme quoi il manque une image
c est vrai que dans le zip que j ai télécharge
il y a un dossier image avec les images dedans
mais comment les intégrer

merci pour le suivi et e soutien , je vais enfin bientôt pouvoir faire mes gallerie
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Lun 13 Mai 2013 - 16:47

Pas regarder ça, mets les sur servimg de ton forum et donne moi les liens, je regarderai quand j'ai un moment où cela se met.
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 16:50

merci j ai trouve , cela se situe dans le plugin de javascript je vais aller modifier les liens dans le plugin
quand tu auras un moment
je désire encore deux petites modifications stp
je vais encore t embeter un peu en demandant si cela est possible que le titre et la discription en dessous de l image agrandie reste visible plutot que de rester visible a peine a peine 1 seconde,
cela se produit des que l on ouvre une miniature

dans le meme temps est il possible de dupliquer le bloc qui apparait sous le lightbox avec la description et le bouton close et le placer au dessus de l iamge aussi

merci pour tout , je vais pouvoir enfin passer une bonne nuit
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Lun 13 Mai 2013 - 17:28

Ca doit se régler je pense dans le script donc ... pas pour moi.
Suivre un tuto ça va mais pas plus lol
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 17:48

ok un tres grand merci je vais poster un autre message alors ....

alors pour les boutons next prev et close je pensais les avoir trouve mais ce ne sont pas les bons
je t envois donc les codes pour quand tu auras le temps stp

le code html

Code:

<IFRAME SRC=" http://la-peche-a-la-perle.forumgratuit.be/h4-pluginplus" width=1000 height=1000 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

les codes de javascript
Code:

<IFRAME SRC="http://la-peche-a-la-perle.forumgratuit.be/19805.js" width=1000 height=1000 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>
Code:

<IFRAME SRC="http://la-peche-a-la-perle.forumgratuit.be/22625.js" width=1000 height=1000 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>
Code:

<IFRAME SRC="   http://la-peche-a-la-perle.forumgratuit.be/21591.js" width=1000 height=1000 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>



en même temps si tu savais regarder pour la dimension des images je suis embete pour les miniatures sur la gauche je ne sais pas les faire prendre des dimensions comme pour l autre galerie
je voudrais juste avoir une seule image de taille max qui serait réduite pour la miniature


d avance un tout grand merci








Dernière édition par flexi2202 le Lun 13 Mai 2013 - 18:19, édité 1 fois
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Lun 13 Mai 2013 - 18:15

Dans le js 19805 tu cherches (Ctrl F) ceci :

images/lightbox-blank.gif
images/lightbox-btn-close.gif
images/lightbox-btn-next.gif
images/lightbox-btn-prev.gif
images/lightbox-ico-loading.gif

A la place tu mets tes liens dans ce style là https://i.servimg.com...etc .gif ou autre

Pour les tailles n'y touche pas trop
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Lun 13 Mai 2013 - 18:35

ah ok un énorme merci , non les icônes j y touche pas pour les tailles

c est pour mes photos que je cherche une solution de facon a n avoir qu une seule photo pour les 3 formats

ne pourrais t on pas modifier le lien en mettant les dimensions dedans
quit a le répéter pour chaque image

Code:


<a href="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg"original="http://farm1.static.flickr.com/112/253177973_0710df33a7_d.jpg" title="There's a train a comin'" description="Description">

encore merci pour les icônes je regarde cela en soiree
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Mar 14 Mai 2013 - 7:44

bonjour
voila tout est regler ainsi que les dimensions et les boutons de navigation
le bonheur commence mdrrrr

un méga énorme merci , dommage que l on peux pas cliquer plusieurs fois sur merci

juste encore quelques petits détails a régler
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Mar 14 Mai 2013 - 7:50

Content pour toi, si tu peux me montrer ça, au cas où un jour ... Smile

Fais attention de ne pas mettre d'image trop grande et n'augmente pas trop la taille de l'iframe, sinon les petites connexions auront de gros problèmes.
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Mar 14 Mai 2013 - 8:25

bonjour
enfin c est pas encore vraiment fini , je suis en train de chercher des solutions pour la lihgtbox a présent
pour mieux la centrer ect
mais bon tu m as dit que cela n était plus trop ton domaine
tu veux quoi les codes que j ai changer ?
car j ai fait pas mal de manipulation
changer le nombre d image par colonne
j ai ai enlever une
j ai réaménager les espaces
j ai mis des photos plus grandes
concernant les connexions je pense que c est rare les gens qui ont encore des petites
le 56 ko c est fini mdrrrr

en tous cas sans toi je serais encore avec les rames en mains mdrrr
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par AenigmA Mar 14 Mai 2013 - 9:43

Hello,
Tu me feras voir l'iframe à la fin

Pour les connexions, il y a des 512 encore (même à Paris), mais je veux surtout souligner les tailles des écrans car tout le monde n'a pas un 22 pouces encore. Tu es déjà à plus de 1200 px pour lire un message.
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment integrer un code css a ma feuille css

Message par flexi2202 Mar 14 Mai 2013 - 9:48

ok je te ferais voir cela une fois tout termine
oui d accord mais je me fie sur mon vieux portable avec un petit écran

pour les images au début j avais mis les grandes direct
mais ouftiii fallait trop longtemps pour les charger

ensuite j ai regarder avec un survol de la souris que l image puisse s agrandir
pas mal mais cela me plaisait pas trop

et c est pour finir que je suis tombe sur les galeries , a présent j attend l aide des spécialistes mdrrrr
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum