kostenloser Webspace werbefrei: lima-city


Share Buttons in Reihe

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    Hallo Zusammen,

    Ich versuche derzeit verzweifelt 2 Share Buttons (Facebook & Twitter), auf gleicher Höhe in der selben Reihe zu bekommen. Jedoch möchte einer der beiden Buttons sich nie dort platzieren, wo er es soll.

    Hier mal ein Screenshot, wie es aussieht und der dazugehörige Code.
    http://fs5.directupload.net/images/160117/kwnt2xu2.png

    ol.share-buttons{
    		list-style: none;
    	}
    	
    	ol.share-buttons li{
    		display: inline-block;
    		margin:0;
    		padding:0;
    	}


    <section>
    											<div class="row">
    												<ol class="share-buttons">
    													<li class="fb-share-button" data-href="http://marvinkleinmusic.de/sownloader-web" data-layout="button_count"></li>
    													<li><a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://marvinkleinmusic.de/sownloader-web" data-via="MagicPianoApp" data-hashtags="Sownloader">Tweet</a></li>
    												</ol>
    										</section>


    Was mache ich falsch?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. s*******e

    Mach aus
    <li class="fb-share-button" data-href="http://marvinkleinmusic.de/sownloader-web" data-layout="button_count"></li>
                                                        <li><a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://marvinkleinmusic.de/sownloader-web" data-via="MagicPianoApp" data-hashtags="Sownloader">Tweet</a></li>
                                                    <


    das

    <li class="fb-share-button twitter-share-button" data-href="http://marvinkleinmusic.de/sownloader-web" data-layout="button_count">
                                                       <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://marvinkleinmusic.de/sownloader-web" data-via="MagicPianoApp" data-hashtags="Sownloader">Tweet</a></li>
                                                    <
  4. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    Funktioniert nicht ;)
  5. stadtgame schrieb:
    <li class="fb-share-button twitter-share-button" data-href="http://marvinkleinmusic.de/sownloader-web" data-layout="button_count">
                                                       <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://marvinkleinmusic.de/sownloader-web" data-via="MagicPianoApp" data-hashtags="Sownloader">Tweet</a></li>
                                                    <

    Das nützt natürlich gar nichts, da dann das Listen-Design komplett gespart werden könnte.

    Ich konnte aber dein Problem nicht nachbasteln (hatte Facebook nicht angezeigt und Twitter nur als Text). Könntest du irgendwo eine Seite verlinken (muss nicht die originale sein), sodass ich dort testen kann?

    Damit ich aber schonmal etwas (vielleicht) nützliches liefere:
    <style>
        li{
            display:inline;
            margin:5px;
            background-color:red;
            height:50px;
        }
        </style>              
            <ul>
                <li>Element 1 <br>Test
                </li>
                <li>Element 2
                </li>
                <li>Element 3
                </li>
            </ul>

    Das Problem könnten unterschiedlich hohe Buttons sein. Simuliert habe ich es hier durch einen Zeilenumbruch.
    Ohne eine festgelegte Höhe sehen diese verschoben aus.


    Beitrag zuletzt geändert: 17.1.2016 20:51:01 von test42test
  6. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    Die original Seite findest du hier: http://marvinkleinmusic.de/sownloader-web

    Ich schaue mal nach ob ich das mit weiteren margins lösen kann.

    LG
  7. <ol class="share-buttons">
    													<li style=""><div fb-iframe-plugin-query="app_id=&amp;container_width=275&amp;href=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&amp;layout=button_count&amp;locale=de_DE&amp;sdk=joey" fb-xfbml-state="rendered" class="fb-share-button fb_iframe_widget" data-href="http://marvinkleinmusic.de/sownloader-web" data-layout="button_count"><span style="vertical-align: center; width: 89px; height: 20px;"><iframe class="" src="http://www.facebook.com/v2.5/plugins/share_button.php?app_id=&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df1cf3fa98e359c%26domain%3Dmarvinkleinmusic.de%26origin%3Dhttp%253A%252F%252Fmarvinkleinmusic.de%252Ff34e46a63da70f%26relation%3Dparent.parent&amp;container_width=275&amp;href=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&amp;layout=button_count&amp;locale=de_DE&amp;sdk=joey" style="border: medium none; visibility: visible; width: 89px; height: 20px;" title="fb:share_button Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f1caad60a7c1d" frameborder="0" height="1000px" width="1000px"></iframe></span></div></li>
    													<li><iframe data-url="http://marvinkleinmusic.de/sownloader-web" src="http://platform.twitter.com/widgets/tweet_button.24a8e21c9032b45e8d193d263743d845.en.html#dnt=false&amp;hashtags=Sownloader&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&amp;size=m&amp;text=MarvinKleinMusic%20-%20Sownloader%20Web&amp;time=1453065848771&amp;type=share&amp;url=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&amp;via=MagicPianoApp" title="Twitter Tweet Button" style="position: static; visibility: visible; width: 61px; height: 20px;" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" allowtransparency="true" scrolling="no" id="twitter-widget-0" frameborder="0"></iframe></li>
    												</ol>

    So passt es bei mir.
    ich habe nur bei dem span das vertical-align zu center gesetzt.
    <span style="vertical-align: center; width: 89px; height: 20px;">


    PS: Die Buttons lassen sich ohne JS nicht blicken.

    Beitrag zuletzt geändert: 17.1.2016 22:30:46 von test42test
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!