フリーランスのウェブクリエーターが日々の気付きや日常の出来事を備忘録的にまとめています

【HTML】
<div class=”comment”>
 <p class=”linkarea”>
 <a href=”hogehoge.html”>このリンクテキストは表示されない</a>
 ここにテキストがはいる
 </p>
</div>

【CSS】
div.comment {
 position: relative;
 width: 100% ;
 min-height:100px;
 margin:0;
}
div.comment p.linkarea {
 margin:0;
 padding:0;
}
div.comment p.linkarea a {
 display: block ;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 text-indent:-999px;
 background/*\**/: #fff\9; /*IE7、8用ハック*/
 filter:alpha(opacity=0); /*フィルターで透明に*/
}

この例だと、commentというdivを起点として透明なリンクエリア（linkarea）をdiv全体に重ねているイメージ。
リンクテキストはテキストを飛ばしているので記入されていても表示はされません。

Greyboxの閉じるボタンがデフォルトのままだと押しづらいしデザインもイマイチなのでカスタマイズしてみました。

閉じるボタンを表示したい位置に

<a href=”#” onclick=”parent.parent.GB_hide();”>閉じる</a>

とか

<button name=”closebutton” type=”button” onclick=”parent.parent.GB_hide();”>閉じる</button>

表示する文言は画像にしたり色々加工すればOK！

それで、デフォルトで表示される閉じるボタンを消すには、gb_styles.cssの.GB_Window .headerにdisplay:none;を追加すれば表示されなくなる。

position:relative;とposition:absoluteで位置指定した際、IE6でズレる

しばらくハマってしまったが、親要素にwidth:100%を入れる事で無事解決！

htmlソース

＜div class=”bt_keisan”＞

＜p＞（ボタンの右に表示する文字）</p＞

＜input type=”hidden” name=”action” value=”calculate” /＞

＜input type=”submit” value=”ボタン” /＞

＜/div＞

CSSソース

.bt_keisan {

text-align:center;

margin:10px 0 0 ;

position:relative;

width:100%;

}

.bt_keisan p {

position:absolute;

left:50%;

top:50%;

margin:-8px 0 0 40px;

}

最近よく使う便利なスタイルシートをメモ。

親に「position:relative」で基準点を決め子孫に「position:absolute;top:10px;left10px;」等で、ポイントを配置するというスタイルシートです。

後からこのスペースにクローズボタンを置きたい！とか透過pngのワンポイントと置きたい！とか使い道はいろいろあるだろうけど、これは便利でよく使用しています。

料金表など、テーブルがいくつも出てくる場合のスマートな指定の仕方を模索中です。

地元のクリスマスツリー！

→ホームページ制作・WEBシステム開発