Share Buttons in Reihe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bekommen
blicken
blocken
button
code
design
display
element
http
list
listen
plazieren
problem
share
span
testen
unterschiedlich hohe buttons
url
versuchen
weben
-
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? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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> < -
Funktioniert nicht ;)
-
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 -
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 -
<ol class="share-buttons"> <li style=""><div fb-iframe-plugin-query="app_id=&container_width=275&href=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&layout=button_count&locale=de_DE&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=&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&container_width=275&href=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&layout=button_count&locale=de_DE&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&hashtags=Sownloader&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&size=m&text=MarvinKleinMusic%20-%20Sownloader%20Web&time=1453065848771&type=share&url=http%3A%2F%2Fmarvinkleinmusic.de%2Fsownloader-web&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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
