固定式メニュー
楽天で検索
アマゾンで検索
Googleで検索
Yahoo!で検索
Gooで検索

アッシュの情報商材辛口日記

優良な情報商材・使えない詐欺商材の辛口評価

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

スクロール追尾型バナー広告(その3)

またもやまどかさんの記事を見てヒントを得ましたが

 

スクロール追尾型の広告がCSSのみで出来ました。

 

今回設置したものにはJavaScriptも一部で使ってはいますが、表示・非表示の切り替えのところだけで

 

広告自体はCSSのみの使用です。

 

ソースを書きますと

 

HTMLテンプレート内に

<div style="float:right;position:fixed; top:110px; right:10px; width:150px;background-color:#ffffff;">

<div id="tmemu1" style="display:none;">

<p style="float:right; margin:0; padding:0; width:150px;"><input type="button" value="メニュー表示" style="width:150px"

   onClick="document.getElementById('tmemu2').style.display='block';

            document.getElementById('tmemu1').style.display='none'"></p>

</div>

<div id="tmemu2">

<p style="float:right; margin:0; padding:0;"><input type="button" value="メニュー非表示" style="width:150px;"

   onClick="document.getElementById('tmemu2').style.display='none';

            document.getElementById('tmemu1').style.display='block'"></p>

<table id="tmenu"> 

<tr class="tmemu"><td><a>固定式メニュー</a></td></tr>

<tr class="tmemu"><td><a href="http://www.rakuten.co.jp/" class="amenu">楽天で検索</a></td></tr>

<tr class="tmemu"><td><a href="http://www.amazon.co.jp/" class="amenu">アマゾンで検索</a></td></tr>

<tr class="tmemu"><td><a href="http://www.google.co.jp/" class="amenu">Googleで検索</a></td></tr>

<tr class="tmemu"><td><a href="http://www.yahoo.co.jp/" class="amenu">Yahoo!で検索</a></td></tr>

<tr class="tmemu"><td><a href="http://www.goo.ne.jp/" class="amenu">Gooで検索</a></td></tr>

</table>

</div>

</div>

 

CSS内に

#tmenu {

width: 150px;

margin: 0px 0px 0px 0px;

        background-color:#ffffff;

        border: 1px #000000 solid;

        /*cellpadding:2px;*/

        /*cellspacing:5px;*/

}

tr td{

        width:150px;

        background-color:#ffffff;

        border: 1px #000000 solid;

}

 

を加えました。

 

最初作成したときにCSSのみで実現出来なかったのですが

 

その時のtableタグをDivタグで囲ってコーディングしているだけで出来てしまったので

 

tableタグに対してはfloat:right;position:fixed;が効いていないのに

 

divタグに対しては有効になるみたいですね。

[ 2013/02/17 17:58 ] [雑言] | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

 プロフィール

アッシュ

Author:アッシュに

メールする

 アクセスランキング
 最新コメント
 最新トラックバック


FXってそもそも何?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。