• ベストアンサー

CSSで 画像をかさねたい

お世話になります。 CSSで 画像をかさねたいんです。 下になる画像を「背景」にして それで2つを重ねればいいのかと思いましたが、どうもうまくいきません。 CSSソースは .left{ width:182px; background:url(sideback.gif) float:left; } .left-midashi{ width:182px; text-align: center; } *「float:left」がはいっているのは、右隣にメインの枠があるからです HTMLは↓ <div class="left"> <div class="left-midashi"><img src="sidemanu-canner.gif"></div> </div> です。 初心者なので凡ミスかもしれませんが、自分ではよくわからなくなってしまいました。。。よろしくおねがいいたします。m(_ _"m)ペコリ

質問者が選んだベストアンサー

  • ベストアンサー
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.3

>どっちの画像も表示できません それは変ですね。 画像のアドレス、綴りを間違えているということはないですか? <img src="sidemanu-canner.gif" alt="メニュー"> のほうは×印にはなるのでしょうか。 とりあえず原因を確認するため、ひとつずつ付け足してみてください。 同じページ内の<div></div>の外に、 <img src="sidemanu-canner.gif" alt=""> <img src="sideback.gif" alt=""> をつけるとちゃんと表示されるでしょうか。 .left imgのほうに画像の縦横幅を指定するとどうですか? float:left;をはずしてみるとどうですか?

aimer
質問者

お礼

ありがとうございました! すみません、画像の名前をまちがえていました汗 コピペしたので だいじょうぶだとおもいこんでいて・・ (ガックリ

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.2

.left{ width:182px; background:url(sideback.gif); float:left; text-align: center; } .left img{ width:182px; } <div class="left"> <img src="sidemanu-canner.gif" alt="メニュー"> </div> 単純にこれでいいのでは…

aimer
質問者

補足

ありがとうございます。だめです。。どっちの画像も表示できません(涙 テストに ↑だけのものを表示できるかやってみましたができませんでした。。。・゜・(ノД`)・゜・。

全文を見る
すると、全ての回答が全文表示されます。
noname#14286
noname#14286
回答No.1

background:url(sideback.gif)の後に;がない。 background:url(sideback.gif); あと、 .leftに高さを追加してあげれば とりあえず、ふたつの画像は表示できました。

aimer
質問者

補足

ありがとうございます直しました。 .left{ width:182px; height:812px; background:url(sideback.gif); float:left; } .left-midashi{ width:182px; text-align: center; } -------------------------------------- <div class="left"> <div class="left-midashi"><img src="sidemanu-canner.gif"></div> </div> -------------------------------------- 上に乗せたい画像(sidemanu-canner.gif)が消えています。。 どこにったのやら・・ちなみに表示をためしているのはfirefoxです。 段組みたいに上下に表示するのではなく、完全に重ねたいのです。。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSにてfloat:leftを使用して画像を3つ並べたのですが。。

    CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません(ToT) 教えてくださいm(__)m 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }

  • (CSS)画像が完全に右端に寄りません・・・

    CSS勉強中でソースの不備が多々あると思いますがどうかみていただけますでしょうか・・。 <div class="bar">の画像の一番端の右下に<p class="px">の画像を隙間無く持ってきたいのですがどうしても<p class="px">の右側が空いてしまいます・・。対処方法がございますでしょうか。 根本からソースが違うかもしれません・・何卒お願いいたします! .pattern_box { width:708px; padding:0px 26px; text-align:right; } .pattern_box .bar { width:708px; margin:0px; } .pattern_box .px { float: right; display: inline; margin: 0px 0px 10px auto; text-align:right; } .pattern_box .inner { margin:10px 0px 0px 0px; text-align:left; font-size:12px; line-height:18px; } ★HTML <div class="pattern_box"> <div class="bar"> <img src="h2_bar01.gif" alt="" width="708" height="20"> </div> <p class="px"><img width="145" height="62" src="h2_bar01_ill.gif"></p> <div class="inner">テキストテキストテキスト</div> </div><!--pattern_box-->

    • ベストアンサー
    • CSS
  • CSSでテーブルを作る方法について

    CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。2つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか?

  • IEとFireFoxでCSSの見た目をそろえたい

    CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか? HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1>&nbsp;</h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2>&nbsp;</h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p>&nbsp; </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }

    • ベストアンサー
    • CSS
  • CSSでfloatがうまくいきません。

    CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか?

    • ベストアンサー
    • HTML
  • 携帯サイトでの回り込み

    携帯サイトをコーディングしているのですが、auのみ、ボックスの回り込みが出来なく困っています。 「画像の右にテキスト」であれば CSS ----------------------------------------------- .float { float:left; } .img { width:50px; height:35px; } ----------------------------------------------- HTML ----------------------------------------------- <!--{* この画像の右に文字列を表示する *}--> <img class="float img" align="left" src="jpg.jpg" /> floatON <!--{* 回り込み解除 *}--> <div clear="all" class="clear"></div> floatOFF ----------------------------------------------- で出来たのですが、 「ボックス要素の右にボックス要素」だと CSS ----------------------------------------------- .float-box1 { float:left; text-align:left; width:20%; height:30px; background:#4682b4; } .float-box2 { float:left; text-align:left; width:20%; height:30px; background:#3cb371; } ----------------------------------------------- HTML ----------------------------------------------- <div class="float-box-area"> <div class="float-box1" align="left">box1</div> <div class="float-box2" align="left">box2</div> </div> <div clear="all" class="clear"></div> ----------------------------------------------- で組むと、 box1 box2 という状態になってしまいます。 box1box2 というふうにしたいのですが、どなたかご存知の方いらっしゃいますか? テーブルでは考えていないのでテーブルでの横並びはなしでお願いします。 softbankとdocomoでは上記で回り込み出来ました。auだけ出来ません。 ブラウザ種は「WAP2.0」になります。 宜しくお願いいたします。

    • 締切済み
    • CSS
  • CSSで角丸テーブル

    CSSでDIV要素を使って入れ子し、角の丸いテーブルを作っているのですが、なぜか誤差が出てしまいます。 CSSのソースは次のようなものです。 table(2).gifは角丸テーブルの画像です 画像サイズ:横440px 縦11px .box-center-start { width: 440px; background: url(image/table.gif); background-repeat: no-repeat; } .box-center { width: 440px; background-color: white; margin: 20px 10px 20px 8px; float: left; } .box-center2 { width: 440px; background-color: white; padding: 0px 10px 10px 10px; border-right: 1px solid gray; border-bottom: 1px dashed gray; border-left: 1px solid gray; } .box-center3 { width: 440px; background-color: white; padding: 10px 10px 0px 10px; border-right: 1px solid gray; border-left: 1px solid gray; } .box-center-end { width: 440px; background: url(image/table2.gif); background-repeat: no-repeat; } このように記述し、HTMLに <DIV class="box-center"> <DIV class="box-center-start"></DIV> <DIV class="box-center2"> ~内容 </DIV> <DIV class="box-center3"> ~内容 </DIV> <DIV class="box-center-end"></DIV> と打ってもなぜか綺麗に表示されません。 クラス「box-center-start(end)」の下に、少し余白が入ってしまうのです。(10pxほどの) 何方か助言お願いしますm( _ _ )m

  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか? テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" />  <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" />  <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか? また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ~略~ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ~略~

    • ベストアンサー
    • CSS
  • CSSでの画像サイズ指定について

    本などでCSSを練習中です。 画像サイズを自動的に指定したサイズに縮小するCSSは ありますでしょうか? 以下のよな商品紹介のサムネイルを作りました。 画像部分は常に120×120pxに収まってほしいのですが、 横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。 正方形の画像はそのまま120×120pxになります。 何かアドバイスをお願い致します。 また、他のおかしいところもご指摘下さい。 【HTML】 <div id="itemBox"> <div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div> <p><a href="#">商品名</a></p> </div> 【CSS】 div#itemBox{ border: 1px solid #9f9f9f; width: 120px; margin: 10px; float: left; text-align: center; padding: 10px; height: 150px; } div#itemBox p{ float: left; text-align:left; width: 120px; margin-top: 5px; } div#itemPhoto{ margin: 0; padding: 5px; text-align: center; width:120px; height:120px; }

    • 締切済み
    • CSS