background-colorの横幅の指定

2023/10/24 16:34

このQ&Aのポイント

background-colorの横幅を文字数に関係なく、592pxにする方法は？
QとAのbackground-imageは配置できたが、background-colorの横幅が592pxにならない
クローム、firefox、サファリでは正常に表示できるが、IE9だとズレる

ベストアンサー

background-colorの横幅の指定

2012/11/13 12:05

添付画像にあるQandAのように、Qにはbackground-imageだけ、Aにはbackground-imageとbackground-colorを使いたいと思ってます。なんとかQとAのbackground-imageは配置できましたが、background-colorの横幅が592pxになりません。次のような現象が起こってしまいます。・background-colorが592pxを超えて、サイドバーに重複することがある。・一つ目の回答にあるbackground-colorの横幅は592pxだが、二つ目のbackground-colorは文字数が少ないから350pxとかになる。・クローム、firefox、サファリは正常に表示できたが、IE9だとズレる。以上のような現象が起こります。 background-colorの横幅を文字数に関係なく、592pxにするにはどうしたら良いのでしょうか？

noname#233083

CSS
回答数1
ありがとう数1

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

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/13 19:41 回答No.1

CSSで背景色のwidthが指定できません。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7791851.html ) のほうに回答しました。

質問者

お礼 2012/11/15 10:04

ありがとうございます！！

関連するQ&A

CSSで背景色のwidthが指定できません。
WebサイトのQ&Aのページを<dl>要素を使って作成しています。質問項目には、background-imageだけを使い、回答項目には、background-imageとbackground-colorを使っております。それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。かれこれ4時間くらい格闘しておりますが、きちんと表示できません。ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。以下に、該当するHTMLとCSSだけ書きました。何がいけないんでしょうか？もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？  <dl> <dt class="questiontext_dt">ここで質問</dt> <dd class="question?dd">ここで回答してます</dd> </dl> /* CSS*/ .questiontext_dt { width:592px; padding: 0px 0px 0px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; text-align: left; float: left; font-family: "ＭＳＰゴシック",sans-serif; background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; } .questiontext_dd { width:592px; padding: 5px 0px 5px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; float: left; font-family: "ＭＳＰゴシック",sans-serif; background-color: #f5eabc; background-image:url(http://www.ok.com/img/question2.gif); background-position: left 5px; background-repeat: no-repeat; }
- ベストアンサー
- CSS
background-color　ｃｓｓ
あるテーブルの<td>タグに2色のbackgroundcolorを指定し、Aの場合はA色のbackgroundcolorを指定し、Bの場合はA色の上にB色のbackgroundcolorを重ねたいですが、ソースは下記の要となっていますが、私にわかるのが<div>での指定しか分からなくて、それ以外の方法があれば教えていただきたいです。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>新規予約</title> </head> <body> <style> .test{ position:relative; width:100px; height:100px; z-index:2; background-color:rgb(255,0,255); } .test_2{ position:relative; top:-20px; width:50px; filter: alpha(opacity=50); opacity:0.5; } .test_3{ position:relative; color:rgb(255,255,255); height:100px; background-color:rgb(0,0,255); z-index:1; } .test_4{ position:relative; color:rgb(0,0,0); weight:100px; z-index:2; } </style> <div class="test"> <div class="test_4"> <a href="test">テスト</a> </div> <div class="test_2"> <div class="test_3"> </div> </div> </div> </body> </html>
- 締切済み
- HTML
CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。下記CSSをIE6で見るとbodyに書いた「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。いったい何故でしょうか。。。調べてみたのですがいまいち分かりませんでした。よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
background:での画像指定　MacのIEだけ正しく表示されません。
下記のCSSを使用してwebを作成しています。マウスオーバー時のgif画像がMac用のIE ver.5.23では文字列とかけ離れた箇所に表示されます。文字列は画面右であるのにgifは画面左に表示されています。 winのIEやFirefox,MacのNetScapeではきちんと文字列の左横にgifが表示されます。なにか良い方法ありますでしょうか？使用したcssとbodyを記載します。 <body> <div class="mainNav"> <b>test</b> <hr size=1 noshade width=250 align=right> <a href="http://www.geocities.jp/****/samus/samus_live.html"> <b>　live</b> </a> <a href="http://www.geocities.jp/****/samus/samus_member.html"> <b>　member</b> </a> </div> </body> /*---- main navi -------------------------------------------------------------*/ .mainNav { position: absolute; top: 10px; right: 10px; width: 98%; text-align: right; margin: 0px; padding 0px 0px 5px 0px; background-color: #ffffff; font-family: "ＭＳゴシック", sans-serif; } /*---- リンクの設定 ----------------------------------------------------------*/ a:link { font-size: 90%; color: #999999; text-decoration: none; } /*---- 表示済みリンクの設定 --------------------------------------------------*/ a:visited { font-size: 90%; color: #999999; text-decoration: none; } /*---- マウスオーバーリンクの設定 --------------------------------------------*/ a:hover { font-size: 90%; color: #cd853f; background: url("image/arrow_right.gif") left no-repeat; text-decoration: none; }
- 締切済み
- HTML
background-position;left
Windows 7 HTML 5 Chorme の環境ですが、 imageをbackgroundにしているんですが、 background-position のleft のピクセルを上げたら、このimageが普通は右に移動してくれそうなもんなんですがなぜか下に動いてしまいます。画像を動かす事自体はmarginで動かせば解決したのですが、下に行く現象の理由を知っておきたいです。なぜですか？ cssのコードは以下の通りです。 { background-image : url (img ~) background-repeat : no – repeat background-position left 5px padding-left : 20px }
- ベストアンサー
- HTML
Seesaaブログ　横幅設定変更について
Seesaaでブログを書いています。デザインは「両サイドバー」にしています。記事とタイトル部分の横幅(行文字数増)を広げたいと思っているのですが、どうしても上手くいきません。どなたか方法を教えて頂ければ助かります。宜しくお願いします！
- ベストアンサー
- ブログ
A:hover { color:red;background-color:yellow }
外部ファイルのＣＳＳの一部に下記があります。 A:hover { color:red;background-color:yellow } ある特定の文字の部分のhoverだけ yellowではなく　#FFCCCC　などの色に変えたいときの方法についてアドバイスいただけないでしょうか。文字の色を変えるのはできるもののhoverの色になるとよくわからず・・。
- ベストアンサー
- CSS
フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; 　　　　　　　　　　　font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; 　　　　　　　　　/*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ 　　　　　　display: block; line-height: 25px; text-decoration: none; 　　 text-align:right background-img:url(.gif); 　　　　　　padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 　　　　　　　　　　　　　　color: #8b1c62 } ul.sidemenu ul {margin: 0; 　　　　　　padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; 　　　　　　　line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; 　　　　　　　　　　　　　　　　　color:#ffffff; 　　　　　border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; 　　background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); 　　　　　　background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定ここから、html打ち込み↓  <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～　　 <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
W3C Validatorで検証するとbackground-imageが
W3C Validatorで検証するとbackground-imageが正しくありません。と出てしまいます。なぜでしょうか？ちなみにソースは以下の通りです。よろしくお願いします。 .menu A{ background-attachment : fixed; background-image : url(../top/botan ao.gif); text-align : center; width : 95px; height : 45px; vertical-align : middle; line-height : 15px; background-repeat : no-repeat; text-decoration : none; color : #e9d161; float : left; padding-top : 5px; font-weight : 600; }
- ベストアンサー
- その他（プログラミング・開発）
firefox とie6 でのbackground height wi
firefox とie6 でのbackground height width表示の違いホームページ作成しています。初心者です。 globalnavi というdiv のなかに　globalnavi li をfloat-rightで横並びにしました。 width 800px height 30px にしたいのですが IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！ #globalNavi{ background-image:url(../menubar.png); width:790px; height:30px; font-size:14px; color: #1C1D21; text-align:center; } #globalNavi li{ float:right; overflow:hidden; width:80px; height:30px; list-style-type:none; text-align:center; color: #1C1D21; border-left-width: 2px; border-left-style: solid; border-left-color: #999; line-height:0; } #globalNavi a{ width:80px; 　　height:30px; display:block; text-align:center; line-height:normal; } #globalNavi a:hover{ width:80px; height:30px; background-position: 0 -80px; background-color:#B7D68D; text-decoration: none;
- ベストアンサー
- HTML