ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|FROGs note

ホームページ制作に役立つ無料素材やWEBデザインに関する自分のためのメモ帳です。

  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|Frogs note
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|素材
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|本の紹介

 | HOME |  次のページ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

cssで画像透過をさせ簡単にロールオーバー

◆透過CSS


div#btn a:hover img
{
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
background: #fff;
}

【ポイント】
■filter: alpha(opacity=80); ←ie6ブラウザでは適応されません。
■opacity:0.8; これでie6ブラウザでも透過処理されます。
■数字が小さくなるほど透明度が増します。

スポンサーサイト

colspan使用時のテーブル列幅指定について

colspan使用時のテーブル列幅指定が利かない時の解消法。


『table-layout』で解決!


※table要素の幅を指定する必要がある
※列幅を指定しないと、すべての列幅が均等になる
※Safari、Google Chromeでは、列幅が指定した値よりも若干狭くなる


table {
width: 500px;
table-layout: fixed;
}

table th {
width: 20%;
}

table td {
width: 80%;
}

ヘッダーを固定するCSS

ヘッダーを固定したくて探したところCSSできるとのこと

やってみました。

http://frogsdesign.web.fc2.com


★html
<div id="header">
<h1>固定したいヘッダー要素</h1>
<!--/ #header--></div>


★CSS

* html body {
background: url(null) fixed;
}

/* header要素
----------------------------------------------------------- */
div#header {
width: 100%;
background: url(../img/top/bg_top.png) repeat-x;
position: fixed;
top:0;
left:0;
}
* html div#header {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}


※その下の要素にはpadding-topで調節すればよいです。


参考URL:http://www.css-lecture.com/log/css/047.html

divコーディングのとき画像周辺の隙間を解消(IEバグ)

divコーディングのとき画像に対して出来る隙間を解消する(IEバグ)

★CSS

img {
vertical-align:bottom;
}

上付き文字の指定

■上付文字の指定(html)

<sup>この部分が上付文字になります</sup>

■下付文字の指定

<sub>この部分が下付文字になります</sub>


/*上付き文字設定*/(CSS)

.up_txt {
vertical-align: super ;
}

 | HOME |  次のページ

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