CSSでナビゲーションバーを作る方法
- CSSでナビゲーションバーを作る際、両端をそろえる方法について教えてください。
- ナビゲーションバーの幅を均等にするために%表示を使用しようとしていますがうまくいきません。どうすればよいでしょうか？
- また、Firefoxではうまく表示できてもInternet Explorerでは崩れます。対策はありますか？
- ベストアンサー
CSSでナビゲーションバーを作る際、両端をそろえるにはどうすればよいでしょうか？
CSSでWebデザインをしています。 ナビゲーションバーの両端をそろえたいのですが、どうすればよいでしょうか？ たとえば・・・ #navi{ width:800px; height:35px; margin:0px auto 0; } でとりあえず、800pxにそろえています。 この#naviのwidthの大きさとheaderや他のものもすべて800pxに統一したものをセンターであわせています。 センターであわせる方法は、margin:0px auto 0;であわせています。 本題なのですが、#naviの中に、ulliでナビゲーションバーを設置しようとしているのですが、どうしても右端に余白ができてしまったり、少しでも大きいと２段目へずれたりします。 widthの大きさを均等にするために%表示でしようとしているのですが、それもうまくいきません。 また、FFでうまく表示ができてもIEでは崩れたりします。 基本的なことかもしれないのですが、既出の中にはないようでしたので教えていただけるとありがたいです。 説明が下手ですので、回答していただくにあたって、不明瞭な部分がございましたら補足させていただきますので、なにとぞご教授下さいませ
- ritzkun
- お礼率61% (175/284)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
とりあえずこんな感じでいけました。 必要ない部分が多かったのである程度変更していますが・・・ 今回の場合%で指定する意味があまりないのでpxでいいと思います。 widthまたはheightとそれに対応するpaddingまたはborderを併用するとIE6で問題が起こる可能性があるので、同時に指定しなくて済むようにしてみました。 liにfloatとwidthを与え、aにheightではなくline-height（垂直中央揃えにもなりますし）とborderを指定することでバグを回避してる感じです。 clearfixに関しては調べられた方が早いので説明は省きます。 <style type="text/css"> ul,li,a { margin:0; padding:0; } .menu:after { /* clearfix */ display:block; content:"."; height:0; visibility:hidden; clear:both; } .menu { width:800px; margin:auto; clear: left; font-size:13px; border-right: #DBDBDB 0px solid; border-left:#E3E3E3 0px solid; list-style:none; /* clearfix */ height:1%; overflow:hidden !important; overflow:visible; /*/*//*\*//*/ display:inline-table; /* */ } .menu li { float:left; width:200px; } .menu a { display:block; text-align:center; line-height:42px; /* メニューの高さはここで指定した高さ＋2px （border分） */ color: #482400; text-decoration:none; border: #FFCC66 1px solid; } <ul class="menu"> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> 今回は関係ないのでそのままにしておきましたが、font-size:13px;は%で指定された方が良いです。
その他の回答 (2)
#menu ul,li,aに関しては多分#menu ul, #menu li, #menu aのことだと思いますが大丈夫ですよ。
いくつか補足があると答えやすくなるように思います ・DOCTYPE宣言は何ですか？（もしくは指定していませんか？） ・横並びはfloatで行っていますか？ ・paddingやmarginはfloatを指定した要素に使用されていますか？
補足
回答ありがとうございます。 補足説明をさせていただきます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> 宣言は以上のように宣言をしております。 横並びは、floatで行っております。 ＞paddingやmarginはfloatを指定した要素に使用されていますか？ これに関しては、使用しています。 .menu{ width:800px; height:42px; line-height:20px; margin:auto; text-align:justify; clear: left; border-right: #DBDBDB 0px solid; border-left:#E3E3E3 0px solid; } .menu a, .menu a:link, .menu a:visited, .menu a:active{ height:42px; margin:0px 0px; padding:2px 31px; text-align:center; line-height:40px; display:block; float:left; font-size:13px; color: #482400; text-decoration:none; border: #FFCC66 1px solid; } というのも、質問が間違えていて、ulliで組んでおらず、ただ単にaで指定していただけでした。 div id="navi" の中に、a をいれ、リンクしている部分は横並びにfloatしていた形だったのですが、今後は、ulliで指定してやっていければと思っていますので、ulliで教えていただきたいです。 きちんとした補足ではないかもわかりませんが わかる範囲で教えていただければ幸いです。 ちなみに、下記リンクのようなナビゲーションバーをつけたいです。 http://www.biyou-hifuka.com/
関連するQ&A
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- cssのmarginについて教えてください
cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。 外枠を組む所までは上手く行ったのですが 中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。 色々と試した結果、中の要素のmargin（下記におけるdiv#header pの部分）が 外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。 （この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。） marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。 試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。 それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか？ div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。 独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>
- ベストアンサー
- HTML
- wordpress ヘッダー画像 横に並べる方法
テーマはStinger3を使っています。 ヘッダー画像を二つ横に並べたいのですが縦になってしまいます。(header2がheader１の上に来ます。） #header1 { height: auto; margin-left: auto; margin-right: auto; width: 700px; padding: 0 0 0 290px; } #header2 { height: auto; margin-left: auto; margin-right: auto; width: 251px; } floatを使えば横に並べることはできたのですが、 ウィンドウサイズを小さくした時にレイアウトが崩れるので他の良い方法はないでしょうか？ 理想としては左側にheader2右側にheader1間に10pxの余白、ウィンドウサイズを小さくした時に、header1とheader2が左方向に移動していく（右から左に向かって小さくした場合） どうすればいいでしょうか？ 教えてください。
- ベストアンサー
- CSS
- CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
- WordPress レスポンシブテーマのCSS
http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。
- 締切済み
- CSS
- CSSで、指定されていない空白が開く
ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。
- ベストアンサー
- CSS
- ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。
ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。 http://www.asahi-home.info/test/asahi-home/index2.html でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。 これが、ブラウザによっては青い画像の下に隠れてしまうようです。 当方PCでIE６、IE7、FireFox２．０、Safari（バージョン不明）で確認したところ問題なく表示されます。 クライアント様からこの部分の表示崩れがおきているとのクレームがありました。（クライアント様のブラウザ不明） その部分のCSSは以下のようになっています。 アドバイス宜しくお願いいたします。 /* ナビ*/ #navi { text-align: left; } #navi li { float: left; } #navi li a{ display: block; text-indent: -9999px; } #navi li#menu01 a{ background: url("../image/navi01.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu02 a{ background: url("../image/navi02.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu03 a{ background: url("../image/navi03.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu04 a{ background: url("../image/navi04.gif") no-repeat; width: 119px; height: 40px; } #navi li#menu05 a{ background: url("../image/navi05.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu06 a{ background: url("../image/navi06.gif") no-repeat; width: 103px; height: 40px; } #navi ul li.active a { background-position: 0 -40px absolute !important; } #navi ul li a:hover { background-position: 0 -40px absolute !important; text-decoration: none; } /* メインイメージ（青の画像部分）*/ #bgmainImage { clear: both; margin: 0 auto; height: 200px; background: url("../image/main_image_bg.gif") no-repeat center bottom; } .mainImage { margin: 0 auto; width: 800px; } /* メイン コンテンツ部分*/ #bgmain { margin: 0 auto; background-color: #fff; } #main { margin: 0 auto; width: 800px; padding: 8px 0 0 0; } #main h3 { clear: both; margin: 15px 0 0 0; }
- 締切済み
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
補足
さっそく回答いただきましてありがとうございました！ ul,li,a { margin:0; padding:0; } の部分なのですが、仮に.menuを#menuとして #menu ul,li,a { margin:0; padding:0; } とした場合でもかまわないのでしょうか？ fontに関してのご指摘ありがとうございます☆ ただ、固定値にした理由としては、このナビゲーションバーでテキストを挿入する際、固定値にしておかないとナビがズレるといった不具合があったので、13ptとしておりました。 細部にいたるまで検証していただきまして本当にありがとうございます！