CSSテクニックコミュのOpera

はじめまして。質問です。
現在WinXPのIE6.2、Netscape7.1、FireFox1.0、MacOSXのSafari1.2.4、IE5.2、Netscape7.1、FireFox1.0で、正常閲覧可能なページを作成したのですが、Win、MacともにOperaではリストを使用して画像を横に並べたナビゲーションが、すべて縦並びになってしまいます。なにかOperaに関する特殊な処理ってあるのでしょうか。

#top_nav {
width: 575px;
}
#top_nav li {
margin: 0;
float: left;
display: block;
}
#top_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#top_nav li a,
#top_nav li em {
display: block;
text-indent: -10000px;
color: #fff;
text-align: left;
font-size: 1px;
}
#top_nav li#top_nav01 a,
#top_nav li#top_nav01 em {
background: url(../../img/btn/btn_elevator.jpg) 0 0 no-repeat;
height: 150px;
width: 285px;
margin: 0 5px 0 0;
}
#top_nav li#top_nav01 a:hover {
background-position: 0 -150px;
text-decoration: none;
}
#top_nav li#top_nav02 a,
#top_nav li#top_nav02 em {
background: url(../../img/btn/btn_premini2_event.jpg) 0 0 no-repeat;
height: 150px;
width: 285px;
margin: 0;
}
#top_nav li#top_nav02 a:hover {
background-position: 0 -150px;
text-decoration: none;
}

コメント(17)

最初
全て
最新の40件

[1] mixiユーザー 02月22日 12:43

Floatで横並びのナビゲーションを作る時、Operaで問題が出たこと、僕はないのでなんともですが、

#top_nav li a, #top_nav li em
{display:block; text-indent: -10000px; }

あたりの記述がなんとなく悪さをしている気がします。
どうでしょうか。

[2] mixiユーザー 02月22日 12:55

text-indent: -10000px　って大胆ですね！
paddingじゃダメなんでしょうか

[3] mixiユーザー 02月22日 13:07

ありがとうございます。

>ima-dongさん
text-indent: -10000pxは、HTML上に書かれたリストの中身を見えないようにして、背景画像を見えるようにしているのですが、何か他に方法があるのですか？

[4] mixiユーザー 02月22日 13:50

自分のサイトでも似たようなことをやっているので、気になって自分のサイトを見てみたら、Operaでも表示されていたので、どこがちがうかCSSファイルを確認してみました。

#top_nav li {
margin: 0;
float: left;
display: block;
}

ここですが、

#top_nav li {
display: inline;
}

にかえるのと、

#top_nav li a,
#top_nav li em {
display: block;
text-indent: -10000px;
color: #fff;
text-align: left;
font-size: 1px;
}

これに

float: left；

を追加してみるとどうでしょうか？

ちなみに、text-indent: -10000emのような設定は、本当はdisplay:noneなどで隠したいけれど、そうするとHPRが読み飛ばしてしまうので、私もよく使います。
あんまり使いたくないんですけどね(^^;＞-0000em

[5] mixiユーザー 02月22日 14:58

画像を横に並べたナビゲーションとあったのでIMGタグがLIタグに入れ子になってると思ってたのですが、テキストを消して背景画像にしてたんですね。

floatさせている#top_nav li にwidthをいれるといいのではないかという気も。だめかなぁ。

[6] mixiユーザー 02月22日 14:59

↑追記
width: 285px;を#top_nav liのスタイルに追加するってことですー。

[7] mixiユーザー 02月22日 15:34

＞かずきちさん
オーソドックスなやり方のひとつとしては、
表示させたい背景画像のwidth+height分をpaddingで追い出して、overflowでhiddenにする、というのがあるかと思います。
だけどoverflowは一部ブラウザではdiv以外の要素で使おうとするとバグ発生するので、こちらも少々無理やりなソースになりかねないっぽいですが。。
　
原理というか考え方としては同じだと思いますが、
text-indentで画面外（1万ピクセル）を指定しているのが何とも大胆な方法だなあ～と思った次第です。

[8] mixiユーザー 02月22日 15:37

あと確かfloat使う場合は、floatさせるボックスにwidth指定するのは必須じゃなかったでしたっけ？？
気のせいだったらすみません。

[9] mixiユーザー 02月22日 16:05

参考程度によんでみてください。
※一番下ね

□CSSの応用技とか　- くりえいちぶ -
　http://punsuka.ameblo.jp/entry-affdceaa19841ae5ee297e051e769763.html

[10] mixiユーザー 02月22日 16:07

＞width: 285px;を#top_nav liのスタイルに追加するってことですー。
width指定しないと、横一杯に広がってしまいますからね。
こっちの方法のほうが、作ったスタイルをあちこちいじる必要がないので、スマートですね。

[11] mixiユーザー 02月22日 19:22

＞TOM
たしかにdisplay: inline;等を使用すれば並ぶようになりました。
ありがとうございます。ナビゲーションがキレになったと思ったら、おっしゃるとおり横一杯現象になってました。がんばって直します！

＞ima-dong
ご丁寧にありがとうございます。ご指摘のおかげで謎だった部分が紐解かれて大変助かりました。ありがとうございました！！

[12] mixiユーザー 02月22日 20:30

こんばんわ。

僕も背景画像の表示でtext-indent: -10000emのような設定と同じようなことをやっていますが、
会社でこのやり方だとgoogle等でスパムとしてはじかれるという意見がありました。
また、HTMLの記述では上のほうにあるH1をpositionでレイアウトして下のほうに配置すると、これもgoogleのロボットが読まないという噂も耳にしました。

自分はそんなことないと思っていますが、
どうでしょうか？

[14] mixiユーザー 02月22日 23:29

＞googleのロボット
「position: absolute; left: -9999px;
のような記述は、display: none;の代用として、アクセシビリティのために取り入れている、というケースも想定されるから今すぐこれをスパムとはしていない」

みたいなことを雑誌（WebDesigningだったかな）で読んだ記憶があるのですが、それを語っていたのが誰だったのか、正確には忘れてしまいました。Googleに聞く！みたいな企画記事だった気がするのですが。

[15] mixiユーザー 02月22日 23:52

＞背景画像の後ろに内容配置できたりするといいなー

スレとそれますが、昔実験的に
a#nav01:after {
content: url("/images/nav01.gif");
position: absolute;
display: block;

･･････

以降の記述忘れましたが、Aタグ内のテキストはそのまま表示させて、その上に絶対配置で同内容を示す画像を重ねられたりするのかなと思い、試しまくってたことが。
結果は惨敗でしたがｗこれじゃダメですね。

そもそもIEの対応がって話になってもダメなんですがｗ

ログインすると、残り3件のコメントが見れるよ