タブ型ナビゲーションの背景画像と文字の位置がずれる

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

0   名前： ななみ ： 2007/09/22（土） 22:42  ［URL］  ID:HhAc2A15 sub-.G
IE6 では望み通りに見えているのですが　Firefox では「Home」などの文字（画像で作りました）が
背景画像の位置とずれています。
どうすれば　Firefox でも同じ形に見えるようになるのでしょうか？

文字を画像に変える前は　どちらでも同じ様に見えてました。
（URL の 03test の部分を 01test に変えると　ご覧いただけます。）
ただ　文字サイズを変えると　タブの上下のラインが背景とずれますので　画像に変えました。

解決法としては

1.　「Home」などの文字画像に　それぞれ id をつけて　position で位置を決める。
この方法しか　私は思いつきませんでした。
ただ　折角 ul でまとめたものに　一つ一つ id をつける　というのは　どうなのでしょう？

2.　 タブの背景画像に文字を書き入れる。
デザインを真似させていただいたサイトさんの背景画像を拝見して　なるほど！　と思いました。
三種類のタブの画像に　それぞれ文字が書かれていて　三種類をまとめて一つの画像にされています。
ただ　ソースを拝見しても　メニューのリストらしいものが見当たらず　実際　どのように書けばいいのかは
わからないままです。

私のファイルの場合　どの方法で　どのように書けばいいのか　教えていただけると　ありがたく存じます。
お手数をかけますが　どうぞ　よろしくお願いいたします。
1   名前： 元帥 ： 2007/09/22（土） 22:42  ID:QmF/WLgc sub-.y
IEでレンダリングを確認しつつ、最終的にFirefoxで確認した事が原因です。
その逆を採るようにして下さい。
#globalNavi li img { display: block;}
#globalNavi LI {TEXT-ALIGN: center}
text-alignはインラインにしか適用されない筈ですが、何故かIEはブロックにも適用してしまうようです。
この二行いずれかを直し、それによって伴う変更を修正すれば良かろうと思います。

2.のサイトURLを提示すれば、どなたか詳しい方が検証してくれるかもしれません。
2   名前： ななみ ： 2007/09/22（土） 22:42  ［URL］  ID:HhAc2A15 sub-.G
元帥さん　お返事ありがとうございました。　おかげさまで　出来ました。

おっしゃるとおり　IE で様子を見ながら　メモ帳でポツリポツリと書いたり消したりしておりました。
「Home」などの文字を画像に変えたとき　css をどのように書き換えればいいのか　わからなくて
様子を見ながら・・・という状態でした。
「ブロックとインライン」は　よくわからない物の一つです。
画像のセンタリングは分かっていた筈なのに　慣れないものが混じっていたので　戸惑いました。

今回は　Firefox で様子を見ながら　書き直してみました。
出来た！　と思っているのですが　いかがでしょう？

ヘッダーのデザインを真似させていただいたのは　Grow Collective さんです。
　http://gr0w.com/

そっくり真似したいと思って背景画像などを作りましたが　そっくりすぎる　でしょうか？
日本語が通じるなら　直接お尋ね出来るのですが　ちょっと気がかりです。
ソースについても　かなり複雑で　私には理解できないものが沢山並んでいます。

背景画像も拝見しましたが　background-position で　表示する部分を選ぶのだろうという程度しか
想像できません。
メニューのリストが見つからないのも不思議です。

仕組みなど教えていただけると嬉しいのですが　レベルが高すぎるようなら・・・
今回の形で　私は充分満足しております。
ありがとうございました。
3   名前： Z ◆XTzyosZXcL ： 2007/09/22（土） 22:42  ID:9zOB.njN sub-Cl
ヒントは「@import」です。

>出来た！　と思っているのですが　いかがでしょう？
　確かに文法チェッカはエラーにはなりませんが、個人的にはH2要素に11個もの細かい画像が含まれていたり、DD要素にDIV要素が含まれていたりと謎が多い気がします。

>「ブロックとインライン」は　よくわからない物の一つです。
　下記資料をどうぞ。

文書の骨格をかたちづくる基本要素：
http://www.kanzaki.com/docs/html/htminfo11.html
4   名前： Z ◆XTzyosZXcL ： 2007/09/22（土） 22:42  ID:9zOB.njN sub-Cl
　あ、こちらの方が直接的でいいですね。失礼(^^;。

ブロックレベル要素とインライン要素：
http://www.kanzaki.com/docs/html/element-level.html
5   名前： ななみ ： 2007/09/22（土） 22:42  ［URL］  ID:HhAc2A15 sub-.G
Ｚさん　ありがとうございます。
宿題が多かったので遅くなりました。　すみません。

ブロックとインラインについては　何度読んでも　わかったような分からないような状態です。

・Grow さんのナビゲーションについて
きちんと最後まで見ると　やっとメニューのリストが見つかりました。
（ li に一つ一つ id をつけることに　ためらいを感じる必要はなかったのかと思いました。）
いろいろ細かく指定されていて　タブの幅がそれぞれ違っていることなど　その仕組みが
なんとなく理解できました。

一番疑問に感じていたのは　「背景画像の文字と　リストに書いた文字が重なるのでは？」
ということでしたが　text-indent: -9999px によって　「画面上は見えない」ということでしょうか？
これは　まっとうな（？）手法なのでしょうか？

何れにしましても　Grow さんについては　「デザインだけ真似させていただいた」という状態に
しておきたいので　ソースまで真似るのは差し控えておくつもりです。

・見出しの左右の小さな画像について
数が多い　ということが　問題なのでしょうか？
一本のラインにまとめれば　よろしいのでしょうか？
一本のラインを背景にして文字を重ねる方法も考えたのですが　文字の左右で模様が途切れる
かもしれないと思い　様子を見ながら画像の数を増減いたしました。

・dd の中の div について
ブログで使った highslide.js を　このファイルでも使おうと思ったとき　書き方がわかりませんでした。
様子を見ながら　lint の意見を聞きながら　適当に div を使いましたが　「不適当」だったのでしょうか？
div がダメなら p しかないかしら　と　p を使ってみましたが　いかがでしょう？

どれも　中途半端な理解で　お恥ずかしいのですが・・・
よろしくお願いいたします。
6   名前： Z ◆XTzyosZXcL ： 2007/09/22（土） 22:42  ID:TEgTjs0O sub-Cl
　要素は闇雲に使うのではなく、そもそものもつ役割を考えたほうがよいと思うのです。

　いっぺんに沢山のご質問をされても回答に困りますので、とりあえず一つだけ。

>・dd の中の div について
>ブログで使った highslide.js を　このファイルでも使おうと思ったとき　書き方がわかりませんでした。
>様子を見ながら　lint の意見を聞きながら　適当に div を使いましたが　「不適当」だったのでしょうか？
>div がダメなら p しかないかしら　と　p を使ってみましたが　いかがでしょう？
　資料をお読みいただくとわかりますがDD要素には確かにブロック要素も含むことができます。が、そもそも「定義リスト」のための要素ですので「はて？」と思った次第です。
　ソース後半のTABLE要素の記述がかなりあっさりとしていたので（表であって表でないような感じ）、前半部分の複雑さと比べて目立った、ということもあります(^^;。

関連しそうな掲示板Q&A：
http://www.tagindex.com/bbs/qa07.html#a02

lintについて考察する資料の例：
http://homepage1.nifty.com/VET06031/web/lint100.html
7   名前： Z ◆XTzyosZXcL ： 2007/09/22（土） 22:42  ID:TEgTjs0O sub-Cl
　済みません、あとちょっと予防線を貼らせていただきます。

「じゃあどんなマークアップならよいのか」というご質問には、私は徳保隆夫さんの連載記事を読破されることをお奨めしておきます。掲示板の１スレッドではとてもではありませんが説明しきれないと思いますので。

"いろは"の先のCSS：
http://deztec.jp/lecture/rn/index.html

　理想論を言わせてもらうなら、先に述べた神崎先生の資料（http://www.kanzaki.com/docs/htminfo.html）の読破が一番お奨めです。が、義務ではありません。同じく徳保隆夫さんのコラム

http://deztec.jp/lecture/cl/index.html

で目に留まったものの拾い読みも「趣味の範囲においてどこで妥協するか」の一つの目安になろうかと思います。
#そろそろ雑談掲示板（http://www.tagindex.com/cgi-lib/bbs/patio.cgi）に移動かしら（あちらの105番スレッド（http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view&no=105）とか）(^^;。
8   名前： ななみ ： 2007/09/22（土） 22:42  ID:HhAc2A15 sub-.G
Ｚさんへ

お返事　ありがとうございました。
「確かに文法チェッカはエラーにはなりませんが・・・」　というご指摘は　
とても有り難いことですので　もう少しお話を聞かせていただきたいと存じます。
考えをまとめて　後ほど　105番スレッドに書き込ませていただきたいと思っております。
どうぞ　よろしくお願いいたします。


元帥さんへ

タブの文字がずれるという質問につきましては　おかげさまで解決できましたので
先ほど　新しい表紙としてアップいたしました。
表紙以外のファイルにつきましても　少しずつ作り直していきたいと思っております。

お世話になりまして　どうも有り難うございました。
9   名前： Z ◆XTzyosZXcL ： 2007/09/22（土） 22:42  ID:kkgtwoCv sub-Cl
　脱線ついでに、下記スレッドにも目を通して頂けると幸いです（実はこのスレッドで私が言わんとしようとしたことは殆どこのスレッドで出しちゃってますので（出切れば紹介した資料もあわせて目を通して頂けると幸いです）。

http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view&no=245
10   名前： Z ◆XTzyosZXcL ： 2007/09/22（土） 22:42  ID:kkgtwoCv sub-Cl
　あ、代名詞が多すぎましたOTL。ご理解いただけるとは思いますが、一応修正しておきます。

・このスレッド（1つ目）：
現時点でのスレッド（>>0-9）のことです。

・このスレッド（2つ目）
>>9での参照先ですが、ページをまたいでしまっているので改めて貼りなおします。
http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view2&f=245&no=0-
一覧へ戻る