CSSで横一列のメニューボタンを作成する方法
- CSSを使用して、横一列のメニューボタンを作成する方法について教えてください。
- 現在、CSSでメニューボタンを作成しようとしていますが、画像が固まってしまって横一列に並びません。
- また、良い画像を使用したメニューボタンの作成方法を教えていただけますか？
- ベストアンサー
CSSでメニューボタンを横一列にしたかったのですが、一ヶ所に固まります。
CSSでメニューをつくろうとおもい、画像で作ったのですが、、それをul li でリスト化し、 div#nav ul { list-style-type: none; } div#nav ul li{ display: inline; left: 10px; top: 50px; width: 710px; } といったかんじで 横一列のメニューを作ったのですが、 left: 10px; top: 50px; の設定がいけないのか、全部の画像が左 10px 上から50pxのところにあつまってしまい、横一列に並んでくれません。 どうすればよこいちれつにならんでくれるようになりますか？もしくは、もっとよい画像を用いたメニューのつくりかたはありますでしょうか、お願いいたします。
- muxic
- お礼率37% (97/259)
- CSS
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
div#nav ul { list-style-type: none; left: 10px; top: 50px; width: 710px; } div#nav ul li{ display: inline; } ではどうでしょう。
関連するQ&A
- メニューの横スクロールバーを消したい
色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。 ※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。 ドロップダウンメニューをセンタリング表示しているのですが、 どうあっても横スクロールバーが出てしまいます。 下記サイトではoverflow:hiddenを使用すると書いていますが 使用するとドロップダウンが非表示になってしまうため難しいです。 http://www.coolwebwindow.com/csstips/csstechnic/000241.php 【html】 <div id="global-nav"> <ul class="menu" id="menu"> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li><a href="dl-1.html">ドロップダウン</a></li> <li><a href="dl-2.html">ドロップダウン</a></li> <li><a href="dl-3.html">ドロップダウン</a></li> </ul> </li> </ul> </div> 【css】 div#global-nav { position:relative; width: 1000px; height: 40px; margin: 0 auto; background: #999; } ul.menu { position: relative; list-style:none; left:50%; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#000; text-decoration:none; } ul.menu li.a { position: relative; left:-50%; float:left; } ul.menu ul { position:absolute; top:40px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none; } ul.menu ul li { position:relative; border-top:none; width:180px; margin:0; } ul.menu ul li a { display:block; padding:3px 7px 5px; background-color:#d1d1d1; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul ul { left:180px; top:-1px; } ul.menu .menulink { width:180px; } ul.menu .menulink:hover, ul.menu .menuhover { background:url(images/header_over.gif); } ul.menuの中のleft:50%を消すと横スクロールバーが消える事はわかったのですが、 それだと中央揃えにならないので…。 どうか宜しくお願いします！
- ベストアンサー
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- CSS
- CSS、IE6-7で要素が消えてしまいます。
CSS初心者です。 過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！ お願い致します。 当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。 シンプルな構造のページのはずなのですが、以下の HTML / CSS で リストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { width: 100%; text-align: center; position: absolute; bottom: 30px; } #nav { position: static; width:700px; height: 50px; text-align:left; margin:0px auto; } html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float:left; width: 140px; } #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; } #nav ul li a:hover { color: #000; background-position: bottom; } .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！
- 締切済み
- CSS
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- cssのみ使用したプルダウンメニュー
はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }
- ベストアンサー
- HTML
- メニューの横並びで改行されてしまう。
ul li を使用して、横並びのメニューを作成したいのですが、 最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML <body> <div id="wrapper"> <header> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">information</a></li> <li><a href="#">party</a></li> <li><a href="#">access</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> <!-- /wrapper --></div> CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }
- ベストアンサー
- CSS
- CSSでのマウスオーバーの画像切り替えについて
現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？ 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。
- 締切済み
- HTML
- cssで、一枚の画像でロールオーバーができない。
一枚の画像でロールオーバーさせたいのですが、 どうしてもうまくいきません； 全体 幅495px,高さ60px の画像。 幅99x30pxのボタンで、縦2,横5つ並んでいます。 縦１行目に、通常ボタンが横5つ。 縦２行目に、オンマウスボタンが横5つ。 nav1~nav5のボタンに、 通常は、１行目、１つ目のボタンが表示されていて、 オンマウスすると、画像が消えてしまいます。 わかる方、回答お願いします。 ■html <div id="globalnav"> <ul> <li id="nav1"><a href="#">a</a></li> <li id="nav2"><a href="#">b</a></li> <li id="nav3"><a href="#">c</a></li> <li id="nav4"><a href="#">d</a></li> <li id="nav5"><a href="#">e</a></li> </ul> </div> ■css #globalnav{ width:495px; height:30px; margin-left:305px; margin-top:70px; padding:0; } #globalnav ul{ list-style: none; margin:0; padding:0; } #globalnav li{ float:left; width:99px; margin:0; padding:0; text-indent:-9999px; } #globalnav li a{ display:block; text-decoration:none; width:99px; height:30px; background: url(rollover.gif) no-repeat; } /*通常*/ #nav1 a { background: 0 0; } #nav2 a { background: -99px 0; } #nav3 a { background: -198px 0; } #nav4 a { background: -297px 0; } #nav5 a { background: -396px 0; } /*オンマウス*/ #nav1 a:hover { background: 0 -30px; } #nav2 a:hover { background: -99px -30px; } #nav3 a:hover { background: -198px -30px; } #nav4 a:hover { background: -297px -30px; } #nav5 a:hover { background: -396px -30px; }
- ベストアンサー
- その他（プログラミング・開発）
- CSSでプルダウンメニュー
お世話になります。 添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。 問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。 添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。 そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。 知識がなくどうしていいのかサッパリ分かりません。 どうか助けて下さい！ 下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;} <!--html--> <div class="menu"> <ul> <li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。
- ベストアンサー
- CSS
