横並びのメニューボタンの表示方法について
- 横並びのメニューボタンについてfloat:leftでメニューボタンを横並びにしています。表示を100％にするとうまく並ぶのですが、100％以上にすると左端に隙間が、100％未満にすると、ある時点からメニューボタンが2列になってしまいます。
- 表示を100％にするとうまく並ぶのですが、100％以上にすると左端に隙間が、100％未満にすると、ある時点からメニューボタンが2列になってしまいます。
- メニューボタンを横並びにする方法について調べています。表示を100％にするとうまく並ぶのですが、100％以上にすると左端に隙間が、100％未満にすると、ある時点からメニューボタンが2列になってしまいます。回避方法を教えてください。
- ベストアンサー
横並びのメニューボタンについて
float:leftでメニューボタンを横並びにしています。 表示を100％にするとうまく並ぶのですが、 100％以上にすると左端に隙間が、 100％未満にすると、ある時点からメニューボタンが2列になってしまいます。 これを回避する方法はあるでしょうか。 <<html>> <body> <div id="wrap"> <img src="image/photo1.jpg"> <div id="navi"> <!-- ナビボタン ここから --> <ul class="menu"> <li><a href="index.html" >ホーム</a></li> <li><a href="page1.html" >ページ１</a></li> <li><a href="page2.html" >ページ２</a></li> <li><a href="page3.html" >ページ３</a></li> <li><a href="page4.html" >ページ４</a></li> <li><a href="page5.html" >ページ５</a></li> </ul> </div> <!-- /navi --> </div> <!-- /wrap --> </body> <<css>> body { text-align: center; background-color:#EEEEEE; font-size: 12px; margin-top: -10px } #wrap{ margin: 0 auto; text-align: left; background-color: #ffffff; width: 752px; border: 1px solid #404040; border-collapse: collapse; padding: 0; } .navi{ width:750px; } ul.menu { margin: -5 0 0 0px; padding :0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 125px; line-height: 30px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(menu1.jpg); background-repeat: no-repeat; color: #ffffff; font-size: 12px; } ul.menu li a:hover{ background-image: url(menu2.jpg); color: #404040; } よろしくお願いします。
- kkmmkkmmm
- お礼率63% (37/58)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
100％の意味が分からないけど、 .navi <div id="navi"> これなに？ margin: -5 0 0 0px; なんの-5かな？
関連するQ&A
- display:inlineで横並びにしたメニュー
のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。 html側 <div id="banner_menu"> <ul> <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> </div> CSS側 #banner_menu { clear: both; margin: 0px; padding: 7px 0 5px 15px; border-top: solid 1px #999; border-bottom: solid 1px #999; width: auto; margin-left: auto; margin-right: auto; background-color: #ffffff; } #banner_menu ul { text-align: left; padding-bottom: 1px; margin: 0px; } #banner_menu li { color: #ffffff; display: inline; padding-left: 7px; padding-right: 5px; border-left: solid 1px #999; width: 120px; } #banner_menu a { color: #4d4d4d; font-weight: normal; background-color: none; text-decoration: none; font-size: 12px; background: url(var_gry120x48.gif) no-repeat center center; line-height:20px; height: 20px; } #banner_menu a:hover { color: indianred; font-weight: normal; background: url(var_gry120x48_2.gif) no-repeat centert bottom; }
- ベストアンサー
- ブログ
- メニューボタンの背景が表示しない
ｃｓｓでメニューボタンの背景をhoverで変更しようと思っています。 が、最初からHP上にメニューボタンが表示されません。 たびたびHPを作っていますが、今回表示されない原因がわからず、 非常に困っています。 《html》 <body id="top"> <!-- ヘッダーここから --> <div id="wrap"> <div id="header"> <img src="./images/title.png"> </div> <!-- ナビボタンここから --> <div id="navi"> <ul id="menu"> <li><a href="top.html" >TOP</a></li> <li><a href="menu.html" >メニュー＆料金</a></li> <li><a href="access.html" >アクセス</a></li> <li><a href="question.html" >お問い合わせ</a></li> </ul> </div> <!-- コンテンツここから --> <div id="contents"> 以下 省略 《css》 #navi{ width: 750px; height:45px; margin: 0px; } #menu { margin: 0; padding :0; list-style-type : none; } #menu li { margin:0; float:left; } #menu li a{ display:block; width: 150px height: 43px; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; } どこが間違っているのか指摘していただけないでしょうか。
- ベストアンサー
- 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のみでプルダウンメニューを作りたい
こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。） 恐れ入りますが、どなたかご教授いただきたくお願い致します。
- 締切済み
- レンタルサーバ・ASP
- 横並びのメニューにならない
初心者です。 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; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- リスト横並びのメニューのアンドロイドでの隙間
スマホ用のメニューを作成しています。 とりあえず、シンプルなメニューを作っているのですが、viewportを入れると画面を横に回転した際に右端に余白が生じてしまいます。 ぴったり収まるように20%ずつ5つのメニューとしています。 解決する方法はあるでしょうか？ <style> body{ margin:0; padding:0; } .globalnavi{ margin: 0; padding: 0; width: ***; } .globalnavi ul{ list-style-type: none; width: 100%; margin: 0 auto; padding: 0; } .globalnavi li{ float: left; width: 20%; margin: 0; padding: 0; } .globalnavi a{ text-align: center; display:block; padding: 0.5em 0; width: 100%; background-color: black; color: white; } .globalnavi a:hover{ background-color: red; color: white; } </style> <nav> <ul class="globalnavi"> <li><a href="#">Home</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> </ul> </nav>
- 締切済み
- CSS
- ドロップダウンメニューについて
apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>
- 締切済み
- ホームページ作成ソフト
- 全体幅とメニューバーの幅が合いません
レイアウトとしてヘッダーの下にメニューバーをおいています。 メニューバーは5項目あり、各項目幅151px。 右側に1pxのボーダーを入れています。 最後の項目の右側のボーダーは"なし"にしています。 (151 x 5) + 4 = 759 この幅に合わせて全体幅を759pxに設定しているのですが、幅が合いません。（メニューバーが少し短くなってしまいます） ちなみに各項目の幅を152にすると全体の幅は760でも大丈夫のようです。 ブラウザーで確認するとピッタリ来ています。 ただ『ページ編集』ではズレが生じています。 ホームページビルダー13を使用しています。 メニューバーは箇条書きを回り込みで横一列にしています。 ↓参考として <html> <div id="container"> <ul id="menu"> <li><a href="toppage">トップページ</a> <li><a href="konnichiha">こんにちは</a> <li><a href="ohayou">おはよう</a> <li><a href="konnbnwa">こんばんは</a> <li class="menulast"><a href="odaijini">お大事に</a> </ul> </div> <css> div#container{ width : 759px; } ul#menu li{ list-style-type : none; float : left; } ul#menu{ padding-left : 0px; margin-left : 0px; font-size : 0.75em; background-color : #0071e1; height : 30px; margin-top : 0px; margin-bottom : 30px; } ul#menu li a{display : block; line-height : 30px; color : white; text-decoration : none; text-align : center; width : 151px; background-color : #003a75; border-right-width : 1px; border-right-style : solid; border-right-color : white; } ul#menu li a:hover{ background-color : #0071e1; } ul#menu li.menulast a{ border-right-style : none; } なぜ759pxの幅では合わないのか悩んでおります。 どなたかアドバイスよろしくお願いします。
- ベストアンサー
- CSS
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- ページを開いた直後のサブメニューを非表示
現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }
- ベストアンサー
- JavaScript
お礼
質問した後、いろいろと手直ししていたところ、 改善していました・・・。 意味不明の文で申し訳ありませんでした。 プロではありませんので、これでいいのだろうか？これでいいのだろうか？と 不安に駆られつつ試行錯誤しながら作り上げています。 なので、なにそれ？と聞かれると答えられません・・・（苦） できる方から見たら、なんじゃこりゃ？というモノだと思います。
補足
ご回答いただきましたのはありがたいですが、 馬鹿にされていらっしゃるのでしょうか。 気持ちがよくありません。 ご質問に関する答えですが、 ここに記載するにあたって書き換えていますので、 意味不明な文になっていたようです。