CSSの背景がネスケだと表示されません（＞＜）
- CSSの背景がネスケだと表示されません。IEでは正しく表示されます。
- CSSのタグを使用して背景を表示していますが、ネスケでは表示されません。
- 使用しているCSSのタグに問題があるため、ネスケで背景が表示されません。
- ベストアンサー
ＣＳＳの背景がネスケだと表示されません（＞＜
ＩＥだとちゃんと見れます。 ＣＳＳのタグが #top-bg { background-image: url("archives/img/top.gif"); height: 55px; width: 700px; } #banner { font-family: Verdana, Arial, sans-serif; color: #e40c5d; text-align: left; padding-bottom: 0px; padding-top: 8px; padding-left: 350px; padding-right: 0px; } で、こういう風に表示しています↓↓ <div id="top-bg"> <div id="banner"> <h1>ページタイトル</h1> </div> </div> どなたかよろしくお願いします…
- memiko
- お礼率89% (17/19)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
CSSの記述に全角スペースが混ざってないか。 背景画像が置いてあるパスは正しいか。 絶対パスにしても表示されないか。 この辺チェックしてみてください。
関連するQ&A
- ＭＴ長所新車で
超初心者です。ムーバブルタイプで、エントリーに画像をアップすることはできるのですが、トップのバナーにはアップすることができません。スタイルシートで何回も挑戦していますが、どこが間違っているのか、画像が反映されないのです。間違いを教えてください。 具体的に書きます。 #banner { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-color: #6B8E23; text-align: left; padding: 15px ; border-bottom: 1px solid #FFFFFF; height: 39px; } a#banner-img { } となっているところを #banner { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-image:<img alt="ue01.gif" src="http://www 略 width="××× heigho="○○○/>; background-color: #6B8E23; text-align: left; padding: 15px ; border-bottom: 1px solid #FFFFFF; height: 39px; } あるいは【例０２】 #banner { font-family: Verdana, Arial, sans-serif; color: #FFFFFF; background-image:url<img alt="ue01.gif" src="http://www 略 width="××× height=" ○○○/>; background-color: #6B8E23; text-align: left; padding: 15px ; border-bottom: 1px solid #FFFFFF; height: 39px; } としています。 どこがおかしいでしょうか。 またどのようにすれがいいでしょうか どなたか教えてください。
- ベストアンサー
- ブログ
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- 背景に影をつける方法（CSS）を教えてください。
以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }
- ベストアンサー
- HTML
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- 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 ブログのタイトルの背景が表示されません
検索してみたのですが、どこが悪いのか不明なのでどなたか教えて下さい＞＜ エキサイトブログのマイスキンで、 ブログの日のタイトルの前に画像を付けたいのですが、 DIV.POST_HEAD td.ti { text-indent: 43px; background: url(つけたい画像のURL(gif)) no-repeat left top; line-height: 1.6; _height: 27px; vertical-align: middle} となっていても画像が表示されずタイトルの文字のみです。 もしや画像の高さを27pxにした方がいいのか？と思って 画像サイズを27×23pxにしたのですが、それでも表示されません。 画像のアップロードは出来ています。 全体的？に見ると DIV.POST { MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;} DIV.POST_HEAD { BORDER-BOTTOM : 1PX #CCC dashed; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; } DIV.POST_HEAD td.ti { text-indent: 43px; background: url(画像URL.gif) no-repeat left top; line-height: 1.6; _height: 27px; vertical-align: middle} DIV.POST_HEAD td.admin { text-indent: 0;} DIV.POST_HEAD a { font-size: 110%; letter-spacing: 4px; } DIV.POST_TTL { FONT : BOLD 15PT/130%;} DIV.POST_ADMIN { TEXT-ALIGN : RIGHT;} DIV.POST_BODY { LINE-HEIGHT : 150%; WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; } DIV.POST_TAIL { FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; } DIV.COMMENT { BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7; PADDING : 15PX; MARGIN : 20PX 0PX; } DIV.COMMENT_BODY { MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%;} DIV.COMMENT_TAIL { MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777;} DIV.COMMENT_INPUT { MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; } DIV.COMMENT_LINE { BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; } コンナカンジです・・・。 どこが悪いのでしょうか・・・。 ちなみに上手く表示されている方のソースからひっぱっても 私のプレビューで見ると何故かそこだけ表示されません。 もっと他のところを見るべきなのでしょうか？ 素人で申し訳ありませんが どなたか分かる方、アドバイスを頂けたらうれしいです。
- ベストアンサー
- ブログ
- ブログのTOP画像表示方法（悩んでます）
どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか？？ ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }
- ベストアンサー
- ブログ
- CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい
CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる１つのボックス(Aとする)の中に２つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。（参考イメージ上参照） この隙間を無くすにはどのようにすれば良いのでしょうか？ この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }
- ベストアンサー
- HTML
お礼
すみません（＞＜ やはり全角が駄目でした… コメントが原因だったみたいです… ありがとうございました！本当に助かりました！
補足
全部試しました… <h1>とか<h2>のようなテキストタグに直接書いた場合は背景が表示されるんですが、なぜか<div id="">に書いたことは全て表示されないんです… 背景だけでなく、横幅なども…