CSSで背景色のwidthが指定できない！回答項目のwidthを統一する方法は？

前へ 次へ
このQ&Aのポイント
  • WebサイトのQ&Aのページを<dl>要素を使って作成しています。質問項目には、background-imageだけを使い、回答項目には、background-imageとbackground-colorを使っております。
  • 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。
  • 問題が発生している要素に対してwidthとpaddingを指定し、overflowを使って横幅を制限することで回答項目のwidthを統一することができます。
回答を見る
  • ベストアンサー

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だけ書きました。 何がいけないんでしょうか？ もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？ <!-- HTML --> <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; }

noname#233083
noname#233083
  • CSS
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

　簡単なサンプルを書いておきます。方法はいくつかありますが、思いつく３通りだけ入れておきます。 　そのように配置するなら、floatは不要です。 　簡略化プロパティを使用紙、一部しか書かないと他のプロパティは消えます。 　(例) background-color:redとしておいて、その後でbackground:url();などとするとbackground-colorの指定はないものとして扱われます。 ★リキッドデザインにしておきます。横幅は固定すべきではないでしょう。 　幅広のディスプレイからスマホのような狭いものまで、ひとつのスタイルシートですみます。ウィンドウ幅を狭くして確認してください。 　そのほうが書くのも、ずっと楽です。 　HTMLもスタイルシートもシンプルです。 ★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) でチェック済みの、HTML4.01strict+CSS2.1 (Shift_JIS)です。 タブは＿に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:80%;margin:0 auto;} div.section{position:relative;min-height:400px;} #QandA{margin-right:30%;} #QandA dt{font-weight:bold;} #QandA dd{background-color:#f5eabc;} #QandA dt,#QandA dd{margin:0 0 0 50px;clear:left;padding:5px;min-height:40px;} /* display:list-itemとlist-style-imageを使う方法 */ /* #QandA dt,#QandA dd{display:list-item;} #QandA dd{list-style-image:url(./images/a.gif);} #QandA dt{list-style-image:url(./images/q.gif);} */ /* :before擬似要素とcontent */ /* #QandA dd:before,#QandA dt:before{float:left;margin:0px 5px 0 0;} #QandA dd:before{content:url(./images/a.gif);} #QandA dt:before{content:url(./images/q.gif);} */ /* background-image */ #QandA dt,#QandA dd{padding-left:60px;background-position:5px 5px;background-repeat:no-repeat;} #QandA dd{background-image:url(./images/a.gif);} #QandA dt{background-image:url(./images/q.gif);} /* ここまでがbackground */ div.section div.aside{position:absolute;right:0;top:0;width:29%;font-size:0.9em;padding:0.5%;} div.section div.aside h3{display:none;} div.section div.aside p{margin:0 1em;} div.section div.aside ul,div.section div.aside ul li{display:block;list-style-type:none;margin:0;padding:0;} div.section div.aside ul li{background-color:aqua;} div.section div.aside ul li+li{margin-top:10px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは定義リストのデザインの仕方を説明しています。</p> ＿</div> ＿<div class="section"> ＿＿<dl id="QandA"> ＿＿＿<dt>HTMLとは何ですか</dt> ＿＿＿<dd>Hyper Text Markup Languageの略です。ウェブ上で試用されるマークアップ言語のひとつです。</dd> ＿＿＿<dd>ほかのドキュメントへのハイパーリンクを設定できる(これをハイパーと表現する)。画像・リスト・表などもマークアップできる。</dd> ＿＿＿<dt>CSSとは？</dt> ＿＿＿<dd>Cascading Style Sheetsの略</dd> ＿＿</dl> ＿＿<div class="aside"><!-- 本文とは直接関係ないのでasideとしておく --> ＿＿＿<h3>関連リンク</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> ＿＿＿＿＿<p>ウェブの総本山</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="http://www.w3.org/standards/webdesign/htmlcss">HTML &amp; CSS - W3C</a> ＿＿＿＿＿<p>ウェブページを構築する<abbr title="Hypertext Markup Language>HTML</abbr>と<abbr title="Cascading Style Sheets">CSS</abbr>の資料</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="http://www.whatwg.org/">WHATWG</a> ＿＿＿＿＿<p>Apple、Mozilla、Operaによって設立された、HTMLの開発やその関連技術に興味を持つ人々のコミュニティー。</p> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

noname#233083
質問者

お礼

ありがとうございます！！ まだ修正はしておりませんが、とても参考になります！！

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

とても煩雑になってしまっています。 HTMLがデザインに引っ張れているため複雑になり、それに連れてスタイルシートも大変なことになっています。 　HTMLは、文書構造だけ書きます。そのときに文書構造を補完すめためにidやclass名をつけます。この基本を忘れたらダメです。 [HTML <dl id="QandA"> 　<dt>HTMLとは何ですか</dt> 　<dd>Hyper Text Markup Languageの略です。ウェブ上で試用されるマークアップ言語のひとつです。</dd> 　<dd>ほかのドキュメントへのハイパーリンクを設定できる(これをハイパーと表現する)。画像・リスト・表などもマークアップできる。</dd> 　<dt>CSSとは？</dt> 　<dd>Cascading Style Sheetsの略</dd> </dl> だとします。QandAだということは、ここではidで指定しています。<dl>は定義とその説明の一組のグループでリストされますから、わざわざquestiontext_ddのようなclass名をつけなくて良いですね。 後はスタイルシートを書くだけです。十行もあれば十分なはず ただ、背景画像がどのようなもので、どのようにプレゼンテーションしたいかが見えてこないので、それぞれの画像と完成時のイメージを提示していただく必要があります。 width:592px; 　固定はあまり感心しません。現在はスマートホンから幅広のディスプレイまで様々な端末で利用されるので・・ padding: 0px 0px 0px 35px; 　このpaddingは何のためですか？境界に張り付いて読みにくくなると思いますが 以下は継承されるプロパティなので直近の親に指定しておけばよいです。 font-size: 15px; color: #000000; text-align: left; font-family: "ＭＳ Ｐゴシック",sans-serif; 　すでにbodyで指定されていればわざわざ指定する必要はありません。 display: inline; float: left; 　このふたつは矛盾しています。floatと指定すると他から切り離されてblockになります。 background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; 　簡略化プロパティで background:url(http://www.ok.com/img/question1.gif) no-repeat; 　ただ、デザインによるとdlに指定するほうが楽でしょう。

noname#233083
質問者

お礼

ありがとうございます。 あと、恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。 http://okwave.jp/qa/q7795472.html 上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？ お時間がある時にでも、お目を通して頂けたら本当に幸いです。

noname#233083
質問者

補足

お礼入力とダブってしまいますが、補足させて頂きました。 恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。 http://okwave.jp/qa/q7795472.html 上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？ お時間がある時にでも、お目を通して頂けたら本当に幸いです。

回答No.1

display:inlineをdisplay:block（とfloatの組み合わせ。記述済み）にしてみてください。 display: inline-blockでもいいですが旧IEで期待通り表示されないので、 CSSの文法違反になりますが、旧IE対策込みで、たぶん以下でも出来るかもしれません。 display: inline-block; \display: block; zoom: 1; display: inlineは、<span>のデフォルトスタイル（スタイルシートでdisplay:何かを指定しない状態）と同じ表示にするための物です。 inline指定ではwidth、heightが無効になります。 なお、コンディショナルコメントを使えばCSS文法違反を起こさずにIE対策も出来ます。 コンディショナルコメントについては検索してください。

noname#233083
質問者

お礼

ありがとうございます！！ コンディショナルコメントについて調べてみます！！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ＣＳＳ　背景が表示されない、IEでflotが適用されない

    dlタグで3×3のカラムで表示を行いたいのですが上手くいかず困っています。 dlに指定したfloat:left;がFierfox3では適用され横並びにddの内容が表示されるのに対し、EI6ではfloat:left;が適用されず縦並びになってしまいます。 そしてファイルをサーバーにＵＰした所、文字自体に文字化けも起こります。 背景にいたっては、EI・Fierfox共に表示されず。 と、目も当てられない状態です。 そこで、試しに別のサーバーにファイルをUPした所、float:left;はIEでも問題なく適用され、文字化けも解消されました。 ただ、背景だけは表示されないままでした。 別サーバーにUPした事でIEのfloatが適用され、文字化けも解消たという事は、サーバー固有の設定等に対応していないファイルをUPしてしまっていたと言う事なのでしょうか？それともCSSに問題があるのでしょうか？ 背景は何故表示の理由等も含めて、どなたかお分かりの方がいらっしゃいましたらよろしくお願い致します。 -html-------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <link href="index.css" rel="stylesheet" type="text/css" /> <title>タイトル</title> </head> <body> <div align="center"> <div id="top_box"> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト </dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div> </div> </body> </html> --css------------------------------------------------ /* CSS Document */ body { font-size:small; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; color:333; background-position: center; background-image:url(images/back.gif); background:#FFF; text-align: center; text-indent: 0px; padding: 0px; margin: 30 0 0 0; } #contents { margin: 0px auto; width: 870px; } form { margin: 0px; padding: 0px; } div { margin: 0px; padding: 0px; font-size:0.9em; color:#666666; letter-spacing:0.08em; line-height:1.4em; } img { border: 0px; } .box { width:745px; text-align:left; } .title { width:870px; text-align:left; } #top_box{ width:800px; height:400px; background-color:#ffffff; } /*font-sizeは固定*/ dl{ margin:0px; margin-left:10px; margin-right:10px; margin-bottom:1em; padding:0px; float:left; width:225px; font-size:12px; border-width:1px 1px 0px; border-style:solid; border-color:#ffffff; } dt{ margin:0px; padding:0px; } dd{ margin:0px; padding:4px 0.5em; border-color::#fff; border-bottom:0px solid; text-align:left; } dd.name{ height:3.0em; } dd.comment{ height:3.0em; background-color:#ffffff; } dd.date{ height:3.0em; border-style:none; }

  • CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一

    CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一部反映されません。 詳しい方ご教授願います！！ ・スクロールバーが出ずに指定した高さを超えてデカデカと表示される ・ボックスを囲む線が表示されない ・その他の設定（余白、色、フォント・・・）は指定通り表示される 外部CSSの記述は下記の通りです。 ----------------------------------- #main dl.info { height: 130px; overflow: auto; margin-right: auto; margin-left: auto; padding: 10px; border: 1px solid #cccccc; margin-bottom: 1em; } #main dl.info dt { font-weight: bold; float: left; } #main dl.info dd { border-bottom: 1px solid #cccccc; padding-left: 8em; } ----------------------------------- ちなみに、mainは下記の通りです。 ----------------------------------- #main { float: left; margin-top: 20px; margin-left: 40px; width: 500px; } #main h2 { font-size: 110%; background-image: url(images/h2bg.gif); background-repeat: no-repeat; background-position: bottom; padding-left: 10px; color: #696969; clear: both; } #main p { padding: 2px; } ----------------------------------- htmlファイルへの記述は下記の通りです。 ----------------------------------- <div id="main"> <h2>更新情報</h2> <dl class="info"> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> </dl> </div> <!--/main--> ----------------------------------- いくら見直しても書き直してみても、直りません・・・ きっと私がどこか抜けているか間違っているのだと思うのですが・・・ 宜しくお願い致します！

  • CSS IDごとのCLASS指定

    以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか？ #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…

    • ベストアンサー
    • HTML
  • CSSでの影の付け方

    http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>

  • li dl　背景画像が消えてしまう

    listタグ内のdlタグに背景画像をつけました。 Dreamweaverで制作していて、ブラウザ確認（IE/firefox）すると問題ないのですが、いざサーバにあげてみると、IE/firefoxともに背景画像が表示されません。 背景画像以外のcssは反映されていました。 こんなことってあるのでしょうか？ 【html】 <ul id="bkn_r"> <li><img src="../../images/bkn_fr_r01.jpg" border="0"></li> <li><dl id="bkn_no"> <dt>番号</dt> <dd>YAT-001</dd> <dt>担当者</dt> <dd>××××</dd> </dl></li> <li><dl id="tel"> <dt><img src="../../images/bkn_fr_r02.jpg" alt="*"></dt> <dd id="tel_no">××</dd> </dl></li> </ul> 【css】 ul#bkn_r { list-style-type: none; padding: 0; margin: 0; } ul#bkn_r li img{ font-size:0; line-height:0; vertical-align: top; padding: 0; margin: 0; } #bkn_no { background-image: url(../images/bkn_fr_rbg01.jpg); background-repeat: repeat-y; padding-left: 30px; margin: 0px; width: 200px; } #tel { background-image: url(../images/bkn_fr_rbg02.jpg); margin: 0px; } #tel_no { font-weight: bold; color: #CC0000; font-size: 1.2em; letter-spacing: 0.03em; } #bkn_no dd { font-weight: bold; font-size: 1em; margin-left: 10px; margin-top: 0px; }

    • ベストアンサー
    • HTML
  • cssの指定の横幅よりテキストがはみ出てしまう

    cssの指定の横幅よりテキストがはみ出てしまう 下記のとおり指定したのですが、winIE6.0だとwidthに収まるのに、FirefoxやNetscape 7.0 だと外にはみ出てしまい、横幅内に改行してくれません。 すみませんが、教えて下さい。 tate.css--------------------- #question { margin: 10px; padding: 3px; width: 560px; } #question dl{ margin: 10px; } #question dt{ color: #90B77F; font: 0.8em "MS ゴシック", Osaka, sans-serif; } #question dd{ font: 0.8em "MS ゴシック", Osaka, sans-serif; margin-left: 30px; } #question p { margin-bottom: 1em; font: 0.8em "MS ゴシック", Osaka, sans-serif; } --------------------------------- test.htm--------------------------------- <!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=shift_jis" /> <title>試し</title> <link href="tate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="question"> <dl> <dt>質問：○○○○○○○○○○○○○○○○○○○○</dt> <dd>回答：○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○</dd> </dl> </div> </body> </html>

    • ベストアンサー
    • HTML
  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • CSSでの背景色の指定について

    以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!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=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }

    • ベストアンサー
    • CSS
  • 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
  • css　hover　ie6

    いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する