- ベストアンサー
cssでのナビゲーションのレイアウトについて
ナビゲーション用のロゴとメニュー用ボタンをflashで作り、cssでレイアウトを試みているのですが、希望の通りにできません。 希望のレイアウトは、 ※ヘッダー（サイズ：760×59.8PX）の左端にロゴマーク（126×59.8PX）、その右側にメニュー用のボタンを配置。 ※メニューボタンは全部で３つあり、A（サイズ：80×36PX）、B（75×34.2PX）、C（75×36.3PX）で、ロゴの右側になるべく等間隔で配置したい。 というものです。 これまでに試したのは、 １、<header>内に、ロゴとメニューのボタンを全てリスト化して配置し、一つずつmarginのサイズ調整。結果、IEではヘッダーのサイズが上下に広がり、ロゴの下側にメニューが３つ並びます。 FireFoxでは、ヘッダーのサイズは指定のままですが、メニューがヘッダーの下側に並んでしまいます。 ２、次に、ロゴとメニューを左右にfloatで振り分けようとしたところ、IEでは全てのボタンがヘッダー内の左上に固まってしまい、FFでは、メニューボタンが本文にかぶさってしまいました。 長い質問になってしまって申し訳ありませんが、改善点をご指摘いただけないでしょうか？よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 これって、もう解決してしまったのですかね？ レイアウトは書いて頂いたソースで正しい前提で、 一応、私ならこうするっていうのを書いときますね。 （勝手にimgとかに置き換えたり色着けたりしてますけど。） ---------------------------- <html> <head> <style type="text/css"> #header { height: 60px; width: 760px; display:block; background-color:red; } #rogo { width:126px; height:60px; float:left; background-color:blue; } ul#menu { list-style-type:none; margin:0px; padding:0px; } li.menu{padding:0px; border:0px; margin:12px;float:left;} </style> </head> <body> <div id="header"> <div id="rogo"> /*--swf--*/ </div> <ul id="menu"> <li class="menu"><img src="" alt="a.swf" style="width:80; height:36"></li> <li class="menu"><img src="" alt="b.swf" style="width:75; height:34.2"></li> <li class="menu"><img src="" alt="c.swf" style="width:75; height:36.3"></li> </ul> </div> </body> ------------------------------- POINT ・ＩＤは一回のみの使用でクラスは複数回の使用可。 ・inline要素には基本的にmargin、padding、width、height等の指定はしない。（非推奨なので） を踏まえて、左寄せするだけならdiv menuはいらないので削除。 liはブロックスタイルのままfloat:leftでならべる。こうするとmarginも効く。且つ、個別に指定していたliは内容が同じなのでクラス化。 で、スマートにやりたいことできてると思うのですが、如何でしょう。 後は＃２さんの回答を踏まえてやってください。 後に続くコンテンツを考えてかもしれませんが、基本的にposition系の指定は後々使い難いケースがでてくるので、最初から使わないレイアウトを考えたほうが良いかも。 私、回答ずれてないですか？大丈夫ですかね（笑） あと、個人的にはオブジェクト置くだけならdiv#rogoもいらないかな。objectに直接ＩＤかクラス当てる手もありますし。
その他の回答 (2)
FireFox ではなく Fire"f"ox （レッサーパンダという意味）です。 炎のキツネに化けさせないようにしてください（笑） http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate …とまぁ、半分ジョークの揚げ足取りはコレくらいにして本題となりますが、 float:left; を解除していないと非 IE 系ブラウザではよくコンテンツが重なります。 １つめの </div> の下に何か <div class="hoge"> </div>（.hoge {clear:both;}）みたいのを指定するといいと思いますよ。 また、ついでに言っておくと position:rerative; はよく IE がバグでおかしな表示をしますから、 覚えておくと役に立つことがあると思います。（信じられないかもしれませんが、最悪の場合 IE がクラッシュします）
お礼
ご回答、ありがとうございます！ 質問投稿のあと、ヘッダー内の「rogo」と「menu」をfloatで振り分けてからはコンテンツが重なる点は改善され、また、右に振り分けた「menu」内でのボタン配置については、「menu」のborderを固定し改善できました。 position:rerative; については、驚きました！ IE がクラッシュする可能性があるなんて、なるべく使いたくないと思います。 私のほうでも調べてみたのですが、position:absolute;については記載されているサイトを見つけることができました。 http://www.stylish-style.com/csstec/hi-level/print-css.html また、Firefoxについては、ずーっと「火狐」だと思い込んでました（汗）。 ご指摘、ありがとうございました！
- cobun5513
- ベストアンサー率59% (25/42)
文章で書かれると分り難いので、 差し支えなければソースを貼って貰った方が 回答し易いです。 ソースプリーズ
補足
失礼しました！ その後、ABCのメニュー用ボタンのサイズを統一した上で、上記２の方向で、左右の振り分けができました。 現状では、右側に配置したmenu内で、メニューボタンの配置でつまづいています。それぞれのメニューボタンに、marginの指定が左右にしか適用されません。上下の調整をするにはどうすれば良いか、アドバイスを頂けますでしょうか？ 【HTML】 <div id="header"> <div id="rogo"> /*--swf--*/ </div> <div id="menu"> <ul> <li id="a"> /*--a.swf--*/ </li> <li id="b"> /*--b.swf--*/ </li> <li id="c"> /*--c.swf--*/ </li> </ul> </div> </div> 【css】 #header {height: 60px; position: relative; width: 760px; display:block;} #header #rogo{width:126px; height:60px;float:left;} #header #menu{width:634px; height: 60px; float:right;} #header #menu ul{list-style-type:none; margin:0px; padding:0px;} #header #menu ul li{display:inline} #header #menu ul li#p{padding:0px; border:0px; margin:12px;} #header #menu ul li#g{padding:0px; border:0px; margin:12px;} #header #menu ul li#o{padding:0px; border:0px; margin:12px;} よろしくお願いいたします。
お礼
こんにちは。 ご回答いただき、ありがとうございます！ 質問投稿してから、一応思い通りの形にはなっていたのですが、cobun5513さんにご記入いただいたソースで書き直し、見た目は同じままですがとてもスッキリすることができました。 自分では思いつかなかった（ツギハギだらけのソースしか書けない）もので、とても勉強になります。 ありがとうございました。
補足
その後、”position系の指定”を止めて、レイアウトしなおしました。 アドバイス、ありがとうございました。