dポイントプレゼントキャンペーン実施中！

CSSでbackground-colorがうまく設定できない。

解決済

  • 質問者：casin
  • 質問日時：
  • 回答数：4件

初心者すぎてどうやってもわからなかったので質問させて頂きました。

以下のHTMLのタグ？(テキストナビ？のつもり)に背景色を付けたいのですが、CSSでバックグラウンドカラーを設定すると、背景色の高さが、ページの一番上まで伸びてしまいます。背景色の高さを調節したいのですがどうすればよいのでしょうか？

<div id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>

この下のタグには文字に背景色が文字の高さ分、普通に表示されました。（上のタグの下にあります。）
<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>

原因が分からないので関係あるのかわかりませんが、ページの一番上には、リストで作ったメニューバーがあります。このリストはmargin-topで下に下げてあります。その下に最初のタグが並んでいます。単独では問題ないと思うのですが、リストで作ったメニューバーの影響のような気がするのですが、よくわかりません。

どうやって質問したらよいのかわからなかったので、このようになりましたが、情報不足でしたら補足しますので、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

Opera 対応， IE 対応が、どうにか出来たと思う


改良版をご提示致します。


=== CSS ===

body{
margin-top:0px;
}
.sdvDummy1{
margin-top:125px;
margin-left:0;
padding:0;
background:#cccc00;
float:left;
clear:both;
line-height:1px;
}
.sdvDummy2{
clear:both;
line-height:9px;
}
.contents{
color:#330000;
background:#ffffcc url("image/title.jpg") no-repeat top;
margin-right:auto;
margin-left:auto;
border-top:solid 0px #330000;
border-right:solid 25px #330000;
border-bottom:solid 25px #330000;
border-left:solid 25px #330000;
width:606px;
}
ul#menu{
clear:both;
margin:0;
padding:0;
}
ul#menu li{
background:#cccc00;
float:left;
white-space:nowrap;
list-style-type:none;
}
ul#menu a{
display:block;
color:#cccc00;
background-color:#330000;
margin:0 0 0 1px;
width:120px;
height:30px;
font:12px/30px normal;
text-decoration:none;
text-align:center;
}
#menu a:hover{
color:#ffcc00;
background:#cccc00;
}
#menu a:active{
color:#ffffcc;
background:#cccc00;
}
#menu span{
color:#ffffff
display:none;
}
#menu .current{
color:#ffcc00;
}
#menu .line{
border-right:1px solid #cccc00;
}
#navi{
color:#ffffcc;
background-color:#cccc00;
padding-right:20px;
clear: both;
font-size:11px;
text-align:right;
}
#navi a{
color:#330000;
margin-top:0;
margin-left:0;
font-size:11px;
text-decoration:none;
}
#navi a:hover{
color:#ffcc00;
}
#navi a:active{
color:#ffffcc;
}
#pagetitle{
padding:10px 0 0 20px;
}
.midasi{
color:#330000;
font-size:18px;
font-weight:bold;
margin:0;
}
.komidasi{
color:#cccc00;
font-size:14px;
font-weight:bold;
}


=== HTML ===

<body>
<div class="contents">
<div class="sdvDummy1"></div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a class="current" href="inside.html">Inside</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="request.html">Request</a></li>
<li><a class="line" href="contact.html">Contact</a></li>
</ul>
<div class="sdvDummy2"></div>
<div id="navi" style="clear: both;">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>
<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>
<!--罫線-->
<hr color="#cccc00" size="1px">
</div>
</body>


=== ポイント ===

背景は、既定値は継承でなく透過だったと思うのですが・・・。
OL や UL のリスト要素に指定してもその指定がうまくいかない様で
LI 要素に指定すると期待する結果が得られる様で。

リストを横に Opera でも表示するには、
OL や UL のリスト要素に float:left; を指定しない方法を探さないといけない様で
かといって今回は、 float:left; 含みで margin-top を指定して上からの位置を指定したい物がある。
という事で、位置指定を別要素で行う様に分離しました。
HTML の記述上ではあまり綺麗な記述ではありませんが、
とりあえず、文法はクリアしている上に
各ブラウザに対応しているという実用の上からは
適切な記述になっていると思います。


以上でなんとか、実用的にも知識的にもクリアできたと思います。
また何かございましたら、ご質問下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなりすぎて申し訳有りません。
現在この件についててのつけられない状況にありますので、これで閉め切らさせていただきます。

丁寧に教えていただきまして本当に感謝しております。

本当にありがとうございました。

通報する
お礼日時：2005/06/06 19:07

No.3

  • 回答者： sion_fs
  • 回答日時：

質問の補足を動作確認させて頂きました。


えっと…
<div id="navi">
の行を、
<div id="navi" style="clear: both;">
に修正してください。


なお、蛇足ですがmozilla系ブラウザでは正常に表示出来ますが、ＩＥ系では正常に表示出来ていない事はご承知でしょうか？

※mozilla系では、borderはwidthの幅指定の「外側」に、ＩＥでは「内側」に表示されています。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました。
教えて頂いた通りにやりましたら出来ました！

＞なお、蛇足ですがmozilla系ブラウザでは正常に表示出来ますが、ＩＥ系では正常に表示出来ていない事はご承知でしょうか？

当方Macでsafari、firefoxでは正常に表示されましたが、IEでは背景色が表示されませんでした。これは仕方が無いのですね。

通報する
お礼日時：2005/02/22 14:33

No.2

大変申し訳ございませんが、本当に情報が不足しています。


また、ふと疑問に思われるのが
＞ページの一番上には、
＞リストで作ったメニューバーがあります。
＞このリストはmargin-topで下に下げてあります。
＞その下に最初のタグが並んでいます。
たとえばこれを「<div>検証用文字列</div>」とか何かで
置き換えて動作（表示）確認はされたのでしょうか。
より簡素化して要点を絞れば、再現できたソースをそのまま質問に提示できる様になり、
良いかと思いますが・・・。

少なくもとご質問の情報だけでは再現する処理を故意に作成する事も困難です。
ただ類似の思いつく可能性としては、 float (表示位置) ですかねぇ～。
あと、background-color (背景色) はその指定した要素の幅，高さだけでなくそのパディング（内側の余白）まで効果がある様です。
＞背景色の高さが、ページの一番上まで伸びてしまいます。
＞背景色の高さを調節したいのですがどうすればよいのでしょうか？
つまり <div id="navi"> の上の位置はページの一番上になっているのでしょう。
その問題点を放置して希望を達成する方法は、
その中にインライン要素の <span id="navi"> でも挟めばよいと。
<div id="navi2"><span id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</span></div>
この時の注意点は、div と span の id 名を異なる様にする事と、
背景色の指定は span に対してする事。
それから、width:100%; (エレメントの横幅) の指定を
span に対して行う事を忘れない事です。

と、いろいろ書きましたがこれは文法上の事で動作確認はしていないので
もしかしたらご希望にそえないかもしれませんので
その点はご了承下さい。

尚、一番良いのは問題点を明確にして対処する事です。
それぞれ指定している CSS とかご提示できるだけご提示されるのが望ましいかと思います。
（特に <div id="navi"> より先に記述されているというタグに対しての CSS は影響が大きいと思いますので
出来れば全てご提示されるのがよろしいかと思いますが・・・）

この回答への補足

情報不足で、大変失礼しました。No.1の方の補足欄に、補足させていただきました。

＞つまり <div id="navi"> の上の位置はページの一番上になっているのでしょう。

この部分指示がどうなっているのかやはり自分ではわかりませんでした。
本を見ながら、参考になるものをコピーしたりして作っていますので、基本的な構造がいまいち理解できていません。divとp、span とかどうやってつかいわけるのか？など。基本的な部分の間違い等指摘して頂けたらありがたいです。
素人の分際で生意気ですが、代替案ではなく問題点を修正したいです。がんばりますのでよろしくお願いいたします。

補足日時：2005/02/22 08:59
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： Ysan
  • 回答日時：

少なくとも、id="navi","pagetitle","midasi","komidasi"とA,DIV,BODYの


CSSに何を記述しているかが解らないと答えようがありません。

background-colorでなくて、ほかの物が関係しているのだと思いますので…

この回答への補足

大変失礼いたしました。以下に補足いたしましたのでよろしくお願いします。お見苦しいはずと思いますので、厳しくご指摘ください。

↓CSSの記述

body{
margin-top:0px;
}

.contents{
background-color:#ffffcc;
font-color:#330000;
border-top:solid 0px #330000;
border-bottom:solid 25px #330000;
border-left:solid 25px #330000;
border-right:solid 25px #330000;
width:606px;
margin-left:auto;
margin-right:auto;
background-image:url("image/title.jpg");
background-position:center top;
background-repeat:no-repeat;
}

#menu{
font-size:12px;
margin-top:125px;
margin-left:0;
margin-bottom:9px;
padding:0;
background:#cccc00;
float:left;
}
#menu ul{
margin:0;
padding:0;
}
#menu li{
float:left;
display:block;
margin:0;
white-space:nowrap;
list-style-type:none;
}
#menu a{
color:#cccc00;
background-color:#330000;
border-top:1px solid #cccc00;
border-left:1px solid #cccc00;
border-right:none;
text-decoration:none;
display:block;
width:120px;
height:30px;
font:12px/30px normal;
text-align:center;
}
#menu .line{
border-right:1px solid #cccc00;
}
#menu a:hover{
color:#ffcc00;
background:#cccc00;
}
#menu a:active{
color:#ffffcc;
background:#cccc00;
}
#menu span{
color:#ffffff
display:none;
}
#menu .current{
color:#ffcc00;
}

#navi{
font-size:11px;
/*本当はここに背景色#cccc00を指定したいのですが*/
color:#ffffcc;
text-align:right;
padding-right:20px;
}
#navi a{
font-size:11px;
color:#330000;
text-decoration:none;
margin-top:0px;
margin-left:0;
}
#navi a:hover{
color:#ffcc00;
}
#navi a:active{
color:#ffffcc;
}

#pagetitle{
padding:10px 0 0 20px;
}
.midasi{
color:#330000;
font-size:18px;
font-weight:bold;
margin:0;
}
.komidasi{
color:#cccc00;
font-size:14px;
font-weight:bold;
}



↓以下HTMLの記述

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="graphica.css" type="text/css">
<title>RE CASIN GRAPHICA</title>
</head>
<body>

<div class="contents">

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a class="current" href="inside.html">Inside</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="request.html">Request</a></li>
<li><a class="line" href="contact.html">Contact</a></li>
</ul>

<div id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>

<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>

<!--罫線-->
<hr color="#cccc00" size="1px">

</div>


以上になります。メニュー部分を下げたのは、一番上にサイトのタイトル画像(width:606px height:125px)をCSSで貼付けたかったからです。

補足日時：2005/02/22 08:32
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報