display blockできません

質問

初めまして、現在左側の5段メニューボタンを作成中なのですが、
テキストで書いたリンクの文字が出てきたり、
display blockできなかったり、
IEでは5段積みでも、firefoxではつぶれた5段積みで
表示されてしまいます。
私のCSSの書き方がおかしいのでしょうか？
どなたかご指導をお願い致します。宜しくお願い致します。

html

<div id="left">
<div class="left_style6">
<p><a href="##.htm">aaa</a></p>
</div>
<div class="left_style7">
<p><a href="##.htm">bbb</a></p>
</div>
<div class="left_style8">
<p><a href="##.htm">ccc</a></p>
</div>
<div class="left_style9">
<p><a href="##.htm">ddd</a></p>
</div>
<div class="left_style10">
<p><a href="##.htm">eee</a></p>
</div></div>

css

.left_style6 {
background: url(img/aaa.gif) no-repeat;
width : 170px;
height : 30px;}

.left_style6 p a {
margin: 1px 0 0 5px ;
display : block; }

.left_style7 {
background: url(img/bbb.gif) no-repeat;
width : 170px;
height : 30px;}

.left_style7 p a {
margin: 1px 0 0 5px ;
display : block; }

.left_style8 {
background: url(img/ccc.gif) no-repeat;
width : 170px;
height : 30px;}

.left_style8 p a {
margin: 1px 0 0 5px ;
display : block; }

.left_style9 {
background: url(img/ddd.gif) no-repeat;
width : 170px;
height : 30px;}

.left_style9 p a {
margin: 1px 0 0 5px ;
display : block; }

.left_style10 {
background: url(img/eee.gif) no-repeat;
width : 170px;
height : 30px;}

.left_style10 p a {
margin: 1px 0 0 5px ;
display : block; }

回答No.1

abril · ベストアンサー

とりあえずそのままコピペしても、

> IEでは5段積みでも、firefoxではつぶれた5段積みで表示されてしまいます。

こちらの環境（Firefox2 on Windows XP、DOCYTPEが不明ですのでHTML4.01 Strictと仮にしておきました）ではそうはなりませんでしたが。
※メニューボタンどうしの上下方向の余白は違ってきますが（揃えたければ更に調整が必要です）。

> display blockできなかったり、

このままでもblockにはなってますね。ただし、幅と高さが与えられていないので質問者様がイメージするところの状態にはなっていない様に見えるのでしょう。aに背景イメージに使用している画像と同じW170px×H30pxを指定して下さい。そうすれば、背景画像全体と同じ領域がリンク領域となります。
こんな感じで一括指定を。

div#left p a {
display: block;
width: 170px;
height: 30px;
}

ここで共通するプロパティをまとめて指定してしまえば、.left_style6 p a～.left_style9 p aまでの指定は不要となります。

ただ、

> テキストで書いたリンクの文字が出てきたり、

現状ではこうなるのが当然です。テキスト部分を背景画像上から非表示にする様な指定が何もされていないからです。いくつか方法はありますが、よく使われるものを一つ。"text-indent: -9999px;"という様なキーワードで検索してみて下さい。ヒントが得られます。

お礼

早速のお返事を頂きまして、ありがとうございました。
おかげさまで形になってまいりました。
また何かございましたら、宜しくお願い致します。

回答No.2

ORUKA1951

HTMLは文書構造を記述し、プレゼンテーションはスタイルシートでが目的でスタイルシートをつかうのですが、そのHTMLはそれがまったく理解できていないことを示しています。ちなみにスタイルシートを止めてそのHTMLをご覧ください。
これはリンクのリストですから
<div class="footer"><!-- ページの終わりに書くパンくずリスト -->
　<ul>
　　<li class="for_top"><a href="##.htm">aaa</a></li>
　　<li class="for_product"><a href="##.htm">bbb</a></li>
　　<li class="for_books"><a href="##.htm">ccc</a></li>
　</ul>
</div>
などとしてあれば、スタイルシートがない状態でも、リンクの一覧と分かりますよね。文書構造とスタイルシートを分けろというのはそういう意味です。
・class(id)="left***もその意味で感心しません。
　先で右や下に置きたくなったらHTMLを書き直すのですか？
・class="***_style9も同様、将来リンクの並べる順序を変更したら？
「文書構造とスタイルシートを分ける」というのは、あくまで根底に流れる理念なのです。形だけ合わせてはダメ

　これをウィンドウの右側にタイに配置したいなら
div.footer ul{
　display: block;
　position: absolute;
　top: 0px;
　left: 0px;
　width: 190px;
　padding: 5px 10px;
}
div.footer ul li{
　display: block;/* display:inlineでも良い */
　width: 170px;
　height: 30px;
　margin: 2px 0px;
　background-color: rgb(200,200,200);
　color: inherit;
}
div.footer ul li.for_top{ 宣言 }
div.footer ul li.for_product{ 宣言 }
div.footer ul li.books{ 宣言 }
/* こうすると順番が変わっても問題ないし、ページによってリストの数が変わっても、同じリンク先のデザインを統一できます。 */

お礼

貴重なご意見を頂きまして、ありがとうございました。
今後の参考になりました。
また何かございましたら、宜しくお願い致します。