web関連tips備忘録

| 1 |

表中のイメージ下のすき間を無くす方法


imgをテーブルのセルに配置した場合、テーブル枠線やマージンをゼロにしてもイメージの下に余分な空白ができる場合がある。

そのときは、tableとimgのスタイルに「vertical-align: bottom;」を設定するとよい。
<td style="vertical-align: bottom">
<img src="dir/filename" border="0" style="vertical-align: bottom" />
</td>

スタイルシート 2010-01-21(木) 19:04:23 - kei - TrackBacks

スタイルシートで画像の上にリンク文字を重ねる


z-indexで部品の重なり順を指定することにより、イメージとリンク文字の作成順に関係なく、リンクの機能を果たすようにできる。
z-indexで指定する数字が大きいほど上になる。

具体例(スタイルシートは外部ファイルに記述)
<!-- ←スタイルシートが利用できないブラウザー用のコメント化
.categorypos{
position:relative;
top:10px;
line-height: 1.5em;
font-size: 14pt;
z-index:4; //FirefoxではなくてもOKだが、IEではこれを書かないとNGだった。
}

.linkpos1{
width:81px;
height:59px;
top:29px;
left:195px;
position:absolute;
z-index:3;
}

.linkpos2{
width:57px;
height:57px;
top:141px;
left:32px;
position:absolute;
z-index:3;
}

.linkpos3{
width:76px;
height:59px;
top:131px;
left:357px;
position:absolute;
z-index:3;
}

.linkpos4{
width:88px;
height:61px;
top:338px;
left:334px;
position:absolute;
z-index:3;
}

.linkpos5{
width:60px;
height:55px;
top:349px;
left:92px;
position:absolute;
z-index:3;
}

.linkpos6{
width:64px;
height:47px;
top:215px;
left:203px;
position:absolute;
z-index:3;
}

.linkpos7{
width:80px;
height:14px;
top:302px;
left:198px;
font-size: small;
position:absolute;
z-index:3;
}

.imgpos{
position:absolute;
top:0px;
left:opx;
z-index:1;
}

-->

スタイルシート 2006-03-13(月) 18:15:30 - kei - TrackBacks
| 1 |
LINK