HTML/CSSで画像が表示されない問題について
- HTML/CSSで画像が表示されない問題が発生しています。背景画像やヘッダ画像、フッダ画像は表示されていますが、特定のボタン画像とフッダ画像が表示されません。
- ボタン画像は指定した位置に表示されないため、常に表示する配置をしたいと考えていますが、表示されなくなってしまいます。同様にフッダ画像も指定した高さでないと表示されないようです。
- ボタン画像とフッダ画像の表示方法について、ご教示いただけると幸いです。
- ベストアンサー
本当に困っています。html/cssについて。
html/cssについて。画像が表示されません。 html/cssを手打ちしてコーディングしています。 一部の画像がどうしても表示されず、困っています。 まず、背景画像はJavaScriptで５枚の画像からランダムで表示。 次に帯状のヘッダ画像(top_header.gif)を最上部に横方向にリピートして表示。 同じくフッダ画像(top_footer.gif)を最下部に横方向にリピートして表示。 そして左上にホームボタン画像(TOP_s1.gif)を配置。 次が問題になっている箇所です。 ボタン画像(button_r1_c1_s1.gif[width 136px heignt 36px])を上から0px,右から500pxの位置 に、ブラウザの大きさに関わらず常に表示される(fixed)ようにしたいのですが、 画像が表示されなくなります。ちなみに透明のままですが、ブラウザで確認するとタブの遷移はできます。 これもちなみにですが、上から0px,右からも0pxの位置に指定すると表示されます。 右から0pxだと表示されるが、それ以外だと表示されません。他の画像が邪魔しているのなのか、原因がわかりません。 同様にフッダ画像(top_footer.gif[width 1681px height 42px])も表示されていません。 これはheightを1000pxくらいで指定すれば、なぜか表示されるのですが、邪道な気がしています。 どなたかボタン画像(button_r1_c1_s1.gif)とフッダ画像(top_footer.gif)の表示方法をご指導願います。 よろしくお願いします。 【html】 <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> <div id="TOP_s1"><a href="#"></a></div> <div id="News"><a href="#"></a></div> </div> </body> 【CSS】 @charset "utf-8"; /* CSS Document */ body{ padding-top: 0; padding-right: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-left: 0; overflow-y: hidden; overflow-x: hidden; } #container{ height:100%; width:100%; } #top_header{ background-image: url("../image/top_header.gif"); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ <!-- 問題箇所２ --> background-image: url("../image/top_footer.gif"); height: 42px; <!-- 1000pxくらに表示すると表示される --> bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; } #TOP_s1 a { background-image: url("../image/TOP_s1.gif"); height: 194px; width:332px; background-position: left top; background-repeat:no-repeat; background-attachment: scroll; position:absolute; z-index: 3; top:0; left: 0; } #TOP_s1 a:hover { background-image: url("../image/TOP_s2.gif"); } #News a { <!-- 問題箇所１ --> background-image: url("../image/button_r1_c1_s1.gif"); height: 136px; width:36px; background-position: right top; background-repeat:no-repeat; background-attachment: fixed; position:absolute; z-index: 3; top:0px; right: 500px; <!-- 500pxを0にすればなぜか表示されます --> }
- yuki_tigers
- お礼率55% (31/56)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とっても複雑怪奇なHTMLとCSSなので、何をしようとしているのかが、さっぱりわかりません。 まず、HTML(頭文字なので、大文字で書くように)ですが、javascriptは問題ないので後回しにして・・文書構造だけを書きます。 <body> <div class="header"> <h1>ページタイトル</h1> </div> <div class="section"> <h2>本文記事見出し</h2> </div> <div class="footer"> <p><a href="/">サイトトップ</a></p> <p><a href="#"></a></p> </div> </body> 以外何も書く必要はありません。 container--多分意味的にはarticle--でしょうが、この程度のHTMLなら不要です。 (article : 内部にheader,section,footerを持ちうる完結した記事) header,section,footerは、ひとつの文書内に何度も登場する可能性があるのでclassのほうが良いでしょう。 header,section,footer,articleのclass名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の名前とその用途を参考にしています。 将来、HTML5に即変更できますから・・ [スタイルシート] ・背景画像をランダムに変更する。 ・headerは縦34pxでfixedで常にページ最上部に固定 ・footerは縦42pxでfixedで常にページ最下部に固定 ・サイトトップへのリンクは(194px×332px)のボタンでページの左上 ↑えらくでかいけど、このサイズ合ってます？？ また、最後の二つは矛盾しています。なぜなら、ボタンの位置を絶対配置しようとすると、その要素が含まれるstaytic以外の直近の親要素があれば、その親要素の位置が基準になるからです。 <body> <div class="header"> <h1>ページタイトル</h1> <p><a href="/">サイトトップ</a></p> </div> <div class="section"> <h2>本文記事見出し</h2> </div> <div class="footer"> <p><a href="#"></a></p> </div> </body> なら可能です。 HTMLをデザインは無視して徹底的に文書構造をマークアップだけしましょう。後でどのようにもデザインできます。 具体的に絵を載せるとわかりやすいです。
関連するQ&A
- html/css について質問です。
現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？ どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }
- ベストアンサー
- CSS
- CSSについて教えて下さい
ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側（上下位置は中間）に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>
- ベストアンサー
- その他([技術者向] コンピューター)
- cssで角丸で一部の画像だけを変更したい。
cssで角丸テーブルにトライしています。（参考にしたサイトhttp://jmblog.jp/archives/94） これをアレンジして、左上の画像（タイトル部分にする）のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、 でもどうしても上手く行きません。どうぞどなたかお助け下さい。 ＊＊＊＊＊＊＊＊ＨＴＭＬ＊＊＊＊＊＊＊＊＊ <div class="dialog"> <div class="header"><span class="taiken"></span> <div class="c"></div> </div> <div class="body"> <div class="c">テストテスト</div> </div> <div class="footer"> <div class="c"></div> </div> </div> ＊＊＊＊＊＊＊＊ CSS ＊＊＊＊＊＊＊＊ .dialog { width:698px; } .dialog .header .c, .dialog .footer .c{ font-size:1px; /* ensure minimum height */ height:20px; } .dialog .header span.taiken{ background-color: transparent; background-image: url(../pic/head_r1_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 37px; } .dialog .header .c{ background-color: transparent; background-image: url(../pic/head_r1_c2.gif); background-repeat: no-repeat; background-position: right 0px; height: 37px; } .dialog .body{ background-color: transparent; background-image: url(../pic/body_r2_c1.gif); background-repeat: repeat-y; background-position: 0px 0px; } .dialog .body .c{ background-color: transparent; background-image: url(../pic/body_r2_c2.gif); background-repeat: repeat-y; background-position: right 0px; } .dialog .footer{ background-color: transparent; background-image: url(../pic/footer_r3_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; } .dialog .footer .c{ background-color: transparent; background-image: url(../pic/footer_r3_c2.gif); background-repeat: no-repeat; background-position: right 0px; } 宜しくお願いいたします。
- ベストアンサー
- HTML
- CSSのborderが実際の領域より上に表示される
お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。 本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。 実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。 ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？ いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。 よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ～省略～ </div> <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> </div> <div id="footer"> ～省略～ </div> </body>
- ベストアンサー
- ホームページ作成ソフト
- CSS IE6でのabsoluteズレ
フッターがブラウザに合わせて下部に固定するようにしていて フッターは横幅100%にしています。 他のブラウザでは全く問題ありませんが、IE６で見ると右にかなりずれて表示されてしまいます。 以下HTMLソース-------------------------- <div id="footer"> <div class="foot"><a title="トップにもどる" href="#top"><img src="common/images/pagetop.gif" alt="ページTOP" /></a></div> </div> 以下CSSソース-------------------------- #footer{ position:absolute; bottom:0px; height:20px; width:100%; background-image: url(../images/footbg.gif); background-repeat: repeat-x; } #footer .foot{ margin-left: auto; margin-right: auto; width:950px; } #footer .foot img{ float: right; padding-top:1px; } position:absolute;をとると下固定ではなくなりますが、ちゃんと真ん中に表示されます。 改善策をご教授願います。 よろしくお願いいたします。
- ベストアンサー
- CSS
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- 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
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- CSSでIE6だけ出る隙間をなくしたい
お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- CSS
お礼
ご丁寧にありがとうございました。参考にさせて頂きます。