Bouton ouvrir/fermer les widgets

[stevex8]

Salut a tous,
je me tourne vers vous car je me creuse la tête depuis quelques jours...
J'ai un bouton, en bas a gauche de l’écran, pour ouvrir la chatbox. J'ai fait la même chose pour pouvoir ouvrir et fermer les widgets. Le problème c'est que je n'arrive pas a aligner le bouton ''widget'' avec celui de la chatbox.  
Voici mon css

Code:

       /* ******************************CACHE WIDGET ******* */
        
               .widget-arrow {
                height: 100px;
                width: 30px;
                border-radius: 00px;
                float: left;
                cursor: pointer;
                background: #f5ebf7 url(http://i56.servimg.com/u/f56/12/42/13/77/widget12.png) no-repeat 0 0;
                }
                .widget-arrow.isright {
                float: right;
                }
                .widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
                background-position: 0px 0px;
                }
        
            #widget-arrows {
                height: 0px;
          position: fixed;
          bottom: 260px;
        }

et le script

Code:

$(function() {
                  var c = $("#left,#right"), d, e = function(a) {
                    var a = a.direct ? 0 : 1E3, b = $(this).data("side");
                    window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");
                    $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);
                    $(this).toggleClass("isopened isclosed")
                  };
                  c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"><div style="clear:both"></div></div>')), c.each(function() {
                    $(this).find("script").remove();
                    var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
                    "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);
                    b.data("side", a).appendTo(d).click(e);
                    window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})
                  }))
                });

J'aimerais vraiment pouvoir mettre ce bouton tout a gauche de l’écran, comme l'autre.
J’espère que quelqu'un sera m'aider.
Merci d'avance.
Bonne soirée

[Wave]

Bonjour,

Il faudrait ajouter à votre CSS, à .widget-arrow

Code:

margin: -4px!important;

Cdlt,

[stevex8]

Merci pour votre reponse mais malheureusement ca ne fonctionne pas... j'insert peut-être mal la ligne. Pouvez vous me dire a quel endroit exacte je dois placer cette ligne ?
Merci

[Wave]

Dans ce cas remplacez:

Code:

.widget-arrow {
                height: 100px;
                width: 30px;
                border-radius: 00px;
                float: left;
                cursor: pointer;
                background: #f5ebf7 url(http://i56.servimg.com/u/f56/12/42/13/77/widget12.png) no-repeat 0 0;
                }

par

Code:

.widget-arrow {
                height: 100px;
                width: 30px;
                border-radius: 00px;
                float: left;
                cursor: pointer;
                background: #f5ebf7 url(http://i56.servimg.com/u/f56/12/42/13/77/widget12.png) no-repeat 0 0;
                margin: -4px!important;
                }

[stevex8]

Rien y fait, ca fonctionne toujours pas..
Merci de votre aide

[Wave]

Je vois pourtant bien vos images alignées ?

[stevex8]

Faites une zoom arrière, vous aller comprendre.

[Wave]

Le problème vient peut être de votre javascript, remplacez ce que j'ai encadré par body

[stevex8]

Parfait ! C'est résolu  
Un grand merci a toi Wave

[stevex8]

Encore une question  
J'ai un contour blanc autour du bouton ''censurébox'', comment l'enlever ?
Je n'ai qui code HTML pour ca :

Code:

jQuery(document).ready(function () {
            jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://img823.imageshack.us/img823/4472/csj1.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://img823.imageshack.us/img823/4472/csj1.png\')?\'block\':\'none\';this.src=(this.src==\'http://img823.imageshack.us/img823/4472/csj1.png\')?\'http://img89.imageshack.us/img89/1505/whr6.png\':\'http://img823.imageshack.us/img823/4472/csj1.png\';"/></td></tr></table>');
        });

[Wave]

Remplacez le par :

Code:

jQuery(document).ready(function () {
            jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://img823.imageshack.us/img823/4472/csj1.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://img823.imageshack.us/img823/4472/csj1.png\')?\'block\':\'none\';this.src=(this.src==\'http://img823.imageshack.us/img823/4472/csj1.png\')?\'http://img89.imageshack.us/img89/1505/whr6.png\':\'http://img823.imageshack.us/img823/4472/csj1.png\';"/></td></tr></table>');
        });

[stevex8]

Cette fois c'est vraiment bon.
Merci mille fois Wave