【CSS】画像を重ねたいのですが動きません

質問

ウェブサイトを作っているのですが、
positionを使って、ひとの写真と影の画像を重ねたいのですが、影がピクリとも動いてくれません。
ちなみに他のスタイルはCSSから読み込めているので、
CSSのインポートエラーではないようです。

難しいことをしているわけではないと思いつつも、
二時間くらいここで止まっておりまして、悲しいです・・・。

下記のコードを書いております。
ご教示頂ければ幸いです。
よろしくお願いいたします。

☆HTML
<div id="staffphoto">
<img src="写真.jpg" width="160" border="0">
<img src="影.gif" border="0" width="160" class="shadow">
</div>

☆CSS
#staffphoto{
　　position: relative;
}

#staffphoto img.shadow{
　　position: absolute;
　　top: 5px;
　　left: 5px;
}

回答No.3

DrFell · ベストアンサー

kyabochaさんのｃｓｓは、考え方はある意味間違っていますが、記述はほぼ合っています。
cssの余分なスペースを取ると、思った通りになると存じます。つまり、プロパティの前のスペースに、余計な物が入り込んでいるため解釈されていないだけです。スペースは削除するかtabか「半角スペース」に置き換えてみてください。それと、その記述だと、影が上に乗る気が。透明gifで問題ないのですかね？

次に間違っている部分ですが、ｈｔｍｌ＋ｃｓｓでは、装飾的なことはｃｓｓを使い、ｈｔｍｌには入れないという基本理念があります。ですので、影をｈｔｍｌに入れるのは、間違いだと思います。私ならこんな感じで影を付けると思います。こっちだと、影はgifでなくても、jpgでも問題なく使用できます。

<div class="staffphoto">
<img src="写真.jpg" width="160" border="0">
</div>

.staffphoto img{
background:url(影.gif) no-repeat 5px 5px;
padding:0 5px 5px 0;
}

お礼

風邪をひいて寝込んでしまいまして、回答が遅くなり、大変失礼いたしました。
丁寧なご案内ありがとうございます。なるほど～、そういう影の付け方もあるんですね！ちょっとやってみます。とても勉強になりました！！BAにさせて頂きます。

回答No.2

totomac

CSSで影を付けるという方法もありますよ。

例えば、
http://www.htmq.com/css3/box-shadow.shtml

参考URL：

http://www.htmq.com/css3/box-shadow.shtml

お礼

風邪をひいて寝込んでしまいまして、回答が遅くなり、大変失礼いたしました。
ご案内ありがとうございます。CSSで影をつけられると楽ちんですね！ただ、CSS3はIE8以下だと対応できない（？）と書いてあるサイトもあり、そこらへんの対応は素人の私には難しそうです・・・・。早く古いバージョンのブラウザーがなくなってくれるといいのですが。

回答No.1

ORUKA1951

Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
の[DATA]でHTMLを
W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
でスタイルシートをチェックしてみる。
Firebug( https://addons.mozilla.jp/firefox/details/1843 )で、適用状況を確認する。

お礼

風邪をひいて寝込んでしまいまして、回答が遅くなり、大変失礼いたしました。
ご案内ありがとうございます。いろんなチェックサービスがあるんですね。勉強になります。