background-imageの配置

質問

御世話になります。

CSSにて下記画像のように『お問合せボタン』を配置したいと考えております。
左の写真の一番下のラインに合わせて配置したいんです。
お問合せボタンの上には商品説明が入るようなイメージです。
background-positionでは無理ですよね？
ご教授願います。

現在の設定↓
.go_form {
display: block;
background-image : url(../img/お問合せボタン.png);
background-position: bottom right;
background-repeat: no-repeat;
text-align: left;
text-indent: -9999px;
}

回答No.2

ORUKA1951 · ベストアンサー

HTMLがないとどのようにスタイルシートを書けばよいかは説明できません。
逆に言うと、HTMLがきちんと文書構造にしたがってマークアップされていると、好きなようにデザインできます。

[例]
・写真自体が重要な要素だから背景にはしないで画像とする。
・商品とその説明とフォーム(リンク)からなる「商品リスト」

　としてHTMLを書くと下記のようになるはずです。
<div class="productList">
　<ul>
　　<li><img src="./images/thumbnail/1.jpg" width="80" height="48" alt="袖付き椅子(茶)">
　　　<ol>
　　　　<li>商品説明がここに入る。</li>
　　　　<li>商品説明が長い場合は二行になる。</li>
　　　　<li class="goForm"><a href="./form.cgi?product=3">問合せ</a></li>
　　　</ol>
　　</li>
　　<li><img src="./images/thumbnail/2.jpg" width="80" height="49" alt="袖付き椅子(白)">
　　　<ol>
　　　　<li>商品説明がここに入る。</li>
　　　　<li class="goForm"><a href="./form.cgi?product=3">問合せ</a></li>
　　　</ol>
　　</li>
　　<li><img src="./images/thumbnail/3.jpg" width="80" height="80" alt="袖付き椅子(クリーム)">
　　　<ol>
　　　　<li>商品説明がここに入る。</li>
　　　　<li>商品説明が長い場合は二行になる。</li>
　　　　<li class="goForm"><a href="./form.cgi?product=3">問合せ</a></li>
　　　</ol>
　　</li>
　</ul>
　<hr>
</div>

[例]定義リストを使う場合
<div class="productList">
<ul>
<li>
<dl>
<dt><img src="./images/thumbnail/1.jpg" width="80" height="48" alt="袖付き椅子(茶)"></dt>
<dd>商品説明がここに入る。</dd>
<dd>>商品説明が長い場合は二行になる。</dd>
<dd class="goForm"><a href="./form.cgi?product=3">問合せ</a></dd>
</dl>
</li>
<li>
<dl>
<dt><img src="./images/thumbnail/2.jpg" width="80" height="49" alt="袖付き椅子(白)"></dt>
<dd>商品説明がここに入る。</dd>
<dd class="goForm"><a href="./form.cgi?product=3">問合せ</a></dd>
</dl>
</li>
<li>
<dl>
<dt><img src="./images/thumbnail/3.jpg" width="80" height="80" alt="袖付き椅子(クリーム)"></dt>
<dd>商品説明がここに入る。</dd>
<dd>商品説明が長い場合は二行になる。</dd>
<dd class="goForm"><a href="./form.cgi?product=3">問合せ</a></dd>
</dl>
</li>
</ul>
<hr>
</div>

　いずれにしても、HTMLさえきちんとマークアップされていれば、【ここだけがもっとも肝要】
　どのようにでも配置できるはずです。逆に言うと、まったく同じにデザインできます。

お礼

遅くなりましたが解決しました。
ありがとうございました。

補足

ご丁寧な説明ありがとうございます。
わかりにくい質問ですみません。

ＨＴＭＬは下記のような感じになります。
商品は写真で問い合わせボタンは背景画像です。

リストを使ってやったほうがいいのですかね。
教えていただいたソースを参考に頑張ってみます。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
<div id="ft-main">
<img src=商品写真 style="margin-right:20px; float:left;" >
<img src="題名">
<p>
　　説明文１<br>　
　　説明文２<br>　
　　説明文３<br>　
</p>
<div class="go_link"><a href="form.html">問い合わせ</a></div>
<div class="partition">区切り</div>
</div>
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

回答No.1

noname#158634

＞お問合せボタンの上には商品説明が入るようなイメージです。
商品画像とボタンの間は？

とりあえず、その画面構成なら商品画像と商品説明とボタンを入れるボックスがあるはずですが、無いのかな？
そのボックスがあるなら
background-position: bottom right;
で右下の隅になるわけだから「左の写真の一番下のラインに合わせて配置」できますが。

お礼

遅くなりましたが解決しました。
ありがとうございました。

補足

ありがとうございます。
ボックス使っていませんでした。
ボックスで試してみます！