facebook / Google+ Button

[folio]

Hi,

wollte mal kurz eine weitere Folge von CSS für blutige Anfänger einleiten ...

Ich dachte mir, ich geh mal mit der Zeit und baue bei mir auf http://www.schnaeppchenfuchs.com den Google + Button ein. Hab ich gemacht und das sieht jetzt so aus:

http://img714.imageshack.us/img714/6838/googleol.png

Leider sind die beiden Buttons etwas versetzt.

Das hier ist der Code:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show-faces=true&width=400&action=recommend&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none;width:400px;height:26px;overflow:hidden;padding-top:4px;"></iframe><g:plusone size="medium" href="<?php echo get_permalink($post->ID); ?>"></g:plusone>

Kann mir jemand helfen, wie ich das in eine Reihe krieg? Ich würde mich sehr freuen!

 

[CPoly]

Wenn du den vertikalen Versatz meinst:

Ich habe hier http://www.getsportphotos.com/ auf der Startseite drei Buttons (Twitter, Google und Facebook) und die sind alle jeweils in einem DIV mit display:inline-block und vertical-align:middle

 

[Jan-Frederik Stieler]

Hi,
es gibt da eigentlich keinen Versatz. Das was du meinst ist eine visuelle Sache.
Die Buttons werden alle unten, inkl. des Textes nach dem Button von facebook , ausgerichtet und da der Googlebutton kleiner ist als das Zeug von facebook sieht das so aus als ob da dieser zu weit unten hängen würde.
Was du machen kannst um das Ding oben auszurichten wäre der #___plusone_0 ein position:relative mitzugeben und dann top auf einen Minuswert zu setzen bis dir das gefällt.

also so z.B.

#___plusone_0
{
position: relative;
top: -7px;
}

Viele Grüße

 

[folio]

Vielen Dank schon mal. Hab das so eingebaut, hat auch gut gepasst mit den -7px. Aber vermutlich da es ein # ist, wird es nur beim ersten +1 Button angewendet. Die anderen auf der Seite sind noch versetzt. Wenn ich aus dem # ein . mache funktioniert es aber gar nicht mehr. Verstehe auch nicht ganz, wie du auf den #___plusone_0 gekommen bist - steht ja nirgendwo oder?

edit: der link nochmal: http://www.schnaeppchenfuchs.com/

@CPoly: das hab ich probiert, hat nicht geklappt. Vielleicht hab ich es nicht zur perfektion gebracht, aber ich hab dann einfach Jans Lösung genommen. Trotzdem vielen Dank.

 

[Jan-Frederik Stieler]

Hi folio,
du kannst nicht einfach einen ID-Namen in einen Klassennamen umwandeln. Dieser müsste dann schon auch dem Element zugewiesen sein.
Die ID steht im Quellcode, ich nehme Firebug um den Quellcode von Seiten zu analysieren.
Das dies jetzt nur bei dem einen funktioniert habe ich befürchtet aber gestern mal gekonnt ignoriert .

Da es gestern sehr spät respektive früh war müsste ich mir das nochmal anschauen bzw recherchieren welche wie Google das Ding aufgebaut hat.
Eventuell müsste auch eine Javascriptlösung her, aber mal schauen.

EDIT: ich hab jetzt mir nochmal den Quellcode angeschaut und die ID: #___plusone_0 wird auf jeder Seite verwendet. Ansonsten musst du dir halt einen Div Wrapper um den GooGle+Plus Button herrum bauen udn diesem dann deine eigene Klasse verpassen.


Viele Grüße