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）

^{この部分が上付文字になります}

■下付文字の指定

_{この部分が下付文字になります}


/*上付き文字設定*/（CSS）

.up_txt {
vertical-align: super ;
}