Kjapp og trygg hosting for Wordpress

Trenger CSS hjelp.

J

Jens1986

Medlem
Hei.

Trenger hjelp med noe her. Jeg er elendig på dette selv.

Har en "Del på Facebook"-knapp som nå tar 100% av bredden i wordpress, som jeg setter inn i poster. Denne fungerer bra, men jeg vil ha en liten endring. Jeg vil ha plass til en "Liker-knapp" også.

Her er et bilde av hvordan jeg ønsker det:
Bildr.no

Her er koden jeg bruker i dag:
Kode: 
<div style="border:0px !important;">
<script type="text/javascript">// <![CDATA[
function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
// ]]&gt;</script><a class="button facebook" title="Klikk her for å dele dette på Facebook" onclick="return fbs_click()" href="http://www.facebook.com/share.php?u=<url>" target="_blank"><img src="/bilder/f-ico.png" style="vertical-align: text-top;">&nbsp; Del på Facebook</a>
</div>

Likerknappen har denne koden:
Kode: 
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Noen som kan hjelpe :)
 
J

Jens1986

Medlem
Ole Petter Holthe Berg skrev:
Hvis du setter "like" <div>-en rett under facebook-share-diven, og legger inn en style="float: left;" på <div>en til likerknappen, burde det løse saken :)
Klikk for å utvide...

Når jeg gjør dette, så blir teksten som kommer under rar. Den kommer opp til facebook knappen, mellom den og liker-knappen.

Jeg glemte å ta med dette i første innlegg; koden jeg har i style.css;
Kode: 
.button {
    width:100%;
    display:block;
    padding:10px;
    float:center;
    font-family:Lucida Grande, Tahoma !important;
    font-size:22px;
    text-align:center;
    text-decoration:none !important;
    color:#FFF !important;
    }
  
.facebook    { background:#3b5998; }  
.facebook:hover    { background:#5574cb; }
 
adeneo

adeneo

Medlem
FYI så finnes det ikke noe float:center, det er left, right, none og inherit som er gyldige verdier.
 
adeneo

adeneo

Medlem
PHP: 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/nb_NO/sdk.js#xfbml=1&appId=***********&version=v2.0"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>  

<div style="border:0px !important; display: inline-block;">
<script type="text/javascript">// <![CDATA[
function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
// ]]&gt;</script>

<a class="button facebook" title="Klikk her for å dele dette på Facebook" onclick="return fbs_click()" href="http://www.facebook.com/share.php?u=<url>" target="_blank"><img src="/bilder/f-ico.png" style="vertical-align: text-top;">&nbsp; Del på Facebook</a>
</div>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
 
Sist redigert:
kek91

kek91

Webutvikler
Jens1986 skrev:
Når jeg gjør dette, så blir teksten som kommer under rar. Den kommer opp til facebook knappen, mellom den og liker-knappen.
Klikk for å utvide...
Legg til følgende kode mellom knappene og teksten under:
Kode: 
<div style="clear:both;"></div>
Det er bare for å "avslutte" floatingen fra knappene over, ellers vil det som kommer etterpå muligens oppføre seg merkelig :)

Edit: Før noen sier at inline styling ikke er anbefalt, kan du heller gjøre det slik:
- Lag følgende klasse i CSS:
Kode: 
.clearboth { clear:both; }
- HTML:
Kode: 
<div class="clearboth"></div>
 
adeneo

adeneo

Medlem
Det er flere muligheter, men du må altså sette bredden på den store knappen til 100% minus bredden på den lille knappen.

Det enkleste er å bruke calc(), men det er CSS3 og virker ikke overalt.
Så kan du bruke wrappers, altså flere elementer inne i hverandre, og trikse og ordne litt så de fyller helt.

Det greieste, som virker overalt, er egentlig bare å bruke et table element, og sette hver knapp i en celle.

Jeg ville forandret litt, og som kek91 nevner, tatt bort inline javascript og css osv, og gjort det slik

PHP: 
<table class="wrapper">
    <tr>
        <td>
            <a class="button facebook" title="Klikk her for å dele dette på Facebook" href="http://www.facebook.com/share.php?u=<url>" target="_blank">
                <img src="/bilder/f-ico.png" />
                &nbsp; Del på Facebook
            </a> 
        </td>
        <td>
            <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
        </td>
    </tr>
</table>
<div id="fb-root"></div>
<script type="text/javascript">
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/nb_NO/sdk.js#xfbml=1&appId=***********&version=v2.0";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    document.querySelector('.button.facebook').addEventListener('click', function(e) {
        e.preventDefault();
        var u = location.href,
            t = document.title;
        window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=436');
    }, false);
</script>

merk at javascript nå må komme etter elementene for at de skal være tilgjengelige (eller du må bruke en eller annen for "DOM ready").

Når du styler det, så ville jeg gjort noe sånt

PHP: 
.wrapper {
    width : 100%;
}
.button.facebook {
    position        : relative;
    width           : 100%;
    display         : block;
    padding         : 10px 0;
    font-family     : Lucida Grande, Tahoma !important;
    font-size       : 22px;
    text-align      : center;
    text-decoration : none;
    color           : #fff;
    background      : #3b5998;
}
.button.facebook img {
    vertical-align : text-top;
}
.button.facebook:hover {
    background : #5574cb;
}
.fb-like {
    width    : 40px;
    position : relative;
}

Det er litt vanskelig å skrive om når man ikke har noe å teste med, så du får nesten bare prøve deg litt frem.
 
Du må logge inn eller registrere deg for å svare her.
Topp