2009年04月24日

テキストの横に並ぶ画像の位置合わせ その2

こんにちは
馬場です。

前回(前々回?)は、
テキストの横に並ぶ画像の位置調整について
vertical-alignを使用した対応をご紹介しました。

今回は、
vertical-alignとは別の方法、
positionやmarginを使った対応方法を
ご紹介します。

vertical-alignを使用した場合と
それほど表示が変わるわけではないので、
こんな方法もあるという程度で
ご覧ください。


テキストの横に並ぶ画像の位置合わせ その1






▼positionを使った対応


positionを使って調整する場合は、
position:relativeを指定し、
topやbottomで調整します。

その1でご紹介した、
vertical-alignの数値指定と同じように
微調整することができますが、
フォントサイズの変更には、
ついていけません。。。

あいかわらず、Newアイコンがデカすぎるのは、
気にしません。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new04">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new04 img {

position:relative;
top:4px;

}



▼marginを使った対応


marginを使って調整する場合は、
margin-bottomの値で調整します。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new05">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new05 img {

margin-bottom:-4px;

}


margin-topでもできそうなイメージですが、
マイナスにするとIEでは反応しますが、
Firefoxでは変化なしです。

プラスにすると
テキストも一緒についてくるので
うまくいきません。


▼スクリーンショット

※スクリーンショットは、
左はwindows Firefox2.0
右はwindows IE6.0 のものです。


(htmlコーディング)
<p class="new06">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new06 img {

margin-top:-50px;

}



▼vertical-alignとposition(margin)を使った対応


vertical-alignの数値指定や
positionを使った方法、
margin-bottomを使った対応で
微調整はできましたが、
ブラウザで文字サイズを変更した際には
対応できませんでした。

どうしても納得できない方は、
vertical-align:middleと
positionを使った方法または
marginを使った方法を
合わせてみてください。

完全に真ん中とは言いませんが、
ほぼ真ん中を保っていると思います。

このときは、なぜかFirefoxでも
margin-topのマイナスが効くんですよね。。。。

vertical-alignがbaseline(default)の時以外は、
margin-topのマイナスが効くようです。


▼スクリーンショット

※スクリーンショットは、windows Firefox2.0で
文字サイズを大きくしたものです。
上は、positionのみの対応、
下は、vertical-align:middleとmarginの対応です。


(htmlコーディング)
<p class="new07">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new07 img {

margin-top:-4px;
vertical-align:middle;

}
posted by baba at 20:25 | Comment(0) | TrackBack(0) | テクニック

2009年04月10日

widthを使うときの注意点 その1

こんにちは。
溝上です。

今回はCSSのプロパティの中でもよく使われる「width」について書いていこうと思います。

widthは要素の幅を決める為に使いますが、指定しないとInternet Explorerでバグが起こることがあります。
以前に先輩がこちらで一部を書いています。

今回はwidthと一緒に使わないとバグが起きることがあるプロパティを紹介しようと思います。

floatを使う場合、background-imageと同時にwidthを指定しないと背景画像が正しく表示されないというバグです。
htmlコーディング例
<div class="section">
<div class="bk1">
<div class="inner">boxA</div>
<div class="inner">boxB</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
.section {
width:600px;
margin:0 auto;
}

.bk1 {
background-image:url(bk.gif);
background-position:left top;
background-repeat:repeat;
}

.bk1 .inner {
float:left;
width:298px;
height:50px;
border:1px solid #000000;
}

.clear {
clear:both;
width:0;
height:0;
font-size:1px;
line-height:0;
outline:none;
text-decoration:none;
text-indent:-9999px;
}
このサンプルをInternet Explorer6とFirefox1.5で見てみました。
▼Firefoxの場合▼

▼Internet Explorerの場合▼


見事にInternetExplorer6で真っ白になりました。
これを解決する為にはbackground-imageと同時にwidthをpx単位でつけると解決します。
(cssサンプル)
.bk1 {
width:400px;
background-image:url(bk.gif);
background-position:left top;
background-repeat:repeat;
}
▼Internet Explorer(widthを指定)の場合▼


ちゃんと表示されました。
サンプルの場合、innerクラスのfloat:leftを消しても背景画像は表示されるようになります。
ただfloatは消せない場合って多いですよね。
またInternet Explorerで背景画像がちゃんと表示されない場合はよくあるのですが、全部が全部floatのせいというわけではないみたいです。

昔はよく先輩とこんな会話をしていました。

「先輩、なんかIEで背景がちゃんと表示されないんです」
「widthは?」

「先輩、なんかIEでfloatがうまくできないんです」
「widthは?」

「先輩、なんかIE・・・」
「widthは?」

などなど。


最近は先輩に聞く前にwidthのつけ忘れを疑うようになりました。
表示崩れに遭遇したら悩む前にwidthを指定してみるといいかもしれません。
次回もwidthについてご紹介しようと思います。
 
posted by baba at 15:10 | Comment(0) | TrackBack(0) | テクニック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。