CSSでメニューバー

質問

初心者の質問ですいません。
CSSでこのようにボックス分けして
* { margin : 0 ; padding : 0 ; }
body { width : 100% ; }
#my_body{margin:0 auto; width:875px;}
#my_header { width : 100% ; height : 80px ; }
#my_header2{ width : 100% ; background-color: #0080ff;}
#my_navigation{float:left; width:150px;
background-color: #0080ff;
min-height: 1000px;}
#my_contents{float:left; width:725px;
background-color: #e5f6ff;
min-height: 1000px;}
#my_footer { width : 100% ; clear : both ;
background-color: #0080ff; }

HTMLのコード
<div id="my_body">
<div id="my_header">一番上のタイトルとグラデーション</div>
<div id="my_header2">
グラデーション
<style type="text/css">
body { background-image: url("縦長の写真");
background-repeat: repeat-x;
}
</style>
メニューバー
<form>
<input type="button" value="" class="li01" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li02" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li03" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li04" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li05" onClick="URL'" />
</form>
</div>
左のメニューバー
<div id="my_navigation">
<div id="mynavi">
</div>
</div>
本文
<div id="my_contents">
<div id="mymain">
</div>
</div>
フッダー
<div id="my_footer"></div>
</div>

これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。
初心者なので根本的な間違えを起こしていたらすみません。
なぜ表示されないか教えていただけませんか。
長文失礼しました。

回答No.3

noris02

いちおう、リンク先を確認したところ、my_header2部には、background:url("Cz30PB.png") repeat-x　が適応され
Cz30PB.pngが 表示されているようです。がしかし、その上にのっている、input class="li0*"の色指定でかぶさっているために結果見えなくなっているようです。input class=li0*の指定の width:175px　を 小さくするとみえます。(が、float:leftを使っているので padding-left等で調整することになると思います。)、もしくはclass="li*"をきってしまう(画像が表示されなくなるので他の手段で考える必要がある)。

この形の場合、
[ｃｓｓ]
*{margin:0;padding:0;}
.menu{display:block;width:100%;}
.menu ul{padding-left:70px;list-style:none;border:none;}
.menu li{display:inline;}
.menu a{width:150px;background:#0080ff;color:#fff;}
.menu a:hover{color:#333;}

[html]
<div class="menu">
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">紹介</a></li>
<li><a href="#">作ったもの</a></li>
<li><a href="#">活動記録</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
等とするのが、お勧めなのですが＾＾；

別件で
他、metaで 文字コード指定をしていないため、文字化けしてます。
noris02のプロフィル欄にあるwebサイトでコンタクトとってもらっても大丈夫ですよー

回答No.2

noris02

NO1 です。 あんぽんたんなことを言いました。ごめんなさい
こちらの解答で、おそらくやりたいことでは・・；
[css]
#my_header { width : 100% ; height : 80px ; }
#my_header2{ width : 100% ; background:url("img file") repeat-x}

[HTML]
<div id="my_body">
<div id="my_header">一番上のタイトルとグラデーション</div>
<div id="my_header2">
メニューバー
<form>
<input type="button" value="" class="li01" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li02" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li03" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li04" style="float:left;" onClick="URL'" />
<input type="button" value="" class="li05" onClick="URL'" />
</form>
</div>

補足

回答ありがとうございます。
CSSを移動したのですが、どうやら変わらないままのようです。
ここ以外で間違えたのでしょうか？
http://test2.seeds1996.com/

回答No.1

noris02

style と　css　の　bodyが衝突しています。
<style type="text/css">
body { background-image: url("縦長の写真");
background-repeat: repeat-x;
}
</style>
を ｃｓｓの body　に　いれこんでみてください。

body {
width:100%;
background-image: url("縦長の写真");
background-repeat: repeat-x;
}