ＣＳＳで画像のボタンの列を作りますと

[新着] Webテンプレートを仮オープンしました

0   名前： akira ： 2006/01/18 02:04
初めまして。こちらの掲示板に初投稿させて頂きます。

書籍：スタイルシートスタイルブックという本でdivで囲ったサイトの制作をしているのですが、
画像のボタンバーの列（よくあるページ上部に各コンテンツのリンクがあるボタン）を制作したのですが、
なぜか下に数ピクセル空いてしまうのです。ブラウザによってはきちんと表示されているのもあるのですが、現在思案中です。
皆様のお知恵を拝借させて頂ければ幸いです。

■今回のタグでの表示方法。

<ul>タグにスタイルシートで、
width:700px;
list-style:none;
margin:0px;
padding:0px;
で、読み込んでおります。

<li>タグには、
float:left;と設定しております。幅は各ボタンの幅が違うので設定はされていません。


他に何か必要情報等がありましたら答えさせて頂きますので宜しくお願いします。

それでは、失礼致します。
1   名前： 匿名希望 ： 2006/01/18 02:04
> float:left;と設定しております。幅は各ボタンの幅が違うので設定はされていません。

文法違反。float時にwidth指定が無い（あるいはauto）ものは幅0と見なされる。
（CSS2.1で修正予定だが）
2   名前： akira ： 2006/01/18 02:04
匿名希望様

ご返信頂きありがとうございました。

文法違反ということでしたか。widthの指定についてなのですが、各ボタンの幅が、100px,80px,110px等いくつかに別れてある場合はその分だけliタグに埋めるスタイルシートを設定する形になるのでしょうか？

それともそもそも違う表記の仕方で設定するとうまく表示がなされるという方法もあるのでしょうか？

しつこく質問して申し訳ないのですがご回答頂けたら幸いです。
宜しくお願い致します。
3   名前： 匿名希望 ： 2006/01/18 02:04
li {
display: inline;
white-space: nowrap;
}

個人的にfloatはあまり使いたくない。めんどいから。

というか、>>0で気づいたことを反射的に書いただけなんで

>>>下に数ピクセル空いてしまうのです。ブラウザによってはきちんと表示されている

なら検証可能なソースと環境を示すべき。部分的に出されてもしようがない。
4   名前： akira ： 2006/01/18 02:04
匿名希望様

何度もご返信頂きありがとうございます。
検証可能なソースと環境ということを最初にお知らせするべきでした。
失礼しました。

htmlに入っているソース

-------------------------------------
<ul id="menubar">
<li class="menu"><a href="1.html"><img src="img/top_001_1.gif" alt="1" width="126" height="30" border="0"></a></li>
<li class="menu"><a href="2.html"><img src="img/top_002_1.gif" alt="2" width="136" height="30" border="0"></a></li>
<li class="menu"><a href="3.html"><img src="img/top_003_1.gif" alt="3" width="118" height="30" border="0"></a></li>
<li class="menu"><a href="4.html"><img src="img/top_004_1.gif" alt="4" width="125" height="30" border="0"></a></li>
<li class="menu"><a href="5.html"><img src="img/top_005_1.gif" alt="5" width="120" height="30" border="0"></a></li>
<li class="menu"><a href="6.html"><img src="img/top_006_1.gif" alt="6" width="115" height="30" border="0"></a></li>
</ul>

-----------------------------


htmlに反映させているＣＳＳ

-----------------------------
#menubar{
width:740px;
height:30px;
margin:0px;
padding:0px;
list-style: none;
}

.menu{
margin:0px;
padding:0px;
float:left;
}
------------------------------

■環境
IE:ボタンバーの下に数ピクセル空きができる。
FX:こちらの意図した表示ができる。
OP:こちらの意図した表示ができる。
MacIE5:こちらの意図した表示ができる。


です。匿名様のおっしゃるようにfloatを設定している箇所に幅の指定がありません。
変わりに全てのfloatの指定に幅を入れたのですが最初の状態と同じになってしまいました。

これはやはり私のやり方が悪いのでしょうか？
人に何度も聞くのは申し訳ないのですが宜しくお願いします。
では、失礼致します。
5   名前： ＤＳ ： 2006/01/18 02:04
>4のhtml,cssでは、リンクバーの下に空きは出ないと思いますよ。
おそらく、この箇所以外のhtml,cssの為じゃないでしょうか？
たとえば、
①</ul>の下にくるタグに対応しているCSS(marginやpaddingなど)
②上記CSS以下に書いているulやliやaなどで、設定が上書きされている。

多分①では？
6   名前： akira ： 2006/01/18 02:04
ＤＳ様

ご返信頂きありがとうございました。

頂いたご回答なのですが、私の方でも試してみたのですが各<div>でくくってるので、
<ul><li>タグには支障がでないようです。

試しに<ul><li>タグを含んだ箇所をカットしてブラウザで確認するときっちり空きスペースもなく表示されました。
また、ブラウザで表示されている状態で、ボタンバーの列をドラッグで選択すると、ボタンの画像より数ピクセル空いている場所まで選択しています。

やはり、<ul><li>タグが問題ではないかと。
一応解決策として、margin-bottom:-4px;のような形にして下を削っているのですがMacとOperaでは１ピクセル足りないのです。

自分できちんと解決するべきなのに何度も質問してしまい申し訳ありません。

7   名前： Pid ： 2006/01/18 02:04
http://www.mozilla.gr.jp/standards/webtips0018.html
と同種の問題と推測します。もしそうでなければ
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-box-sizing
を参考にしてみて下さい（たぶん，こちらはあまり関係ないと思う）。

なお，li 要素にいちいち class="menu" を付けたり，img 要素に border 属性を付けたりなどは面倒くさいので

#menubar li { ... }
a img { border: none; }

で十分かと思います（細かいことを言えば，menu"bar" という id 名の付け方は個人的に好きではありません (^^;)）。
8   名前： カヅサツ ： 2006/01/18 02:04  ［URL］
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
#menubar{
width:740px;
height:30px;
margin:0px;
padding:0px;
list-style: none;
}
#menubar li{
margin:0px;
padding:0px;
float:left;
}
#menubar li img{
vertical-align: bottom;
border-width: 0px;
}
</style>
</head>
<body>
<div style="border: 1px solid;"><!-- 検証用意味無しDIV -->
<ul id="menubar">
<li style="width: 126px;"><a href="1.html"><img src="img/top_001_1.gif"
alt="1" width="126" height="30"></a></li>
<li style="width: 136px;"><a href="2.html"><img src="img/top_002_1.gif"
alt="2" width="136" height="30"></a></li>
<li style="width: 118px;"><a href="3.html"><img src="img/top_003_1.gif"
alt="3" width="118" height="30"></a></li>
<li style="width: 125px;"><a href="4.html"><img src="img/top_004_1.gif"
alt="4" width="125" height="30"></a></li>
<li style="width: 120px;"><a href="5.html"><img src="img/top_005_1.gif"
alt="5" width="120" height="30"></a></li>
<li style="width: 115px;"><a href="6.html"><img src="img/top_006_1.gif"
alt="6" width="115" height="30"></a></li>
</ul>
</div>
</body>
</html>
9   名前： akira ： 2006/01/18 02:04
カヅサツ様、Pid 様
ご返信ありがとうございます。akiraです。

Pid様のおっしゃるようにやはりきちんとid名は考えて決めたほうがいいですね。
お目汚し失礼しました。ご指摘ありがとうございました。

カヅサツ様のご用意して頂いたタグを拝見させて頂きまして、私の制作しているページに設定したら、
見事私の意図する通りのデザインができました！
本当にありがとうございました。いざブラウザで見たときは本当に感動しました。


匿名希望様、ＤＳ様、Pid様、カヅサツ様、今回色々とご助言頂きましてありがとうございました。
私も早くみなさんのように指導を受ける立場からアドバイスをする立場になるべく精進していきたいと思います。

今後ともまた何かありましたら、自らの力で限界になったらみなさんのお知恵を拝借したいと思います。

どうもありがとうございました。
一覧へ戻る