Dúvidas em relação a barra de share

Qual é minha questão:
Ola...

Introduzi os códigos JS e CSS de barra de share, e gostaria de pequenas mudanças, levar os botões um pouco mais para a direita e também subir um pouco a barra preta que separa a imagem dos botões, como fazer?

JS:

Código:


jQuery(document).ready(function(){var url=document.URL;jQuery("#page-header").append('<div class="h3"><hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body='+url+'">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif '+url+'" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u='+url+'">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url='+url+'">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url='+url+'">Digg</a></li> </ul></td><td width="180" align="right" valign=center><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>')});

CSS:

Código:

/***Barra de compartilhamento***/

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:10;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
/***Barra de compartilhamento***/

Links e imagens do meu problema:


Endereço do meu fórum:
http://aquapeixes.forumeiros.com/forum.htm

Versão do meu fórum:
PHPBB3

Olá!

Troque o CSS pelo abaixo:

Código:

/***Barra de compartilhamento***/

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:10;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:50px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
/***Barra de compartilhamento***/

Abraços.

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'

Ola...

Não resultou, espaçou a barra preta dos botões, eu quero aproximar a barra preta da imagem de cima, juntamente com os botões elevar os botões mais para a direita...

Olá,

Troque o JS por este :

Código:

jQuery(document).ready(function(){var url=document.URL;jQuery("#page-header").append('<div class="barra_cima_share"></div><table cellspacing="0" cellpadding="0" width="100%"><tbody><tr><td align="center" valign="center" style="margin-left: 10px; position: relative;" class="botoes_share"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&amp;body=http://aquapeixes.forumeiros.com/forum">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif http://aquapeixes.forumeiros.com/forum" onclick="javascript:pageTracker._trackPageview ('/outbound/twitter.com');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u=http://aquapeixes.forumeiros.com/forum">Facebook</a>
<style>a.sh-face:hover {
margin-top: -0px;
}</style></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url=http://aquapeixes.forumeiros.com/forum">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&amp;url=http://aquapeixes.forumeiros.com/forum">Digg</a></li> </ul></td><td width="180" align="right" valign="center"><fb:like href="http://aquapeixes.forumeiros.com/forum" layout="button_count" width="45" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"><span style="height: 20px; width: 81px; "><iframe id="f833b3164" name="f3bed11ec4" scrolling="no" style="border: none; overflow: hidden; height: 20px; width: 81px; " title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=227866050665856&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D11%23cb%3Df2b9d41e78%26origin%3Dhttp%253A%252F%252Faquapeixes.forumeiros.com%252Ff1571891b4%26domain%3Daquapeixes.forumeiros.com%26relation%3Dparent.parent&amp;colorscheme=light&amp;extended_social_context=false&amp;href=http%3A%2F%2Faquapeixes.forumeiros.com%2Fforum&amp;layout=button_count&amp;locale=pt_PT&amp;node_type=link&amp;sdk=joey&amp;show_faces=false&amp;width=90"></iframe></span></fb:like></td></tr></tbody></table><br><style>/***Barra de compartilhamento 2***/

.barra_cima_share {
color: #000;
border:1px solid #FFF;
height: 0.1px;
}
.sharing-cl {
overflow: hidden;
margin: -15px 0 0 150px;
padding: 0;
list-style: none;
width: 530px;
}
.sharing-cl a {
overflow: hidden;
width: 75px;
height: 20px;
float: left;
margin-right: 5px;
text-indent: -200px;
background: url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}

/***Barra de compartilhamento 2***/</style>')});

E o CSS deixe o mesmo ...

Cordialmente ...

Ola...

O CSS e o JS estão juntos, dai retirei o CSS e adicionei o JS, mas sumiu a barra.

Olá,

Tentou deixar o CSS junto ?

Cordialmente ...

Pensei que não podia, mas acabei de colocar e sumiu com tudo, barra, logo, anuncios...

Alguém, por favor?

Olá,

Troque por este:

Código:

/***Barra de compartilhamento***/

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:600´x;
}
.sharing-cl a{
overflow:hidden;
width:105px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:10;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
/***Barra de compartilhamento***/

Abraços.

Resultou obrigado!


Podem fechar!