2010年11月12日

socialbutton.js の css

お願いします♪いいねとかつぶやいたりして下さい
 
おいfacebook のイイネボタン。
ふざけんな。最初っから ie7 で見たらぶっ壊れてるじゃねーか。
もっとちゃんとCSS組めよ。相当はまった。

ということで、IE7で見れるように仕方なく facebook アイコンのみ box_count 形式に。

素晴らしいプラグイン
http://itra.jp/jquery_socialbutton_plugin/
で、どうやったらうまく横一列に並べられるかやってみた。

○この div の中に対応したアイコンを突っ込む。
<div align="center">
<table class="socialbuttons">
<tr>
<td><span class="hatena"></span></td>
<td><span class="mixi"></span></td>
<td><span class="gree_sf"></span></td>
<td><div style="margin:0 0 38px 0;"><span class="facebook"></span></div></td>
<td><span class="tweet"></span></td>
</tr>
</table>
</div>


○で、うまく表示するためのCSS
table.socialbuttons{
	width:530px;
	margin:0 0 -38px 0;
}

table.socialbuttons td{
	padding:5px;
	margin:0;
}
table.socialbuttons td .gree_sf {
	margin:0 -40px 0 0;
}


こんな感じかな。

何度も言う。facebookの button_count のレイアウトが右半分欠けるのは、元のアイコンが悪いから、
どうにもらない。

ちなみに、以下は自分用

<!-- ブックマーク系ここから -->
<div align="center">
<table class="socialbuttons">
<tr>
<td><span class="hatena"></span></td>
<td><span class="yahoo"></span></td>
<td><span class="mixi"></span></td>
<td><span class="mail"></span></td>
<td><span class="gree_sf"></span></td>
<td><div style="margin:0 0 38px 0;"><span class="facebook"></span></div></td>
<td><span class="tweet"></span></td>
</tr>
</table>
</div>
<!-- ここまでブックマーク系 -->
関連するタグ: CSS javascript
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ