スタイルシート【複数の画像の配置について】

解決済

質問者：baupon
質問日時：2007/03/17 01:28
回答数：4件

初めまして、質問させていただきます！
今、サイトを構築中なのですが、そこで困ったことがおきました。

<link rel="stylesheet" type="text/css" href="./default.css" media="all" />
<style type="text/css">

IMG.a{ position: relative; left:60px; top:60px;z-index:1;}
IMG.b{ position: relative; left:100px; top:20px;z-index:0;}
</style>
</head>
<Body Style="margin:0 margin:0;">
<img class="a" src="**" alt="**" width=197 height=143>
<img class="b" src="**" alt="**" width=78 height=59>

このように、スタイルシートで画像の位置を指定しているのですが、
画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。

ちなみに画像はFireworksで作ったものを書き出したものです。

他にタグを打ち込むなどで、解消できるのでしょうか？
構築は初めてで、タグの知識もほとんどありません。
どうか、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#39970
回答日時：2007/03/17 02:13

画像についてじゃないけど気になったので

→Body{ margin:0 margin:0;}
→<Body Style="margin:0 margin:0;">
これ　変だよ。

後、何をどう並べようとしてどう違ってるのか判らないので答えようがない
隙間が　60,60　と　100,20　の指定のように見える

この回答への補足

すみません、Body{ margin:0 margin:0;}<Body Style="margin:0 margin:0;">は消し忘れてしまいました。

何をどう並べようとしているのかを、文章で書くのは難しいのですが…
ノートにふせんと画像が張ってあるようなデザインをfireworksで作りました。そこでふせんを自分の好きな位置に貼り付けたいのですが、なかなかうまくいかなたったので、質問をさせていただきました。

補足日時：2007/03/18 00:28

通報する

- 0
- 件

通報する

No.4

回答者： mazimekko3
回答日時：2007/03/17 23:19

[./default.css]の内容は？

xhtmlで書くのなら属性値は["]で囲まないといけませんよ。
imgタグのheightとwidthができてないです。
最後に閉じるタグがないです。<img />というように[ /]をつけてください。
また、タグは全て「小文字」です。修正を。
（xhtmlとhtmlがごちゃ混ぜになってます。）

以上ソースの添削

それとrelativeは「標準で表示される位置から、相対的に...」という意味です。
指定以外は標準位置で表示されますよ。
どのように表示したいか分からないので、これ以上書けないですけど。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。
まずタグの知識を増やさないといけませんね……。
添削してくださったのを参考にして、もう一度やってみます。

通報する

お礼日時：2007/03/18 00:40

No.3

回答者： CrownMiffy
回答日時：2007/03/17 23:18

positionプロパティの値をrelativeとした場合は、適用した要素が本来の位置(positionプロパティの値をstaticとした場合の位置)に存在するように振舞われて、次に来る要素が配置されます。

上記のソースの場合、一般的なブラウザでは単純に次々と画像を並べていった時と同じように高さを確保します。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。
positionプロパティの値について、私はよくわからなかったために、縦長になってしまうことがわかりました。
参考にさせていただきます！

通報する

お礼日時：2007/03/18 00:38

No.2

回答者： leap_day
回答日時：2007/03/17 09:22

こんにちは

z-index があるのでおそらく画像の重ね貼りがしたいのかな？と思います

その場合は position:relative; ではなく position:absolute; にしてやればいいと思います

ただpositionを使った場合上のソース文以下に書いたHTMLは画像の下に回りこむ形になるので見えないテーブルなどで

<table border="0" height="215px" style="position:relative;"><tr><td>
<img class="a" src="**" alt="**" width=197 height=143>
<img class="b" src="**" alt="**" width=78 height=59>
</td></tr></table>

などのようにして画像のpx分余白を意図的に作ってやらないといけません

画像配置の仕方が重ね貼りでなければまた聞いてください