実験結果７

てすてす

<img src="画像" style="position:absolute; top:0px; left:500px;
                                      filter:alpha(opacity=50);">
<div style="position:absolute; top:120px; left:300px;">
   当然ですが文字も書けます。</div>

こんな感じです・・・
画像はGIF形式ですけど、あんまり関係ないのでは？
単位の記述ミスは盲点でしたね・・・
気になる点。このWindowをリサイズすると、画像の位置がずれること。
なぜ？当然か・・・両脇のスペースがあるから。
Windowのサイズを変えたときの対応はこうですね。
縦位置：ｔｏｐの指定はａｂｓｏｌｕｔｅで行います。
横位置：２×１のｔａｂｌｅで行います。

<table width="550">
<tr><td width="300"></td><td>
<img src="画像" style="position:absolute; top:0px;
                                      filter:alpha(opacity=50);">
</td></tr>
</table>

こうすれば、横のズレはなくなります。
ｂｌｏｇとしての横幅は７５０ｐｘですが、モニタの解像度によって両脇のスペースが変わります。
ここでは、記事の表示エリア（横幅：５５０ｐｘ）をターゲットにしています。
サイドバーの上は・・・今後の課題ですね。（サイドバーに記述すればＯＫ？）
原点（０，０）の位置が、ｂｌｏｇの左上ではなく、クライアント領域の原点（ブラウザで表示されている本当の左上）を指しているため位置決めが難しいです。

当然ですが
文字も書けます。

コメント 9

どうも～。お世話になりました。
このままカスタムベインにのせてみました。
うまくいきそうです。
こうすると、毎回ソースを書き込まないで済みます。

後は載せる画像のもんだいです・・・。
同じスキンで 季節感を変えながら、
このまま行って見たいと思っています。

css, javaスクリプト、まだまだ、覚えることいっぱいです。
黒板も、理解しきれていません・・・。
よろしくお願いします。
by (2006-02-28 02:55) 

なんとか、うまくいってよかったです。
私としては、サイドバーの記述文字数をもう少し緩和してもらって、時間や日時で切替ができるようにもしてみたいですね。
いかに、短いコードで効率よく書くか・・・
ある意味、パズルですね。
ガンバ！
by 柊太郎 (2006-02-28 09:45) 

ありがとうございました。
私はTBしない設定にしているので、リンクしました。
よろしくお願いします。
by (2006-02-28 10:10) 

tarさんが、styleタグでも実験してます。
http://blog.so-net.ne.jp/mebiuscene/2005-10-15
by (2006-02-28 18:41) 

そうそう、赤い自販機型のラジオもありました。私が応募したときは、コカコーラのデザインの入った、普通のステレオラジカセでしたけど。
by (2006-03-01 13:12) 

こんばんは。
やいこさんが、テーブルタグでやってましたが、
やいこさんのスキンではくずれていました。
スキンによって巾にかなり違いが有るような気がします。
by (2006-03-02 00:00) 

おはようございます。
先日のメンテ以降画像がずれるようになりました。
ｃｓｓで、fixed を使うのはどうですか？
お暇ができたとき、お返事いただきたいのです。
よろしくお願いします。
by (2006-03-09 09:43) 

どもども・・・
昼休みに、ｂｌｏｇ見ながらお弁当・・・なんですが、消化によくないかも。
ｆｉｘｅｄですが、たしかスクロールしないと思います。
記事は、スクロールしますが、画像だけ固定・・・のはず。
ヒマを見つけて、実験してみます。
by 柊太郎 (2006-03-10 12:51) 

こんにちは。
メンテのおかげか、快調です。
先日からのスキン画像のずれですが　right:52px;をはずしてみました。
巾一杯にしてあるせいか、落ち着きました。
by (2006-03-15 11:34)