- ベストアンサー
フロートしたリストのセンタリング
勉強が足りなくて済みません！教えて下さい。 以下の通り、リストをfloatして横1列に並べたところ、どうしても画面中央に表示することが出来ません。divで囲ってそれをtext-align:center;しても駄目でした。解決策をお教え下さい。宜しくお願いします。 html------------------------------- <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul><br class="clear"> css------------------------------- ul#navi_footer { text-align: center; margin: auto;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;}
- prussianblue
- お礼率85% (46/54)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (3)
- passionHey
- ベストアンサー率37% (3/8)
申し訳ありません。質問よく読まずに間違った回答してしまいました。 （削除願い出したので、削除されてるかもしれません。） 多分こんな感じだと思うのですが、どうでしょうか 他のブラウザ今無いので、IEでしか確認してませんが・・・ <html> <head> <style> ul#navi_footer { margin:0px; padding:0px;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;} </style> </head> <body> <table width="100%"cellspacing="0" cellpadding="0" ><tr><td align="center"> <table border="1" cellspacing="0" cellpadding="0"><tr><td nowrap> <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul><br class="clear"> </td></tr></table> </td></tr></table> </body> </html>
お礼
ご回答有難う御座います。 本当に不勉強なくせに生意気なことをしようとしていて、申し訳ありません。 考え方としては、tableをデザインに利用する方法は廃する方向でデザインするようにしています。別にW3C至上主義者とかではないのですが、素直にそれが良いと思えた自分の挑戦意識と依頼人との方向性が一致したもので・・・。 一応、リンクアンカー一つ一つに対しwidth値を設定して、その合計値（borderの太さも勘案）をその外のdivのwidth値に設定することで解決致しました。皆様のアドバイスがとても参考になりました。有難う御座いました。
- passionHey
- ベストアンサー率37% (3/8)
> divで囲ってそれをtext-align:center;しても駄目でした。 div 要素は通常だと幅が 100% になるため、センタリングしても意味がありません。 具体的に幅を指定して初めて意味を持ちます。 ちなみに、div などブロックレベル要素をセンタリングするときは注意が必要です。 http://www6.atwiki.jp/uriaplus/pages/33.html#ex7 それと、リンクアンカーの切れ目がどこだかわかりにくいソースになっていましたが、 これはちゃんと Web サイトとして公開するときにはアンカーの色を互い違いに変えるなど何らかの処置をとってくださいね。 露天風呂客室なんていう風にも読めてしまいますから、混乱させるかもしれません。 意味もなくフェイントみたいになってるページはちょっと見る側も…(^^; それと企業サイトのようですから、最低限ブラウザは Firefox と Opera で動作確認したほうがいいと思います。 最近は Internet Explorer のセキュリティ問題を避けようって言う考えから、 違う原理で動いて IE のセキュリティ問題に影響を受けないブラウザを使う人も増えてきているようです。 http://www.mozilla-japan.org/ http://jp.opera.com/ ブラウザは他に有名どころで Netscape というのもありますが、 日本語最新版はいろいろ問題があって使用は望ましくないし、Firefox と種類が近いですから、 Firefox で対応できていれば無視してもほとんど問題はないでしょう。 http://www6.atwiki.jp/uriaplus/pages/14.html#n7 というわけで、前置きが長くなりましたが、これが修正後のソースです。 ul#navi_footer { text-align: center; margin: auto;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;} .box_center { width:600px; margin-left:auto; margin-right:auto; } .ie_center { text-align:center; } <div class="ie_center"> <div class="box_center"> <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客 室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料 理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外 観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特 典</a></li> </ul><br class="clear"> </div> </div>
補足
ご回答有難う御座います！なかなか回答が投稿されなくて焦っていました。引き続き自分でも調べているのですが、どうにもうまくいかなくて・・・。 まず、誤解を招き申し訳有りません。長くなる為、明らかに今回の事象に関係無さそうなCSS等は割愛してしまっていました。リンクアンカーについては、実際にはhoverを使ってマウスがポイントされるとボタンが凹むようなスタイルを組んだり、画像を当てたりと、数種類デザインを検討している段階です。また、動作確認も、火狐・ネスケ・オペラ、最近ではIE7ベータも極力確認するようにしています（IE7ベータは違うPCに入れてあるので常にではないですが）。その辺りの話をすっとばしていて、済みませんでした。 早速、お教え頂いたソースをそのままコピペして確認してみたのですが、やはりうまくいきません。自分がdivで試した時もwithは指定していたのですが、やはり結果では、div自体は当然センターに寄るのですが、divの中のリスト(ul)は左揃えのままになってしまい、センタリング出来ません。リストでない要素なら簡単に真ん中にいくのですが・・・（汗）。文章構造を重視してどうしてもリストにしたかったのですが（CSS非対応環境での見栄えもあって）、どうしたものでしょうか？何か、自分はとんでもなくバカな勘違いとかしているのでしょうか。
関連するQ&A
- リスト表示を左に寄せたい
いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト（全体）が左に寄らないので困っています。 できたらボックス（id-=navi）の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ （ちなみに3段組みの一番左のボックスです） 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>
- ベストアンサー
- HTML
- フロートするとメニューが落ちる IE6で不可
以下のようなhtmlを作成し、CSSを適用しました。 メニューを作成する為に、120×50のメニューボタンを横並びにする為、 フロートを使ったのですが、 FireFoxでは正常に表示されるのですが、 IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。 どうすればいいのでしょうか。 ■html <div id="wrapper"> <div id="header"> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div> </div> ■CSS body { text-align:center; font-size:small; } #wrapper { text-align:left; margin:0 auto; width:600px; } #header { } #left { float:left; width:200px; } #right { float:left; width:400px; } #footer { clear:both; } #header li a { display:block; float:left; width:120px; height:50px; }
- ベストアンサー
- HTML
- 【CSSについて】リストをフロートするとfirefoxでボーダーが消える
お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか？ とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？ さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
- <ul>タグでのリストの使い方
こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください～ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr>
- ベストアンサー
- HTML
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- floatを使ってリストを並べたところ
floatを使ってリストをならべたところ、それ自体はちゃんと表示されるのですが、別の部分がIEで表示されなくなりました（FireFoxでは表示されます）。 float要素を取り払うと、消えてしまう部分はちゃんと表されているので、floatに何か問題があるようなのですが…。 お分かりになられるかた、ご助言いただければ助かります。 以下、記述を書きます。 CSS記述 .catch{ margin:10px; font-size:20px; } .w-icon ul{ list-style-type:none; margin:0px; } .w-icon li{ float:left; text-align:center; } .w-icon a{ display:block; width:110px; height:25px; text-decoration:none; } HTML記述 <div class="catch">キャッチコピー</div> 本文 <div class="w-icon"> <ul> <li><a href="#">メニュ－１</a></li> <li><a href="#">メニュ－２</a></li> <li><a href="#">メニュ－３</a></li> </ul> <div style="clear:both;"></div> </div> 以上のように記載したところ、キャッチコピーの部分から本分の途中までブランク表示になります。 カーソルで選択すると文字は出てくるのですが…。 どうぞよろしくお願い致します。
- ベストアンサー
- CSS
- Listの中に<br>を入れてはダメなのですか？
見映えが良いようにとグレープの後ろに<br>を入れました。 <ul > <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li><a href="grape.html">グレープ</a></li><br> <li><a href="index.html">TOP</a></li> </ul> これで構文チェックをかけたら致命的エラーになりました。 Listの中の<br>ってそんなに罪が重いのですか？
- ベストアンサー
- HTML
- リストのCSSでのflort時の背景
ulに幅と背景色を設定しているのですが、リストを横に並べるために、floatさせると希望の表示になりません。リストを横に並べて、かつ、ulで指定している幅と背景色にしたいのですが、どのようにすればよいでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu {background-color: red;width: 1024px;} ul#menu li {float: left; width: 100px;} </style> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- <li>をfloat,inlineさせたときのセンタリング
スタイルシートを用いて、ナビゲーションバーを作っています。 リスト<li>をfloatさせて、横に長いものにしていますが、 1行では収まらないため、2行になっています。 リストにfloat:leftとinlineを指定することで、普通のテキストのように<div>ボックス内に流し込んで、端でいっぱいになったところで自動的に改行させています。 <div id="header"> <ul id="navi"> <li>トップ</a></li> <li>ページ１</li> <li>ページ２</li> <li>ページ３</li> </ul> </div> #header #navi li{ float:left; display: inline; } 実際には10個ぐらいあるのですが、説明のため上のように4つのアイテムがあるとして、説明すると、今は トップ ページ１ ページ２ と表示され、次の行で、"トップ"の左側に揃って ページ３ が表示されます。 やりたいことは、1行目のちょうど真ん中、（この場合"ページ１"の下あたり）に"ページ３"を表示させたいのです。 #header{ text-align:center; } または #header ul{ text-aligne:center; } で良いのかと思ったのですが、うまくいきません。 こういったことはできるのでしょうか？ そもそも、やり方がまちがっていますか？ <li>に対してfloatを解除すると、センタリングされるのですが、<li>同士の間にスペースが出来てしまいます（バックグラウンドに色が付いているので）。どちらかというとこちらをなんとかするようにしたほうがいいのでしょうか？
- 締切済み
- HTML
お礼
バグ情報、とても参考になりました。有難う御座いました。 一応、リンクアンカー一つ一つに対しwidth値を設定して、その合計値（borderの太さも勘案）をその外のdivのwidth値に設定することで解決致しました。皆様のアドバイスがとても参考になりました。有難う御座いました。