2008 03/19 17:50
Category : HP作成
positionを利用してback_linkごと
画像を上にやってみました
今変えてみたのはプロフィールとリンク集のみです。
うまくいけば友達リストやほかのページも同じようにできるかな
IE7もってないのでどうなのかな
IE6とfirefoxでは表示されるみたいです
#back_link{
padding:2px 10px 260px 10px;
text-align:left;
background-image: url(画像のアドレス) ;
background-repeat: no-repeat;
background-position: 50% 20px;
position:absolute; top:0px; left:0px;
width:97%;
}
table { margin-top:270px; }
説明
リンク文字をトップにもってくるようにしました。
画像と重なっていい場合はいろいろためして修正して下さい。
●は画像の高さに合わせて修正
padding:2px のところは リンク文字の上からの位置
●260pxは 画像の高さプラス20px 多くしても関係ないみたいですが(^_^;)
text-align:left; はリンク文字を左端に leftをrightに変えると右端になります
background-position: 50% は幅方向の画像の位置です 20pxは上のすきま
width:97% はよくわからない これを入れたら偶然画像が表示されたのでなんで100じゃないかというと
100にするとfirefoxでスクロールバーがでちゃうからです(^_^;)
テーブルも変える必要があります。
すでにテーブルを使ってる場合は中身のみ追加して下さい
●270pxは画像の高さプラス30pxです
画像を上にやってみました
今変えてみたのはプロフィールとリンク集のみです。
うまくいけば友達リストやほかのページも同じようにできるかな
IE7もってないのでどうなのかな
IE6とfirefoxでは表示されるみたいです
#back_link{
padding:2px 10px 260px 10px;
text-align:left;
background-image: url(画像のアドレス) ;
background-repeat: no-repeat;
background-position: 50% 20px;
position:absolute; top:0px; left:0px;
width:97%;
}
table { margin-top:270px; }
説明
リンク文字をトップにもってくるようにしました。
画像と重なっていい場合はいろいろためして修正して下さい。
●は画像の高さに合わせて修正
padding:2px のところは リンク文字の上からの位置
●260pxは 画像の高さプラス20px 多くしても関係ないみたいですが(^_^;)
text-align:left; はリンク文字を左端に leftをrightに変えると右端になります
background-position: 50% は幅方向の画像の位置です 20pxは上のすきま
width:97% はよくわからない これを入れたら偶然画像が表示されたのでなんで100じゃないかというと
100にするとfirefoxでスクロールバーがでちゃうからです(^_^;)
テーブルも変える必要があります。
すでにテーブルを使ってる場合は中身のみ追加して下さい
●270pxは画像の高さプラス30pxです