Barre de Défilement

Page 2 sur 2 Précédent  1, 2

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

Résolu Barre de Défilement

Message par *angiesworld* le Sam 31 Déc 2011 - 18:48

Rappel du premier message :

Bonjour à vous les Ptits Loups,
Avant tout je tiens à vous souhaiter de Bonnes Fêtes de Fin D’année..
En espérant que vos souliers ont été rempli comme il se le devait. Noel

Alors voilà si je vous écrit en cette fraîche nuit c’est parce que j’aurais aimée personnaliser la Barre de Défilement qu’il y a sur ma P.A, en remplacer celle-ci par de simple image de flèche, en haut et en bas,
Un peu comme cette exemple ci :


Croyez vous donc pouvoir m’aider?!
Dans tous les cas, Merci à ceux qui auront essayer!^_^

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Jeu 26 Jan 2012 - 19:26

xD.. Comme vous le sentez..
Mais quoiqu'il en soit, de mon côté, je laisse tomber! Donc cela ne servira à rien je vous préviens..
Ma foi.. Merci pour tout ça!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Jeu 26 Jan 2012 - 19:29

Peut importe il faut que j'essaye ! bounce

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Jeu 26 Jan 2012 - 19:35

Je te répond ici plutôt que par M.P.. Ptit souci de Free.
Alors déjà il n’y a pas de html de l’image.. Seulement le codage de la Page d’Accueil ainsi que celui du CSS.
Code Supprimé
C'est tout simple. Razz


Dernière édition par *angiesworld* le Jeu 26 Jan 2012 - 20:22, édité 1 fois

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Jeu 26 Jan 2012 - 20:17

Screen bonus:
Spoiler:

Changement d'images = Zone de scrollbar = Transparent (plus facile pour faire passer le texte dessous)^^
Ajout d'un z-index pour la scrollbar.
Ajout d'un position:absolute.
Conseil: Faire une bulle sans rotation (pour voir correctement le texte)
Compatibilité IE: Presque ça ! (Position légerement plus basse avec IE)

Peut-être que la position sur votre fofo ne seras pas la même.
Changer les valeurs des "top/left":
#Scrollbar-Container {
top: -18px; left: 795px;
}
.Container {
position: absolute;
top: 890px; left: 1070px;
}


Code:
              <div style="position:relative;height:500px;width:850px;">
          <div style="position:absolute;z-index:1">
       
        <img src="http://img69.xooimage.com/files/4/d/d/1112290315291192549231418-30f56bd.png" alt="nat.gif" usemap="#nat.gif" />
       
        <map name="nat.gif">
            <area shape="rect" coords="230,45,280,76" href="lienrules" target="" alt="" />
            <area shape="rect" coords="294,45,380,76" href="lienmanagement" target="" alt="" />
            <area shape="rect" coords="392,45,508,75" href="lienssepcialoperations" target="" alt="" />
            <area shape="rect" coords="548,44,625,75" href="lienpartnership" target="" alt="" />
            <area shape="rect" coords="648,43,701,74" href="liencontact" target="" alt="" />
            <area shape="rect" coords="676,385,843,409" href="lienconsulterlesite" target="" alt="" />
            <area shape="rect" coords="747,413,838,435" href="lienofficiel?" target="" alt="" />
       
        </map>
          </div>
        </DIV>
<style type="text/css">
     
              .Container {
          position: absolute;
          top: 890px; left: 1070px;
          width: 300px;
          height: 305px;
          padding-top:75px;
          background: #FFF url(http://www.n-son.com/scripts/jsScrolling/images/container_background.gif) no-repeat;
        }
        #Scroller-1 {
          position: absolute;
          overflow: hidden;
          width: 250px;;
          height: 300px;margin-left:15px;
        }
        #Scroller-1 p {
          margin: 0; padding: 10px 20px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 11px;
          text-indent: 20px;
          color: #6F6048;
        }
        .Scroller-Container {
          position: absolute;
          top: 0px; left: 0px;
        }
        #Scrollbar-Container {
          position: absolute;
          top: 950px; left: 1300px;z-index:2;
        }
        .Scrollbar-Up {
          cursor: pointer;
          position: absolute;
        }
        .Scrollbar-Track {
          width: 20px; height: 161px;
          position: absolute;
          top: 36px; left: 4px;
          background: transparent url(http://www.n-son.com/scripts/jsScrolling/images/scrollbar_track.gif) no-repeat center center;
        }
        .Scrollbar-Handle {
          position: absolute;
          width: 20px; height: 22px;
        }
        .Scrollbar-Down {
          cursor: pointer;
          position: absolute;
          top: 187px;
        }
</style>
        <script language="JavaScript" type="text/javascript" src="http://guilde-exode.bbactif.com/24292.js"></script>
        <script language="JavaScript" type="text/javascript" src="http://guilde-exode.bbactif.com/23276.js"></script>
        <script language="JavaScript" type="text/javascript" src="http://guilde-exode.bbactif.com/22255.js"></script>
       
        <body>
        <div id="Scrollbar-Container">
            <img src="http://www.n-son.com/scripts/jsScrolling/images/up_arrow.gif" class="Scrollbar-Up" />
            <img src="http://www.n-son.com/scripts/jsScrolling/images/down_arrow.gif" class="Scrollbar-Down" />
            <div class="Scrollbar-Track">
              <img src="http://www.n-son.com/scripts/jsScrolling/images/scrollbar_handle.gif" class="Scrollbar-Handle" />
            </div>
          </div>
       
        <div class="Container">
          <div id="Scroller-1">
          <div class="Scroller-Container">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
              <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
              <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
              <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
              <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
       
            </div>
          </div>
        </div>
        </body></div>
                </div></div></ul></div>

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Jeu 26 Jan 2012 - 20:27

Et bien avant tout.. Merci à vous! Embarassed
Je prend en note ce que vous avez prit la peine de faire et dire..
Néanmoins, comme je vous l’ai précédemment précisé, cela n’aura servi à rien puisque j’ai laissée tomber, suite à quelques petites choses qui ont fait que cela été plus pratique avec la version actuelle, sans personnalisation.
Pour le conseil de la bulle sans rotation, c’est plus aisé il est vrai, mais avec mon encadré à moi cela ne pose aucun souci donc je peux me laisser aller à quelques « extravagance » si je puis dire. xD
En tout cas.. Merci pour tout ça!

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par Censure le Jeu 26 Jan 2012 - 20:35

Pas de souçi, juste pour le fun une version2 ! XD
(Oui je ne sais pas quoi faire ! Very Happy)
Zone de texte réduite
+ de place pour la scrollbar
Zone de texte plus claire
Spoiler:

Code:
        <div style="position:relative;height:500px;width:850px;">
          <div style="position:absolute;z-index:1">
       
        <img src="http://img69.xooimage.com/files/4/d/d/1112290315291192549231418-30f56bd.png" alt="nat.gif" usemap="#nat.gif" />
       
        <map name="nat.gif">
            <area shape="rect" coords="230,45,280,76" href="lienrules" target="" alt="" />
            <area shape="rect" coords="294,45,380,76" href="lienmanagement" target="" alt="" />
            <area shape="rect" coords="392,45,508,75" href="lienssepcialoperations" target="" alt="" />
            <area shape="rect" coords="548,44,625,75" href="lienpartnership" target="" alt="" />
            <area shape="rect" coords="648,43,701,74" href="liencontact" target="" alt="" />
            <area shape="rect" coords="676,385,843,409" href="lienconsulterlesite" target="" alt="" />
            <area shape="rect" coords="747,413,838,435" href="lienofficiel?" target="" alt="" />
       
        </map>
          </div>
        </DIV>
<style type="text/css">
     
              .Container {
          position: absolute;
          top: 890px; left: 1060px;
          width: 250px;
          height: 305px;
          padding-top:75px;padding-right:60px;
          background: #FFF url(http://www.n-son.com/scripts/jsScrolling/images/container_background.gif) no-repeat;
        }
        #Scroller-1 {
          position: absolute;
          overflow: hidden;
          width: 150px;
          height: 300px;margin-left:85px;
        }
        #Scroller-1 p {
          margin: 0; padding: 10px 20px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 11px;
          text-indent: 20px;
          color: #6F6048;
        padding-left:20px;
        }
        .Scroller-Container {
          position: absolute;
          top: 0px; left: 0px;
        }
        #Scrollbar-Container {
          position: absolute;
          top: 950px; left: 1300px;z-index:2;
        }
        .Scrollbar-Up {
          cursor: pointer;
          position: absolute;
        }
        .Scrollbar-Track {
          width: 20px; height: 161px;
          position: absolute;
          top: 36px; left: 4px;
          background: transparent url(http://www.n-son.com/scripts/jsScrolling/images/scrollbar_track.gif) no-repeat center center;
        }
        .Scrollbar-Handle {
          position: absolute;
          width: 20px; height: 22px;
        }
        .Scrollbar-Down {
          cursor: pointer;
          position: absolute;
          top: 187px;
        }
</style>
        <script language="JavaScript" type="text/javascript" src="http://guilde-exode.bbactif.com/24292.js"></script>
        <script language="JavaScript" type="text/javascript" src="http://guilde-exode.bbactif.com/23276.js"></script>
        <script language="JavaScript" type="text/javascript" src="http://guilde-exode.bbactif.com/22255.js"></script>
       
        <body>
        <div id="Scrollbar-Container">
            <img src="http://www.n-son.com/scripts/jsScrolling/images/up_arrow.gif" class="Scrollbar-Up" />
            <img src="http://www.n-son.com/scripts/jsScrolling/images/down_arrow.gif" class="Scrollbar-Down" />
            <div class="Scrollbar-Track">
              <img src="http://www.n-son.com/scripts/jsScrolling/images/scrollbar_handle.gif" class="Scrollbar-Handle" />
            </div>
          </div>
       
        <div class="Container">
          <div id="Scroller-1">
          <div class="Scroller-Container">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
              <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
              <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
              <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
              <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
       
            </div>
          </div>
        </div>
        </body></div>
                </div></div></ul></div>

Censure
****

Masculin
Messages : 218
Inscrit(e) le : 21/12/2010

http://guilde-exode.bbactif.com/
Censure a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Défilement

Message par *angiesworld* le Jeu 26 Jan 2012 - 20:44

Tu t’auto impose un travail..?! Le Monde est Fou, Fou, Fou.. Voyez vous! lool
Merci encore Rififi Very Happy

*angiesworld*
*****

Féminin
Messages : 758
Inscrit(e) le : 16/11/2009

http://becrazy.forumactif.org/
*angiesworld* a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

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


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