締切済み

CSSで画像表示のやり方を教えてください

2008/02/22 23:46

初めまして、ＣＳＳを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか？今の状態はこんな感じです。　間違っていますか？ＨＴＭＬファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。ご迷惑おかけしますがよろしくお願いします。

kengo1
お礼率50% (4/8)

その他([技術者向] コンピューター)
回答数8
ありがとう数13

みんなの回答 （8）
専門家の回答

みんなの回答

auty
ベストアンサー率58% (284/486)

2008/02/23 17:46 回答No.8

ホームページビルダーをいじっているうちに、HTMLソースが壊れているようです。提出された部分を全て、次のものと置き換えてみてください。 ------------------------------------------------------------------ <TABLE height="136"> <TBODY> <TR> <td> <div class="menu1"> aaaaaaaa </div> </td> </TR> <TR> <TD height="104" align="center" width="88"> <IMG src="pc_39.gif" width="24" height="29" border="0"> </TD> <TD valign="top" align="left" height="104" width="215"> <UL> <li> <FONT face="Tahoma"><A href="hontonimuryounano.html">なぜ無料なの！？</A> </FONT> </li> <li> <FONT face="Tahoma"><A href="hontoniannzen.html">ホントに安全！？</A> </FONT> </li> </UL> </TD> </TR> </TBODY> </TABLE>

necomimi3
ベストアンサー率40% (124/307)

2008/02/23 17:11 回答No.7

あーごめんなさい、No3は別な人へのものでした失礼m(_ _)m

auty
ベストアンサー率58% (284/486)

2008/02/23 17:06 回答No.6

＜＜＜　状況または、HTMLのリストをお知らせください。の「HTMLのリスト」というのは「HTMLのソース」ということなんですが、現在の -------------------------------------------------------------------------- ＨＴＭＬファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } -------------------------------------------------------------------------- を知らせてもらいますか。（できるだけ長く）・　"menu1"がほかにも使われていないか。・　単純な例（それだけに限定）を作って確かめたほうがよいかもしれません。

質問者

お礼 2008/02/23 17:24

menu1は他には使ってないです前後のHTMLソースを貼り付けますね。 <TH colspan="2" valign="top" align="left" width="632" height="850"> <TABLE border="0" width="631"> <TBODY> <TR> <TH valign="top" align="left" width="319" height="593"> <TABLE height="136"> <TBODY> <TR> <TH height="8" bgcolor="#ffffff" colspan="2"><div class="title1" backgroundimage)>aaaaaaaa</div></TH> </TR> <TR> <TD height="104" align="center" width="88"><IMG src="pc_39.gif" width="24" height="29" border="0"></TD> <TD valign="top" align="left" height="104" width="215"> <UL> <li> <FONT face="Tahoma"><A href="hontonimuryounano.html">なぜ無料なの！？</A></FONT> </li> <li> <FONT face="Tahoma"><A href="hontoniannzen.html">ホントに安全！？</A></FONT> </li> </UL> </TD> </TR> </TBODY> </TABLE> これで全部ではないですがこんな感じです。

auty
ベストアンサー率58% (284/486)

2008/02/23 15:11 回答No.5

それから失礼ながらＨＴＭＬファイル名：　 index.html CSSファイル名：　　　　style1.css としたとき、index.htmlの<head></head>の中に <link rel="stylesheet" type="text/css" href="style1.css"> のように記述されていますか。もし表示されなくても、・　それは全く表示されない。・　何かは表示されている。等の状況または、HTMLのリストをお知らせください。

質問者

お礼 2008/02/23 15:25

CSSをHTMLにリンクさせるために <head></head>の中に <link rel="stylesheet" type="text/css" href="kasegou.css"> を入れています。 CSSファイルの名がkasegou.cssなのでそうしています。他のリストタグは使えたんですが文字の後ろに画像を貼ることができません。ページ編集をするときは画像があらわれたんですが実際にプレビューをしてみると画像がなくて文字だけの状態です。

auty
ベストアンサー率58% (284/486)

2008/02/23 15:00 回答No.4

・　プレビューは、どのプレビューで見たのでしょうか。・　スペルをもう一度確認して、ブラウザでも実際に表示してみてください。

質問者

お礼 2008/02/23 15:42

ホームページビルダーでプレビューしました。他のリストなどのタグは思うように表示されたので CSSファイルとHTMLファイルはリンクできていると思います。

necomimi3
ベストアンサー率40% (124/307)

2008/02/23 14:46 回答No.3

DL先を管理者に削除されてしまいましたが取得できましたか？どちらにせよEngine.jsがないと話になりません(^w^; 一応、html内でのCSSの書き方を（<html>タグと<head>の間に書きます） <style TYPE="text/css"></style> TDでの使い方は最初ので合ってます。以下スクリプトのサンプル ----------ここから var BASE = "YUKI.N>"; var TYPESTR = new Array( "*6000", "t98", "+みえてる？", "*6000", "t200", "-あ", "-ああ", "*800", "t90", "+そっちの時空間とは", "/まだ完全には連結を絶たれていない。", "/でも時間の問題。", "/そうなれば最後。"); document.write('<div id="Typingmain"><\/div>\n'); document.write('<script src="Engine.js"><\/script>'); ----------ここまで

auty
ベストアンサー率58% (284/486)

2008/02/23 01:01 回答No.2

そうですね、　　　background-image :url( object.gif ); はありますが　　　background-img : url(object.gif); は、スペル img が間違っています。引用符は、省略可能のようです。

質問者

お礼 2008/02/23 13:57

ご回答本当にありがとうございます！やっぱりプレビューをしてみたところ画像は表示されませんでした。ご親切に説明ありがとうございました！

necomimi3
ベストアンサー率40% (124/307)

2008/02/23 00:25 回答No.1

divにbackground-imgというのがあるか知りませんが background:url("object.jpg"); というのにすると背景ちゃんと出ますよ。

質問者

補足 2008/02/23 00:42

ＨＴＭＬファイルのほうをかえればよろしいということでしょうか？ＨＴＭＬファイルの方に加えると <div class="menu1"background:url("object.jpg")>aaaaaaaaaa</div> これでよろしいですか？

関連するQ&A

CSSで　画像をかさねたい
お世話になります。 CSSで　画像をかさねたいんです。下になる画像を「背景」にして　それで２つを重ねればいいのかと思いましたが、どうもうまくいきません。 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)ペコリ
- ベストアンサー
- HTML
CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。なんでかまったくわかりません（ToT）教えてくださいｍ（＿＿）ｍ【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; }
- 締切済み
- その他([技術者向] コンピューター)
HTML　CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、超初心者ですので、ご教授いただけたらと思います。以下の図のような感じに並べたいです。バックグラウンドには、青色。赤と緑の部分は、画像配置、また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。ただ、オレンジのボタン配置の仕方が、なかなか出来ずにいます。以下のHTMLとCSSには、オレンジのボタンを入れずに、まず配置をしてみましたが…。ただ、やはり右の緑の画像が、崩れてしまう感じも…。オレンジのボタンを入れていただいた形で、お願いできないでしょうか？（オレンジ画像 width＝100　height＝50 でお願いします。）【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
CSSでのマウスオーバーの画像切り替えについて
現在横型のメニューをCSSで作成しています。配置はうまく出来たのですが、ロールオーバーがうまくいきません。マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div> <div class = "topwrap"> topimg </div> <div id = "inner"> <div = "mainwrap"> mainwrap </div> <div = "sidewrap"> sidewrap </div> <div class = "clear"><hr /></div> </div> <div id = "footer"> footer </div> </div> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。
- 締切済み
- HTML
CSSで左に画像、右にテキストを並べたい。
CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。（●=画像　▲=テキスト）現在の表示は ●▲ となっているのですが、これを ●　　　　　▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか？色々試したのですが、どうしても下のように改行してしまいます。 ● 　　　　　　▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。
- ベストアンサー
- HTML
CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。当方はCSS初心者です。画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。何卒ご教示下さい。
- 締切済み
- HTML
htmlで画像の上にテキストを表示したが、ブラウザーによって見え方が違う
ホームページの制作で部分的に画像の上にテキストをつけようと <DIV STYLE="position:absolute;"> を使って作ってみました。 IEで見るとちゃんとできているんですが、サファリ、Firefoxで見ると当該箇所が左にずれてしまいます。・画像の上にテキストをつける・その画像の中に部分リンクをつける・どのブラウザーで見てもずれない以上の条件を満たせば、やり方を問いません。どなたか教えていただけませんでしょうか？どうぞよろしくお願いいたします。素人なので見づらく、変に複雑になっているかもしれませんが以下ソースの一部です。 <style type="text/css"> div.先頭画像 { background-image:url(./images/先頭画像); background-position: top center; background-repeat:no-repeat; margin:0; } div.サイド { background-image:url(./images/サイド画像); background-position: top center; margin:0; background-attachment:fixed; } table.Goo{ color:#000; } </style> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <div class="サイド"> <center><img src="./images/リンク画像" width="794" height="662" border=“0” usemap="#top"/><br /> <map name="top"> <AREA SHAPE=rect COORDS="610,0,755,30" HREF="リンク先"> </map></center> <center><IMG SRC="images/white2.gif" width="794" height="1840" border=“0”><br /></center> <!--当該箇所> <DIV STYLE="position:absolute; top:662px; left:58px"> 　　<IMG SRC="images/背景画像" border=“0” usemap="#first"/><br /> <map name="first"> <AREA SHAPE=rect COORDS="633,18,776,228" HREF="リンク先"> </map> <DIV STYLE="position:absolute; top:165px;left:125px"> テキスト </DIV> <DIV STYLE="position:absolute; top:570px;left:125px"> テキスト </DIV> </DIV> <!--当該箇所ここまで> <center> <table class="Goo" width="756" cellpadding="0" cellspacing="0" border=“0”> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="416" height="53" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="369" height="15" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> テキスト <br /> </td> </tr> </table> </center> </div> </body>
- 締切済み
- その他([技術者向] コンピューター)
【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; }
- ベストアンサー
- CSS
CSS初心者です。至急お願いします！
現在CSSでHP制作に挑戦しています。自分なりに調べながら制作していたのですが、どうしても２点だけ上手くいきません。 ●サイト全体を中央表示（widthを指定して左右のmarginをautoにすればブロック要素をセンタリング出来る、というのは理解しています。） ●SCCでロールオーバー表示この2点です。文章が下手くそなので、キャプチャを貼らせていただきました。現在の作業画像です。見にくいので… 【HTML】 <head> <link href="main_box.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0"> <div id="bg"> <div id="head">熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</div> <div id="rogo"></div> <table width="1024" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="menutop"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> 【CSS】 #head { font-size: 12px; color: #FFFFFF; background-color: #000000; background-position: center top; text-align: left; margin: 0px; padding: 10px; height: 32px; width: 1024px; } #rogo { background-repeat: no-repeat; height: 70px; width: 1024px; background-image: url(img/rogo.gif); margin: 0px; background-position: center top; margin-left:auto; margin-right:auto; } .menutop { background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static; } .menutop a:hover{ background-image:url(img/top2.gif) } #bg { margin: 0 auto; margin-top: 0px; background-color: #FFFFFF; width: 1024px; background-position: center top; } です。情けない事に、どこが間違っているのか全くわかりません。アドバイスをいただけると幸いです。現在Macromedia Dreamweaver MXを使用しています。ちゃんと保存しているのですが、もしかしたら、修正後のCSSがHTMLに反映されていないだけ…？そんな時はどうやったら反映されるでしょうか？ちなみにコチラのサイト様を参考にさせていただいています。 http://hac-design.com/ よろしくお願いいたします。
- ベストアンサー
- HTML
CSSで、リストでGlobalNavigation(画像ボタン)を作り、CSSでのRollOverと上下の隙間を消す方法
CSSでのWebサイト制作するのは二度目なので壁ばかりです。リストでGlobalNavigation(画像ボタン)を作ります。このとき、 [1] CSSでのRollOverをさせる方法(JavaScript非使用) [2] GlobalNavigation画像ボタンとボタンの間の隙間を消す方法(左に縦にボタン群を並べるので) を探しております。どのようにすればいいでしょうか？ネットサーフして片っ端から現在調べ中ですがなかなかありそうで無く・・・以下、ソースです。 HTML】 <div id="wrapper"> <div id="hdr-all"> <div id="hdr-area"> <div id="hdr-vi"> <h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1> </div> ヘッダーエリア</div> <div id="hdr-line"></div> </div> <div id="main-all"> <div id="main-area"> <div id="nv-global"> <ul> <li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li> <li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li> </ul> </div> <div id="main-area-cts"> <table width="557" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="../img/share/cts_frm_top.gif" width="557" height="21" /></td> </tr> <tr> <td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> <td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td> <td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> </tr> <tr> <td colspan="3"><img src="../img/share/cts_frm_btm.gif" width="557" height="21" /></td> </tr> </table> </div> </div> <div id="main-line"></div> <div id="ftr-all"> <div id="ftr-area">フッターエリア</div> <div id="ftr-line"></div> </div> </div> </div> 【CSS】 body { margin: 0 auto; background: #5ca786; font-family: "Osaka"; font-size: 12px; letter-spacing: 1px; line-height: 150%; color: #333333; } #wrapper { margin: 0px auto 0px auto; width: 100%; height: 100%; background: #333333;/*Total BG Color*/ text-align: left; } #hdr-all { margin: 0px 0px 0px 0px; width: 100%; height: 112px; background: #a2d8c0; } #hdr-area { margin: 0px 0px 0px 0px; width: 749px; height: 112px; background: url(../img/share/bg_hdr.jpg) no-repeat; float: left; } #hdr-line { margin: 0px 0px 0px 0px; width: 1px; height: 112px; background: url(../img/share/line_rht.gif); float: left; } #main-all { margin: 0px 0px 0px 0px; width: 100%; height: 100%; background: #5ca786; } #main-area { margin: 0px 0px 0px 0px; width: 749px; height: 100%; background: #266e4e; float: left; overflow: auto; } #main-line { margin: 0px 0px 0px 0px; width: 1px; height: 100%; background: url(../img/share/line_rht.gif) repeat-y; float: left; } #nv-global { top: 5px; left: 0px; margin: 5px 0px 0px 5px; width: 177px; padding-bottom: 30px; background: #7bb395; float: left; } #nv-global ul { } #nv-global li{ } #main-area-cts { top: 5px; left: 187px; margin: 5px 0px 0px 0px; width: 557px; padding-bottom: 30px; background: #266e4e; float: left; } #ftr-all { margin: 0px 0px 0px 0px; width: 100%; height: 150px; background: #FFFFFF; } #ftr-area { margin: 0px 0px 0px 0px; width: 749px; height: 150px; background: #FFFFFF; float: left; } #ftr-line { margin: 0px 0px 0px 0px; width: 1px; height: 150px; background: url(../img/share/line_rht.gif) repeat-y; float: left; }
- ベストアンサー
- HTML

CSSで画像表示のやり方を教えてください