ヘッダーのメニューナビがIEでは正常に表示されているのに、Firefoxではメニュー全体幅が左右にはみ出てしまいます。どうしたらどんなブラウザでも指定したWidth幅どうりに表示できるようになるのでしょうか?
色々自分なりに考えましたが、CSS初心のためいまいちわかりません。
良きアドバイスよろしくお願いします。
CSS
<style type="text/css">
<!--
menug{
position: relative;
padding: 0 0 0 58px;
margin: 0 0 auto 0;
background: url(/menug_bg.gif) repeat-x;
height: 46px;
list-style: none;
width: 870px;
}
.menug li{
float:left;
}
.menug li a{
float: left;
display: block;
color:#;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 15px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.menug li a b{
float: left;
display: block;
padding: 0 20px 0 6px;
}
.menug li.current a, .menug li a:hover{
color: #fff;
background: url(/menug_hover_left.gif) no-repeat;
background-position: left;
}
.menug li.current a b, .menug li a:hover b{
color: #fff;
background: url(/menug_hover_right.gif) no-repeat right top;
}
-->
</style>
HTML
<ul class="menug">
<li class="current"><a href="#"><b>MEMU1</b></a></li>
<li><a href="#"><b>MENU2</b></a></li>
<li><a href="#"><b>MENU3</b></a></li>
<li><a href="#"><b>MENU4</b></a></li>
<li><a href="#"><b>MENU5</b></a></li>
<li><a href="#"><b>MENU6</b></a></li>
</ul>
No.4ベストアンサー
- 回答日時:
No.2です。
No3さんの方法と比べると邪道なやり方かもしれませんが、ulの外側にdivで囲ってもよければ、下記の方法でいけるかもしれません。
#menuにwidthを追加して、.menugからwidthを削除しています。
htmlは<div id="menu">を追加しました。
#menu{
width: 870px;
}
.menug{
position: relative;
padding: 0 0 0 58px;
margin: 0 0 auto 0;
background: url(image/menug_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
<div id="menu">
<ul class="menug">
<li class="current"><a href="#"><b>MEMU1</b></a></li>
<li><a href="#"><b>MENU2</b></a></li>
<li><a href="#"><b>MENU3</b></a></li>
<li><a href="#"><b>MENU4</b></a></li>
<li><a href="#"><b>MENU5</b></a></li>
<li><a href="#"><b>MENU6</b></a></li>
</ul>
</div>
楽天市場のソースはいまだにtable組やfontタグが中心ですので、
ユーザビリティやユニバーサルサービス的な文法遵守は難しい状況で、
まだcssを使うのは、ちょっと厳しい環境かもしれませんね。
kuzumiHKさんたびたび有難うございます。ご指摘どうりそのままタグを適用し、反映してみたら見事firefoxでも両サイドが広がらず収まりました。自分にっとは邪道でもなんでもなく、これが一番望んでいた事です。とにかくkuzumiHKさんをはじめ色々相談にのっていただいた方々に感謝いたします。本当に有難うございました。
No.3
- 回答日時:
こんにちは
サイト拝見させてもらいました
全体幅『870px』にしてあるとありますが実際には『928px(width:870px + padding-left:58px)』です
なのでFirefoxの表示が正常の状態です
そちらで作られたものがIEで『870px』に収まっているのはDTD宣言(<!DOCTYPE ~>)を行っていないからです
・DTD宣言をした後、.menugを『width:812px;』としてみてください
※DTD宣言をすると他の部分も表示が崩れる可能性があります
・もし面倒で(したほうがいいと思いますが)DTD宣言しないのであれば
<style type="text/css"><!--
.menug { width:812px; }
--></style>
<!--[if IE]>
<style type="text/css"><!--
.menug { width:870px; }
--></style>
<![endif]-->
になります
この回答への補足
回答有難うございます。なるほどDTD宣言って言うんですか~よくほかのサイトのソースの頭に付いてますよね。それで、ためしにここで http://e-eandg.ddo.jp/docs/doctype.html 紹介しているDTDをショップのヘッダーに貼り付けようとしたのですが、ほとんど外部リンクとみなされてしまって適応できませんでした。(楽天ショップは基本的に外部リンクが禁止されています。)でも、なんかやり方しだいでどうにかなりそうな気がするのですけど・・・CSSでなんか表現できないのでしょうか?だめならあきらめますけど・・とりあえず今はmenug { width:870px; }のままにしてあります。firefoxだと当然両サイドが広がってしまいますけど。今のところ楽天のシステムを利用してショップを構築してるので、なにかと規制があってやることがかぎられちゃうんですよ・・CSSは良いけどJAVASCRIPTはだめだとか・・やっぱ自社サイトを作ってまるごと楽天にアップするしかないのでしょうか? それと、DTDを記載する場合、何を基準に宣言したらよいのでしょうか?何種類かあるみたいですけど、うちのサイトに適したDTDを宣言するにはどう見極めれば良いのでしょうか?初歩的で申し訳ありませんがどうかよろしくお願いします。
補足日時:2008/05/04 19:40No.2
- 回答日時:
こんな感じでいかがでしょうか。
画像とbタグは、コピペで視認できるようにはずしてあるので、
背景色の設定部分にurlを戻せばいけると思います。
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
.menug{
list-style: none;
width:660px;
margin:0 auto;
}
.menug li{
display: inline;
}
.menug li a{
display: block;
float: left;
padding:5px;
width:100px;
background: #ccc;
text-align: center;
vertical-align:middle;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
}
.menug li a:hover{
color: #fff;
background: #999;
}
.menug li.current a{
color: #fff;
background: #039;
}
-->
</style>
<ul class="menug">
<li class="current"><a href="#">MEMU1</a></li>
<li><a href="#"><b>MENU2</b></a></li>
<li><a href="#"><b>MENU3</b></a></li>
<li><a href="#"><b>MENU4</b></a></li>
<li><a href="#"><b>MENU5</b></a></li>
<li><a href="#"><b>MENU6</b></a></li>
</ul>
内容としては、ulをセンター合わせにして幅660pxに固定、
liはインライン要素に変換、aをブロック要素にして、
サイズを100px+余白5pxづつで幅110px×6ボタン
もし、左右いっぱいまで背景を反映するなら、
ulをさらにdivで囲って、width:100%でいけると思います。
この回答への補足
早速のご回答ありがとうございます。一応自分のわかる範囲でkuzumiHKさんのご指摘いただいた内容に画像URLを指定し反映させてみました。がbackの画像が重なってしまったり、各MENU自体が縦に落ちてしまったりして思うどうりいきませんでした。多分自分の解釈が間違っているのだと思いますが、自分が記載したタグのどこの部分を直し、付け加えたらFirefoxでも横幅全体が870pxで崩れず表示されるようになるのでしょうか?参考までに今回のメニューナビの元データが置いてあるサイトのURLを乗せておきます。(ここのメニュータグを使わせてもらっています。)http://www.dynamicdrive.com/style/csslibrary/ite …
無知で申し訳ありませんがよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで菱形の画像サムネイルを表...
-
レスポンシブWebデザインでリン...
-
「CSS」リストの2段組どのよう...
-
css ol liにdisplay:inlineを設...
-
ul li を inlineにすると、右か...
-
IE6でナビ下に隙間ができてしま...
-
Dreamweaverテンプレート内のナ...
-
アコーディオンメニューがかく...
-
HTMLで組織図を作成する方法
-
複数の画像を横並びにし、その...
-
ddの中にulを入れ子にすると上...
-
テーブル内のプルダウンの下に...
-
li.QuadPartの最大値?
-
Webのコーディングについての質...
-
左メニューをCSSで固定したい
-
float:leftで<li>要素を横並び...
-
サイドメニューのロールオーバ...
-
参照中のリンクを強調表示
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報